echarts custom style formatter

echart offers many styles such as lineStyle such an object allows you to configure some properties, but if you can not give something to satisfy all the conditions of this attribute can be used formatter
formatter this property can receive a string or a method to customize returned style

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

1, params can get some of the properties of the icon associated parameters can be for our use
2, we can have a string templates return what you want because you can use a string template so we define the style of the time is relatively more freedom, and easier to implement some of the more specific needs of style.

There are many properties we can look at specific document formatter

For a few chestnuts
1, something in the style of a custom tooltip tooltip is displayed after the mouse to move up
here we use a string template set up to span style

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, the bar graph display data label attribute column

 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 property is a property array of the column, where I joined the column width judgment only when it reaches a certain size display array or string template can also return to the digital display does add some style

Gotta formatter can use relatively little free time to modify the style.