ECharts 柱状图分段数据/切换数据 及异常处理

2020-09-02  本文已影响0人  圆脸黑猫警长

基本使用请读者自行阅读官网,有中文版非常方便。

柱状图切换数据的核心是在series属性的使用,平时使用这里只是一个数组[],只用放一个对象在里面{},但是在有些需求中,要求我们一个柱状图通过数据叠加的方式或者几个柱平行的方式显示数据,这时就需要在series中传入多个数据。

1.柱状图的分段效果

一个柱体由多个数据组合而成,分段显示不同的颜色 分段数据

series中的核心属性:
stack属性表示叠加,值是任意字符串,相同的字符串会进行叠加,series核心代码如下:

[{
  name: '全部',
  stack: '数据1',
  type: 'bar',
  barWidth: 40,
  data: [1, 2, 3, 4, 5],
  itemStyle: {
    color: '#222'
  }
},
{
  name: '全部',
  stack: '数据1',
  type: 'bar',
  barWidth: 40,
  data: [6, 7, 8, 9, 10],
  itemStyle: {
    color: '#f00'
  }
}]

两个Obj中stack: '数据1',是相同的,表示在一个柱体高度,由这两个数据之和决定,分别对应的值是:1+6 ,2+7 ...

2.柱状图的分段效果切换

有时我们希望可以用一个按钮控制显示分段效果/整体效果,那么区别其实就是series是一个对象还是多个对象。

3.数据切换异常处理

这里只说一个切换的问题,由多个切换成一个时候会发现多个的数据会重复出现,这里其实是一个默认行为,即会默认和之前的Option进行merge操作,这样就会留下之前的内容。

解决方法:

myChart.setOption(option,true)
在后面添加一个参数true,这个参数表示不进行merge操作。这样每次更改Option中的内容都会使用新的数据

上一篇下一篇

猜你喜欢

热点阅读