Echarts组件 tooltip提示formatter函数

图表提示框的内容修改和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);
    },