最近做了很多大屏的工作,当然也用到了一些未曾用过的echarts属性,今天想记录一个echarts中很好用的属性rich。
rich使用
在echarts中rich主要是用于设置用户自定样式,我们可以在title,legend中使用rich, 例如下面这个效果就可以用rich实现
可以看出,图片中图表图例,后面展示的数字字体颜色是不同的,而且和名称之间是有间距的,使用rich实现设计效果。 const options = {
textStyle: {
rich: {
orgname: {
fontSize: 12,
width: 100,
},
count: {
fontSize: 12
verticalAlign: 'top',
align: 'center',
color: '#597FF3',
padding: [0, 0, 0, 15],
},
},
},
legend: {
formatter:(name) => {
let target;
const data = this.fmsDevice;
for (let i = 0; i < data.length; i++) {
if (data[i].orgname === name) {
target = `${data[i].count}辆`;
}
}
const arr = [
`{orgname|${name}}`,
`{count|${target}}`,
];
return arr.join('');
}
}
}
我们可以在formatter自定义样式名称,在textStyle中定义样式内容。当然我们在自定义title样式时也可以使用同样的方法。
使用rich设置axisLabel
例如下图效果
我们要设置axisLabel的样式。可以在axisLabel中设置formtter,添加自定义样式名称xAxis: [
{
axisLabel: {
color: '#747DA0',
fontSize: 12,
formatter: name => (`{name|${name}}`),
rich: {
name: {
color: '#fff',
shadowBlur: 3,
borderWidth: 1,
borderColor: 'green',
borderRadius: 2,
},
},
},
}
]
echarts中的rich属性为用户自定义样式提供了很大的便利。