技术学了但是不学以致用的话，其实也是会遗忘的，这次项目中使用了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;i<varietyEnforcementArr.length;i++){
if(varietyEnforcementArr[i]<chronologicalProgressArr[i]){
return '#c23531'
}
}
},
},
},
},
{
data: chronologicalProgressArr,
type: 'line',
name: '序时进度',
},
],
结果：整个柱形图的柱子全部变成了黑色。
原因：其实就是颜色不起作用，在这里的代码itemStyle是全局的。
当时还想了一些其他的方法
- 就是在组件那里取好执行进度< 序时进度的值，再将这个值传过来，这样子的数据是可行的，但是放到series这里就会出现原本一列的变成两列，这是不符合需求的。（X）
- 也百度了度娘，写了一种接近正确答案的方法，但是还差那么一点点转弯
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: '序时进度',
},
],
结果：是可行的，相应的柱子也变成了红色。