圖表提示框的內容修改和HTML樣式解決

setChart(value) {let myChart = echarts.init(document.getElementById("fee"));let option = {title: {text: ""},tooltip: {trigger:'axis',formatter: function(params){return "<div style='padding:5px 10px'>"+ params[0].name +"<br>" +params[0].marker + params[0].seriesName +": "+ params[0].data + '分鐘'+'<br>' + params[1].marker+ params[1].seriesName +": "+ params[1].data + '分鐘'+"</div>"}},legend: {data: ["費用統計"]},grid: {top: '15%',left: "1%",right: "1%",bottom: "10%",containLabel: true},xAxis: {data: this.statDate,nameTextStyle: {color: "#404040",fontWeight: "400",fontFamily: "SourceHanSansCN-Normal",fontSize: 12},axisLabel: {margin: 9,color: "#404040",fontWeight: "400",fontFamily: "SourceHanSansCN-Normal",fontSize: 12},splitArea: {// interval:0,}},yAxis: {type: "value",name:'分鐘',splitLine:{show:true,lineStyle:{type:'dashed'}}},series: [{name: "通話時長",type: "line",itemStyle: {color: "#77C450"},areaStyle:{color:{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#77C450' // 0% 處的顏色}, {offset: 1, color: '#FFFFFF' // 100% 處的顏色}],global: false}},data: this.callLength,},{name: "錄音時長",type: "line",itemStyle: {color: "#4C84FF"},areaStyle:{color:{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#4C84FF' }, {offset: 1, color: '#FFFFFF' }],global: false }},data: this.recordingLength,}]};myChart.setOption(option);},

?

總結

以上是生活随笔為你收集整理的Echarts组件 tooltip提示formatter函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。