echarts柱状堆叠图实现示例(图例和x轴都是动态的)

问题描述：

echarts柱状堆叠图，是很常用的图表，官网的例子很简单 。图例（legend），x轴（xAxis）都是写死的。但是一般实际应用中都是 动态的。下面就举个例子，实现图例和x轴都是动态的 柱状堆叠图。

echarts 官网柱状 堆叠图 示例

 实现思路及步骤：

思路：通过官网的例子，我们能知道

1.  xAxis 是一个数组
2.  series 是一个数组对象  其中name需要 对应着的是图例，有几个图例 series里就应该有几个项。需要把你的数据处理成 和例子数据结构一样的。
3. stack 这个属性 很重要 Documentation – Apache ECharts stack API，官网的例子里 是三个柱状图并列。stack 相同的就会 堆叠在一起（stack 有几个他就会有几排并列，官网例子里有Ad,Search Engine他就有两个堆叠，去掉没有 stack属性的就能看到了）。

知道了这些就 很清晰了。

• 第一步就是 遍历数据 ，找出 x轴的数据（切记要去重）
• 遍历数据 生成 series

其实就是对数据的处理。

示例：

把这样的数据 做成堆叠图

代码：

把该代码复制到 官网例子里 就能看到效果 。

总结

到此这篇关于echarts柱状堆叠图的文章就介绍到这了,更多相关echarts柱状堆叠图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！