earchs柱形图怎样使某个柱子变色

2024-01-18 21:41:32 浏览数 (2)

技术学了但是不学以致用的话,其实也是会遗忘的,这次项目中使用了earchs图表,然后又去翻开earchs官网去看文档,总结一下这次的错误思路吧!

背景:从一组数组中,去取执行进度< 序时进度的数据,然后将它对应的柱子标红。 我的思路:看了earchs的文档,我首先使用了itemStyle(这里是没有毛病的)

代码语言:javascript复制
 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)
  • 也百度了度娘,写了一种接近正确答案的方法,但是还差那么一点点转弯
代码语言:javascript复制
data: [10,{
	itemStyle: {
      normal: {
          color:'#c23531',
        },
      },
 },20,30,40,50]
改进后的正确思路:

在data这里进行取值,将取到的value值再给它itemStyle赋予给它,从而进行局部的一个变化。

代码语言:javascript复制
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: '序时进度',
      },
    ],

结果:是可行的,相应的柱子也变成了红色。

0 人点赞