echarts之formatter两种使用形式及蝴蝶图的绘制

龙井茶奇遇

已于 2022-02-14 21:36:21 修改

阅读量3.9k

点赞数

文章标签： echarts javascript

于 2021-10-17 23:14:05 首次发布

本文链接：https://blog.csdn.net/qq_42248955/article/details/120817993

版权

1、formatter两种使用形式

可以通过函数和字符串模板来自定义formatter

①通过函数动态创建节点

通过循环param的长度，不写死节点，这样有一个好处就是当点击了某一个legend取消了数据的展示的时候，tooltip提示框不至于报错。

formatter: function (params) {
    var result = "<div>" + params[0].axisValue + "</div>";
                params.forEach(item=>{
                  if(item.data!==null){
                    let item1 =
                    "<span style='display:inline-block;margin-right:5px;margin-bottom:2px;border-radius:10px;width:9px;height:9px;background-color:"+
                    item.color +
                    ";'></span>" 
                    item1 +=item.seriesName+"："+ __numFmt3(item.data,2)+'万元' + "<br/>"
                    result+=item1}
                })
                return result;
 },

②字符串模板的简易写法