如何实现Echarts中的自定义图形绘制技巧？

本文共计1658个文字，预计阅读时间需要7分钟。

目录+前言

1.自定义图形的最后效果是这样的：

+ 2. 注册自定义图形 + 3. extendShape + 4. 使用echarts注册这三个图形 + 5. 使用自定义形状 + 总结前言在一个前端大屏项目中，有一个模块使用了自定义图形。以下是实现步骤：

目录

• 前言
• 1.自定义图形最后的效果是这样的：
• 2.注册自定义的图形
• 3.extendShape
• 4.使用echarts注册这三个图形
• 5.使用自定义的形状
• 总结

前言

在一个前端大屏项目中，有一个模块使用到了自定义的，由三个面组成的伪3D柱形图。在此处记录一下，方便后续自定义的时候参考一下。涉及到了zrender里面的一些方法，还特意去zrender看了些示例和文档。

1.自定义图形最后的效果是这样的：

图形由三个面组成，需要定义三个形状。用cubeleft,cubetop,cuberight来分别定义左侧面，顶部面以及右侧面。

2.注册自定义的图形

echarts官方文档处：Documentation - Apache ECharts

我们需要定义一个这样的类，然后再通过echarts来注册这个类，后续就可以通过类名来使用了。