Echarts 关于formatter的使用

其实这个 formatter 很实用哈，可以自定义很多格式内容，尤其是提示和图例那边，还有柱状图的内容啥的

官网给的案例啊，看不懂哈哈哈

来点自己的小经验，几乎都可以实用啊，而且可以搭配rich自定义样式，

1、字符串模板

最简单的就是这样使用的，关于参数，这个官网给答案了，用啥取啥就行了，

 

tooltip: {
         trigger: 'item',
         formatter: '{b} : {d}%'
}

去过搭配rich使用，其实这个b和c就等于class 这样就可以随便加“%”或者其他单位啥的

formatter: [

   '{b|{b}}',

   '{c|{c}%}'].join('\n'),

rich: {

   b: {

     color: '#251717',

     fontSize: 14,

     fontWeight: "bold", 

     overflow : 'truncate',

   }, 

   c: {

     fontSize: 12,

     color: '#7F8389',

     padding: [5, 0, 0, 0],

     }, 

},

2. 回调函数

这个那个真好玩了哈哈哈哈，没想到这么强大

formatter: function (val) {
 //  建议先打印一下自己的val 看一下数据格式，然后可以根据自己的需要循环数据或者直接输出数据了，就比如我这个是图例里面的数据，因为数据太多了，不能自动换行，我加了一下每隔4字加一下换行
//还是可以搭配rich使用   

                                var charArr = val.name.split('');
                                var str = ''
                                for (let i = 0; i < charArr.length; i++) {
                                    str += charArr[i];
                                    if (i != 0 && i % 4 == 0) str += '\n'; //每隔4个字换行
                                }
                                return `{a|${str}}\n{c|${val.data.value}%}`;  
                            },

rich: {

   b: {

     color: '#251717',

     fontSize: 14,

     fontWeight: "bold", 

     overflow : 'truncate',

   }, 

   c: {

     fontSize: 12,

     color: '#7F8389',

     padding: [5, 0, 0, 0],

     }, 

},

还可以直接html标签，和原生js是的，哈哈哈哈梦回刚毕业整php的时候，但是emphasis 里面不支持直接写标签啊，可以用上面的方法

formatter: function(params) {  
                        let result = '';
                        let res = params.map(item => {  
                            return ` <span style="font-size: 12px;color:#7F8389;">${item.seriesName}</span> <span style="margin-left:5px;font-size: 12px;color:#333333;"> ${item.value}</span>`;  
                        });  
                        result = ` <span style="display:inline-block;font-size: 12px;color:#333333;padding-bottom:5px;">${params[0].name}</span> </br>`  + res.join('<br>')
                        return result;  
                    }, 

刚开始对echarts比较抵触，感觉好麻烦，但是其实官网给的很详细，可以多看看，可以自定义很多东西，静下心来慢慢来吧！！！