PHP前端开发

Echarts 折线图文本如何设置上下不同颜色?

百变鹏仔 2个月前 (11-26) #echarts
文章标签 不同颜色

echarts 折行文本上下颜色如何调整

问题:

如何使用 echarts 为折行文本上下设置不同的样式?

答案:

echarts 中折行文本上下样式可以通过修改 rich 样式对象来实现。

以下示例代码演示了如何设置折行文本上半部分为红色,下半部分为蓝色:

option = {  rich: {    line: {      color: '#ff0000',      align: 'center',      fontSize: 12,    },    desc: {      color: '#0000ff',      align: 'center',      fontSize: 12,    },  },  series: [    {      type: 'line',      label: {        formatter: '{a}{b}',        rich: {          a: {            lineHeight: 10,            height: 20,          },          b: {            lineHeight: 10,          },        },      },      data: [        { value: 10, label: 'line 1desc 1' },        { value: 20, label: 'line 2desc 2' },        { value: 30, label: 'line 3desc 3' },      ],    },  ],};

效果如下:

[图片]