前端 · 2023年11月4日 0

Echarts 中 rich 属性

rich 给开发者提供了很大的便利,可以定制出很丰富的样式:

title

  title: {
    left: 'center',
    text: '{a|这是标题}',
    subtext: '{a|这是副标题}',
    textStyle: {
      rich: {
        a: {
          color: 'red' // 000000(可以不加 # 号)、rgb、rgba
        }
      }
    },
    subtextStyle: {
      rich: {
        a: {
          color: 'blue',
          fontSize: 30,
          height: 100,
          backgroundColor: {
            image: weatherIcons.Showers
			// 这里可以是图片的 URL, 
			// 或者图片的 dataURI, 
			// 或者 HTMLImageElement 对象, 
			// 或者 HTMLCanvasElement 对象。
          }
        }
      }
    },
  }

参考:

  1. Documentation – Apache ECharts
  2. title中rich到底该怎么使用呢? · Issue #8388 · apache/echarts · GitHub