Customize styles using the Rich property in Echarts

Recently did a lot of big screen work, of course, also used some never used Echarts attribute, today I want to record a very useful attribute in Echarts rich.

Rich use

In Echarts, rich is mainly used to set custom styles, we can use rich in title, legend, for example, the following effect can be implemented with 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}A `; } } const arr = [ `{orgname|${name}}`,
               `{count|${target}} `];return arr.join(' '); }}}Copy the code

We can customize the style name in formatter and the style content in textStyle. Of course, we can use the same method when we customize the title style.

Use Rich to set the axisLabel

For example:

xAxis: [
    {
       axisLabel: {
          color: '#747DA0',
          fontSize: 12,
          formatter: name => (`{name|${name}}`),
          rich: {
             name: {
                color: '#fff',
                shadowBlur: 3,
                borderWidth: 1,
                borderColor: 'green',
                borderRadius: 2,
             },
          },
       },
    }
]
Copy the code

The Rich property in Echarts makes it easy to customize styles.