如何利用Echarts实现自定义图形的长尾词？

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

目录+前言

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

2.注册自定义图形

3.extendShape

4.使用echarts注册这三个图形

5.使用自定义的形状+总结

前言在一个前端大屏项目中，有一个模块使用了自定义图形。以下是实现步骤：

1. 自定义图形的最后效果如下：

2.注册自定义图形

3.使用extendShape方法

4.使用echarts注册这三个图形

5.利用自定义形状

总结

目录

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

前言

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

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

图形由三个面组成，需要定义三个形状。