Echarts.js 根据数值自定义radar雷达图拐点颜色

JavaScript08

Echarts.js 根据数值自定义radar雷达图拐点颜色,第1张

公司需求的时候,做了一种线形图,根据数值的大小,变换颜色。示例图如下:

产品经理问我,可以不可以做出这样的。设计图如下:

因为才使用这个插件一天,也不是很熟悉,感觉原理应该差不多。就答应了下来。

(自己挖坑 = =! )

等真正做的时候,发现事情并没有这么简单。。

后来的做法:把itemStyle提了出去,与data同级

我以为到这里已经结束了。

BUT。。。

当我把console.log换成return的时候。遍历数组,总是根据数组第一个值返回对应颜色,下面的不执行了,并把所有的拐点设置为第一个值符合的颜色。

简单来说,就是 雷达图的颜色只接受一个参数

既然一组数据只能用一种颜色,我在绘制这个数组的时候,先做个遍历:

一个图表 设置三层覆盖

预览地址

chart.js是一款基于HTML5 Canvas的图表插件,chart.js的功能非常强大,它不仅提供了常见的柱形图、折线图、饼状图,而且还提供了环形图、雷达图,样式外观多样,图表的色彩搭配也比较清新。chart.js还有一个特点就是图表在初始化的时候有弹性动...