ECharts自定义提示框浮层内容

因为提示框内容支持字符串模板和回调函数两种形式

字符串模板

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等等，
但是trigger属性为axis的时候它数据条就很多了，就可以用{a0}，{a1}，{a2}这样子去拿数据跟数组下标一样（官网有详细示例）

示例：
在`option`中的`tooltip`里边写入
formatter: '{b0}: {c0}<br />{b1}: {c1}'

回调函数

主要讲的是回调函数
很多时候提示内容里边数值为0的又不想它显示出来占地方

那就可以用到回调函数

//params 是鼠标位置的信息数值会跟随鼠标移动而变化
formatter: function (params) {
  console.log(params);
}

可以拿到想要的数据进行处理


比如我想让那些数据为0的不提示出来

示例：
在`option`中的`tooltip`里边写入
formatter: function (params) {
    let data = ''
    data += `<sapn>${params[0].axisValue}<br>`
    params.forEach(item => {
        if (item.data != 0) {
            data += `项目名：${item.seriesName} &nbsp;&nbsp;&nbsp; ${item.data}条<br>`;
        }
    });
    data += '</sapn>'
    return data;
},

修改前



修改后

还可以为其写一些样式啊什么的，看自己则么来吧!

就分享到这里了~~