ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

比眉伴天荒 2022-11-19 04:28 636阅读 0赞

> 本文借助该链接做演示：[链接地址][Link 1]

*  **1.ECharts实现折线图变柱状图**

把series写的type改成“line”即可

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]

*  **2.ECharts实现立体柱状图、3D柱状图及属性**

①立体柱状图大概有三部分组成（主图、侧边图、顶部图）

如图：  
![在这里插入图片描述][20210414163026408.png]  
②主要属性一（控制顶部图的偏移量、大小、高度等）：

如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 1]

③主要属性二（控制主图的宽度、颜色、类型等）：

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 2]

④主要属性三（控制侧边图的宽度、颜色、类型等）：

如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 3]  
`注意`：

以下操作是保证侧边的高度可以与顶部图相贴合  
![在这里插入图片描述][20210414163739866.png]  
如图：  
![在这里插入图片描述][20210414163823119.png]

[Link 1]: https://www.makeapie.com/editor.html?c=xn_F_GyqL9
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]: /images/20221022/7986147091cc4400888826aea53c9997.png
[20210414163026408.png]: /images/20221022/009098f20c5b4bb6925a6275864cb059.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 1]: /images/20221022/5f8d72512cef4d3a87c7a83397664919.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 2]: /images/20221022/1fe8600227ad4051bd345888686fe6e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 3]: /images/20221022/27c31d8191104a20bb61236425abf9e9.png
[20210414163739866.png]: /images/20221022/df615cbc5112444a8dbae1104da17a48.png
[20210414163823119.png]: /images/20221022/f3d695dee07d4c3f9f61fdfe70e35695.png