巧用echarts中的rich属性自定义样式

最近做了很多大屏的工作，当然也用到了一些未曾用过的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属性为用户自定义样式提供了很大的便利。