echarts 里面的 rich(富文本)使用方法

先解释一下这里的rich 是干啥的, rich 的目的就是给文字加上一些自定义的样式, 或者通过背景加上一张图片

在 echarts 里面很有地方都可以使用 formatter 属性, 而使用 formatter 的地方大多都是可以使用 rich 属性的,

在这里需要注意的是 formatter 里面返回的 styleName 一定要和 rich 里面的相互对应, 否则不会生效

   label: {
            formatter: '{Sunny| 我是太阳}',
            rich: {
              Sunny: {
                color: '#fff',
                textBorderWidth: 1,
                fontSize: 22
              }
            }
          }

echarts 相关文档

ecahrts 拓展

1. 设置平均线 and 自定义线的位置

这里就用到了上面的 rich 富文本, rich 富文本理解之后真的是好用

自定义线的位置就是用利用 yAxis 属性

markLine: {
          symbol: 'none', // 取消线两端的 cap, 不展示箭头等形状
          data: [
            {
              type: 'average',
              name: '平均值',
              label: {
                show: 'true',
                position: 'insideEndTop',
                formatter: `{label|平均用时:}{value|{c}}{unit|min}`,
                rich: {
                  label: { fontSize: '10px', color: 'rgba(223, 229, 252, 1)' },
                  unit: { fontSize: '10px', color: 'rgba(223, 229, 252, 1)' },
                  value: {
                    color: 'rgba(25, 217, 251, 1)',
                    fontSize: '10px'
                  }
                }
              },
              lineStyle: {
                width: '0.5',
                type: 'soild',
                color: 'rgba(223, 229, 252, 1)'
              },

              emphasis: {
                lineStyle: {
                  width: '0.5',
                  type: 'soild',
                  color: 'rgba(223, 229, 252, 1)'
                }
              }
            },
            {
              // 自定义线的位置, 这里就是指定一个 y 轴坐标, 
              name: '建议用时',
              yAxis: 40,
              label: {
                show: 'true',
                position: 'insideEndBottom',
                formatter: `{label|建议用时:}{value|{c}}{unit|min}`,
                rich: {
                  label: { fontSize: '10px', color: 'rgba(223, 229, 252, 1)' },
                  unit: { fontSize: '10px', color: 'rgba(223, 229, 252, 1)' },
                  value: {
                    color: 'rgba(25, 217, 251, 1)',
                    fontSize: '10px'
                  }
                }
              },
              lineStyle: {
                width: '0.5',
                type: 'soild',
                color: 'rgba(223, 229, 252, 1)'
              },
              symbolSize: 0,
              emphasis: {
                lineStyle: {
                  width: '0.5',
                  type: 'soild',
                  color: 'rgba(223, 229, 252, 1)'
                }
              }
            }
          ]
        }

2.渐变色配置项

color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(55, 126, 246, 1)', // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(20, 201, 200, 1)', // 100% 处的颜色
            }],
            global: false,
          },