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 可以相对自由一点的修改样式。