自定义Echarts中legend、tooltip等样式

在使用Echarts图表中不可避免的要定义legend、tooltip中的样式，这里以legend为例介绍一下通用的方法

先介绍一下用到的属性

legend.formatter

用来格式化图例文本，支持字符串模板和回调函数两种形式。

示例：

// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {return 'Legend ' + name;
}

legend. textStyle

图例的公用文本样式，在这可以设置legend的整体样式，有多种属性进行选择，可以在官方文档进行查看，这里不一一介绍了

重要介绍的是其子属性rich

legend.textStyle. rich

官方解释如下

在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。

例如：

label: {// 在文本中，可以对部分文本采用 rich 中定义样式。// 这里需要在文本中使用标记符号：// `{styleName|text content text content}` 标记样式名。// 注意，换行仍是使用 '\n'。formatter: ['{a|这段文本采用样式a}','{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'].join('\n'),rich: {a: {color: 'red',lineHeight: 10},b: {backgroundColor: {image: 'xxx/xxx.jpg'},height: 40},x: {fontSize: 18,fontFamily: 'Microsoft YaHei',borderColor: '#449933',borderRadius: 4},...}
}

官方解释已经很明了，接下来直接看实例

实例

这里是一个扇形图

直接上代码

option = {title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left',formatter: ['{ttt|这段文本采用样式a}','{b|这段文本采用样式b}','{这段用默认样式}','{x|这段用样式x}'].join('\n'),textStyle:{padding: [60, 0, 0, 0],rich: {ttt: {color: 'red',lineHeight: 20,},b: {backgroundColor: {image: 'xxx/xxx.jpg'},height: 40},x: {fontSize: 18,fontFamily: 'Microsoft YaHei',borderColor: '#449933',borderRadius: 4},}},},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};

效果图

参考文档

echarts官网