【Echarts】3D双柱形图、堆叠柱形图实现

实现目标展示1、双柱图实现步骤内容分析代码实现

2、堆叠图实现步骤内容分析代码实现

实现目标展示

1、双柱图实现步骤

内容分析

此处采用的双柱样式，来源于链接: 点击此处跳转。 我对其进行了样式的修改，得到了如图所示的结果。这个图本身组成部分多样，一组双柱图（蓝绿柱子），由10个部分构成，解释其中一个（蓝色），一个由3个菱形，2个直边构成。3个菱形为上、中、底部，2个直边为背景虚化的柱子，和蓝颜色柱子，绿色柱子同理。

代码实现

2、堆叠图实现步骤

内容分析

实现一个这样的3D图，其实，是利用了5个部分进行拼接而成。3个底部的菱形，2个直边。其中，直边的图形利用两种颜色，深浅不一进行渲染，出现了类似于直边的效果。菱形也不是纯色的，而是采用了分段的染色，这些部分都会在接下来的代码之中标明。

代码实现

最后吐槽，我原本想实现的柱形图，是上方为平行四边形的类型的柱形图，但发现，Echarts自带的图形中，没有平行四边形，得自己画或者去官方那里放入图片进行代码的生成导出，于是放弃，使用这种网上查找的大多数人使用的菱形进行操作。

内容错误之处欢迎指正，共同进步！

如果内容有帮助，请点赞吱个声呗~

参考文章

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。