echart图的tooltip的使用与修改_echart tooltip

formatter（字符串模板）

​ 模板变量有 {a}，{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等，在 trigger为’axis’的时候，会有多个系列的数据，此时可以通过{a0}，{a1},{a2}这种后面加索引的方式表示系列的索引，不同图表类型下的{a}，{b}，{c}，{d}含义不一样。

​ 其中变量{a}，{b}，{c}，{d}在不同的图表类型下代表数据含义为：

​ 1、折线（区域）图、柱状（条形）图、K线图：{a}（系列名称）,{b}（类目名）,{c}（数值）,{d}（无）

​ 2、散点图（气泡）图：{a}（系列名称），{b}（数据名称），{c}（数值数组），{d}（无）

​ 3、地图：{a}（系列名称），{b}（区域名称），{c}（合并数值），{d}（无）

​ 4、饼图、仪表盘、漏斗图：{a}（系列名称），{b}（数据项名称），{c}（数值），{d}（百分比）

echart图的tooltip
官方一般都是：

而我们通常是需要显示额外内容的，比如这样

其中Tooltip参考写法

option = {
    title: {
        text: '折线图堆叠'
    },
    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 += 'xxxx联盟广告：' + 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;
         }
    },
    legend: {
        data: ['邮件营销', '联盟广告']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
    ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75