Echarts 基础柱状图,实现柱体设定颜色且带有图例

摘要:柱状图的最初要求很简单,4个柱体高低显示不同分类的值,逐渐增加的要求有:自定义特定分类颜色、增加图例展示、点击图例控制分类显示和隐藏。记录下遇到的问题和一些不熟悉的属性的使用。

        大致的显示结果如上图,下面逐步分解下实现步骤;

1. 自定义特定分类颜色

        这个最简单,在官网示例有。只需要在series中传入数据时date配置itemStyle.color即可。例如:

series: [
  {
    type: 'bar',
    data: [120,
      {
        value: 200,
        itemStyle: {
          color: '#a90000'
        }
      }, 150, 160
    ]
  }
]
// 默认的调色盘如下,可以参考设置,保持与其他图表颜色对应
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

2. 增加图例legend展示

        首先,需要配置legend属性,将展示的细节逐个配置清楚,但这时图例并没有展示。此时需要注意:图例需要根据数据系列的名称来显示,确保每个数据系列都有设置名称(name 属性)。当我们确保series中每个系列都有name后,图例可以正常显示出来,依然需要处理一些细节避免显示如下:

  • 每个系列中显示多条数据,例如,"进行中"系列应该传入进行中的value,将其余使用null填充,其他系列类似;
  • 上述格式处理series中的data后大概率号有个问题,就是每个系列中的柱状图不居中,这就需要使用数据堆叠属性stack,同个类目轴上系列配置相同的stack值可以堆叠放置;

注:目前 stack 只支持堆叠于 'value' 和 'log' 类型的类目轴上,不支持 'time' 和 'category' 类型的类目轴。此处Y轴为value类型。

        综上处置后,展示效果基本待到预期


                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值