echarts 自定义样式 formatter

echart 提供了 很多样式 比如lineStyle 这种对象可以让你配置相关的一些属性，但是如果给的东西不能满足所有的条件可以使用formatter 这个属性
formatter 该属性可以接收一个字符串或者一个方法 用来自定义返回的样式

formatter: function (params) {
	return ' '
}
// ES6写法 为了使用全局变量this
formatter: (params) =>{
	return ' '
}

1、params 中可以得到该图标一些属性相关的参数 可以供我们使用
2、我们可以已字符串模板的形式返回想要的东西 因为可以使用字符串模板 所以我们定义样式的时候就相对自由多了， 也更容易 实现一些比较特殊的需求 样式。

很多属性里面都有formatter 具体大家可以看看文档

举几栗子
1、自定义tooltip中的样式 tooltip就是鼠标移动上去之后 显示的东西
这里我们使用字符串模板 在给span设置了样式

tooltip: {
                    trigger: 'axis',
                    
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    },
                    formatter: function(params) {
                        var res = params[0].name
                        for (var i = 0, l = params.length; i < l; i++) {
                            const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+colorArr[i]+';"></span>'
                             const value = params[i].seriesType == 'bar' || type==0 ? params[i].value:  params[i].value+'%'
                            res +=  '<br/>'+marker + params[i].seriesName + ' : ' +value;//鼠标悬浮显示的字符串内容
                        }
                        return res;
                    }
                },

2、柱形图 柱子上显示数据label 属性

 label: {
            normal: {
                color: '#fff',
                show: true,
                position: 'insideBottom',
                fontWeight: 'bold',
                fontSize: 14,
                formatter:(params)=>{
                    // console.log(params)
                    if(this.barWidth < 36) {
                        return ''
                    } else {
                        return params.value
                    }
                   
                }

            }
        },

label 属性是显示柱子上数组的属性， 我这里加入了判断 只有柱子宽度达到一定大小的时候才显示数组 否则不显示 也可以返回字符串模板 给数字加一些样式

总得来时使用formatter 可以相对自由一点的修改样式。