Echarts的提示（Tooltip）顯示額外內容

官方通常都是：

而咱們一般是須要顯示額外內容的，好比這樣

其中Tooltip也是參考了網友的寫法

option = {
    tooltip: {
        trigger: 'axis',
        formatter: function (params, ticket, callback) {
          var htmlStr = '';
          for(var i=0;i<params.length;i++){
            var param = params[i];
            var xName = param.name;//x軸的名稱
            var seriesName = param.seriesName;//圖例名稱
            var value = param.value;//y軸值
            var color = param.color;//圖例顏色
            
            if(i===0){
              htmlStr += xName + '<br/>';//x軸的名稱
            }
            htmlStr +='<div>';
            
            // 具體顯示的數據【字段名稱：seriesName，值：value】
            // 這裏判斷一下name，若是是咱們須要特殊處理的，就處理
            if(seriesName === '額外信息'){
                // 前面一條線，後面一條線【具體樣式本身寫】
                htmlStr += '<div style="border: 1px solid #FFEB3B"></div>';
                htmlStr += 'XXXXX：' + value;
                htmlStr += '<div style="border: 1px solid #FFEB3B"></div>';
            }else{
                // 正常顯示的數據，走默認
                htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
                htmlStr += seriesName + '：' + value + 'W';
            }
            
            htmlStr += '</div>';
          }
          return htmlStr;
         }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '收入',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        },{
            name: '額外信息',
            data: ['今天賺大了', '今天賺大了', '今天賺大了', '今天賺大了', '今天賺大了', '今天賺大了', '今天賺大了'],
            type: 'line'
        }
    ]
};

測試地址，就用官方的就能夠

https://www.echartsjs.com/examples/editor.html?c=line-simple