Echarts中legend图例的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,
             },
          },
       },
    }
]