技术学了但是不学以致用的话,其实也是会遗忘的,这次项目中使用了earchs图表,然后又去翻开earchs官网去看文档,总结一下这次的错误思路吧!
earchs官网:https://echarts.apache.org
背景:从一组数组中,去取执行进度< 序时进度的数据,然后将它对应的柱子标红。
我的思路:看了earchs的文档,我首先使用了itemStyle(这里是没有毛病的)
series: [{data: varietyEnforcementArr,type: 'bar',name: '执行进度',barMaxWidth: 40,itemStyle: {normal: {color: function(){for(let i=0;iif(varietyEnforcementArr[i]return '#c23531'}}},},},},{data: chronologicalProgressArr,type: 'line',name: '序时进度',},],
结果:整个柱形图的柱子全部变成了黑色。
原因:其实就是颜色不起作用,在这里的代码itemStyle是全局的。
data: [10,{itemStyle: {normal: {color:'#c23531',},},},20,30,40,50]
在data这里进行取值,将取到的value值再给它itemStyle赋予给它,从而进行局部的一个变化。
series: [{data: varietyEnforcementArr.map((value, index) => ({value,itemStyle: {normal: {color: value < chronologicalProgressArr[index] ? '#c23531' : '#2ec7c9',},},})),type: 'bar',name: '执行进度',barMaxWidth: 40,},{data: chronologicalProgressArr,type: 'line',name: '序时进度',},],
结果:是可行的,相应的柱子也变成了红色。