最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ECharts中当是二维数组的堆积图中的图例颜色和x轴中数据颜色保持一致

工作和技术 crifan 2701浏览 0评论

折腾:

【已解决】ReactJS中如何画左右叠加图的ECharts图表

已经写了基本的水平方向的柱状堆叠图:

代码:

   let curEchartsOption = {
      tooltip : {
        trigger: ‘axis’,
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
          type : ‘shadow’        // 默认为直线,可选为:’line’ | ‘shadow’
        }
      },
      legend: {
        show: true,
        x: ‘left’,
        y: ‘bottom’,
        data: [
          ‘DCC’,
          ‘电话’,
          ‘进店’,
          ‘外拓’,
          ‘二级网点’,
          ‘缺口’
        ]
      },
      grid: {
        left: ‘3%’,
        right: ‘4%’,
        bottom: ‘3%’,
        containLabel: false
      },
      xAxis:  {
        type: ‘value’,
        // data: [49, 4, 12, 26, 25, 0]
      },
      yAxis: {
        show: false,
        type: ‘category’,
        //data: [‘周一’,’周二’,’周三’,’周四’,’周五’,’周六’,’周日’]
        // data: [‘周一’]
        data: []
      },
      series:
      [
        {
          name: ‘DCC’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          data: [49]
        },
        {
          name: ‘电话’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          data: [4]
        },
        {
          name: ‘进店’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          data: [12]
        },
        {
          name: ‘外拓’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          data: [26]
        },
        {
          name: ‘二级网点’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          data: [25]
        },
        {
          name: ‘缺口’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          data: [0]
        }
      ]
    };

效果:

注意到:

DCC的legend图例说明的颜色,和x轴上堆叠图中数据的颜色,都是深红色,现在想要设置为:

export const ValueColor = {
  RED         : ‘rgb(245, 105, 84)’,
  GRAY        : ‘rgb(210, 214, 222)’,
  GREEN       : ‘rgb(0, 166, 90)’,
  YELLOW      : ‘rgb(243, 156, 18)’,
  LIGHT_BLUE  : ‘rgb(0, 192, 239)’,
  DARK_BLUE   : ‘rgb(60, 141, 188)’
};

深蓝色:DARK_BLUE

所以去参考官网:

http://echarts.baidu.com/option.html#series-bar.data.itemStyle.normal.color

去把:

data: [49]

改为:

          data: [
            {
              value: 49,
              label: {},
              itemStyle: {
                normal: {
                  color: ValueColor.DARK_BLUE                  
                }
              }
            }
          ]

的确是可以改变数据中DCC的颜色了:

但是legend图例中却还是之前的深红色。

所以继续去找配置,找到了:

http://echarts.baidu.com/option.html#legend.data.textStyle

而对于textStyle中有什么属性,则是参考:

http://echarts.baidu.com/option.html#legend.textStyle.color

看到了其下有color等属性:

所以去设置:

把legend中data中’DCC’改为:

          {
            name: ‘DCC’,
            textStyle: {
              color: ValueColor.DARK_BLUE
            }
          },

结果是:

问题依旧,图例中颜色还没变。

然后自己研究,感觉到,估计是:

此处legend中的图例的颜色,是随着series中的data的颜色一起变化的,

而series中的data颜色,如果是一位数组,则是直接就生效了,可以变过来的,但是此处是二维数组,而上面的设置DCC的data颜色,是针对于自己单独一个数字制定颜色的,而不是整个一位数组的颜色。

而series中单个的DCC所在的一位数组的颜色,通过之前无意间发现的:

http://echarts.baidu.com/option.html#series-bar.itemStyle.normal.color

即通过series-bar.itemStyle.normal.color可以去设置。

所以去改为:

      series:
      [
        {
          name: ‘DCC’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          itemStyle: {
            normal: {
              color: ValueColor.DARK_BLUE                  
            }
          },
          data: [
            49
            // {
            //   value: 49,
            //   label: {},
            //   itemStyle: {
            //     normal: {
            //       color: ValueColor.DARK_BLUE                  
            //     }
            //   }
            // }
          ]
        },

 

然后就生效了:

图例的颜色和数据的颜色一致了:

【总结】

最后,附上全部的配置:

    let curEchartsOption = {
      tooltip : {
        trigger: ‘axis’,
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
          type : ‘shadow’        // 默认为直线,可选为:’line’ | ‘shadow’
        }
      },
      legend: {
        show: true,
        x: ‘left’,
        y: ‘bottom’,
        data: [
          ‘DCC’,
          // {
          //   name: ‘DCC’,
          //   textStyle: {
          //     color: ValueColor.DARK_BLUE
          //   }
          // },
          ‘电话’,
          ‘进店’,
          ‘外拓’,
          ‘二级网点’,
          ‘缺口’
        ]
      },
      grid: {
        left: ‘3%’,
        right: ‘4%’,
        bottom: ‘3%’,
        containLabel: false
      },
      xAxis:  {
        type: ‘value’,
        // data: [49, 4, 12, 26, 25, 0]
      },
      yAxis: {
        show: false,
        type: ‘category’,
        //data: [‘周一’,’周二’,’周三’,’周四’,’周五’,’周六’,’周日’]
        // data: [‘周一’]
        data: []
      },
      series:
      [
        {
          name: ‘DCC’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          itemStyle: {
            normal: {
              color: ValueColor.DARK_BLUE                  
            }
          },
          data: [
            49
            // {
            //   value: 49,
            //   label: {},
            //   itemStyle: {
            //     normal: {
            //       color: ValueColor.DARK_BLUE                  
            //     }
            //   }
            // }
          ]
        },
        {
          name: ‘电话’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          data: [4]
        },
        {
          name: ‘进店’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          data: [12]
        },
        {
          name: ‘外拓’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          data: [26]
        },
        {
          name: ‘二级网点’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          data: [25]
        },
        {
          name: ‘缺口’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: false,
              position: ‘insideRight’
            }
          },
          data: [0]
        }
      ]
    };

供参考。

转载请注明:在路上 » 【已解决】ECharts中当是二维数组的堆积图中的图例颜色和x轴中数据颜色保持一致

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
87 queries in 0.181 seconds, using 22.19MB memory