echarts 折线分段（值）显示不同颜色

向右看齐 2022-05-19 00:42 940阅读 0赞

原文出处：[https://blog.csdn.net/qq\_36128699/article/details/77878438 （建义阅读原文）][https_blog.csdn.net_qq_36128699_article_details_77878438]

**根据数据，折线在不同区域显示不同颜色  当大于10时显示绿色，小于10时显示红色 代码在echarts官例上改动**

1.  `option = {`
2.  `tooltip: {`
3.  `trigger: 'axis',`
4.  `axisPointer: {`
5.  `type: 'cross',`
6.  `crossStyle: {`
7.  `color: '#999'`
8.  `}`
9.  `}`
10. `},`
11.  
12. `legend: {`
13. `data:['蒸发量','降水量','平均温度']`
14. `},`
15. `xAxis: [`
16. `{`
17. `type: 'category',`
18. `data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],`
19. `}`
20. `],`
21. `yAxis: [`
22. `{`
23. `type: 'value',`
24. `},`
25. `{`
26. `type: 'value',`
27. `}`
28. `],`
29. `visualMap: {`
30. `show: false,`
31. `type: 'piecewise',`
32. `seriesIndex:2,//控制series 对应的区域`
33. `pieces: [{`
34. `gt: 10,`
35. `color: 'green'`
36. `}, {`
37. `gt: 0,`
38. `lte: 10,`
39. `color: 'red'`
40. `}]`
41. `},`
42. `series: [`
43. `{`
44. `name:'蒸发量',`
45. `type:'bar',`
46. `/// visualMap:false, 无效`
47. `data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]`
48. `},`
49. `{`
50. `name:'降水量',`
51. `type:'bar',`
52. `//visualMap:false,无效`
53. `data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]`
54. `},`
55. `{`
56. `name:'平均温度',`
57. `type:'line',`
58. `yAxisIndex: 1,`
59. `data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]`
60. `}`
61. `]`
62. `};`

上面代码显示如下 使用visualMap 属性  默认的是全部区域变色  下图我只是改变折线颜色所以使用seriesIndex:2(对应series属性)

![Center][]

根据需求 需要改变X Y 轴方向  但是折线颜色显示错误  如下图

![SouthEast][]

需要在visualMap 里面添加dimension 属性 代码如下

![SouthEast 1][]![Center 1][]

另一个根据阶段显示不同颜色

https://segmentfault.com/a/1190000005648860

[https_blog.csdn.net_qq_36128699_article_details_77878438]: https://blog.csdn.net/qq_36128699/article/details/77878438
[Center]: /images/20220519/98840a3146514edd89bc236a62642125.png
[SouthEast]: /images/20220519/48fd07877e0f4fed9dc0ed3e997797cd.png
[SouthEast 1]: https://img-blog.csdn.net/20170907111948345?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzYxMjg2OTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[Center 1]: /images/20220519/1a634fad24e3448ba21a891b9c99de41.png