ECharts中让一条线上不同区间显示不同颜色

编者&＃xff1a;李国帅

qq&＃xff1a;9611153 微信lgs9611153

时间&＃xff1a;2021-7-20

问题描述及概念:

Apache ECharts是一个基于 Javascript 的开源可视化图表库

https://echarts.apache.org/zh/index.html

可以使用visualMap分段映射的方式分段显示不同颜色&＃xff0c;然后隐藏visualMap。

使用伪造series的方法添加不同图例。然后在右侧隐藏toolbox&＃xff0c;添加一个注解。如下图所示。

申请颜色

const colors &＃61; [

    "#93CE07",

    "#FBDB0F",

    "#FC7D02",

    "#FD0100",

    "#AA069F",

    "#AC3B2A",

    "#FD0100",

    "#FBDB0F",

    "#FC7D02",

    "#AA069F",

    "#999",

  ];

使用visualMap为不同线段添加颜色颜色

设置图例

在series: (function () {中添加一个假的不存在的数据序列