本文将以下图(设计稿)为例,通过echarts来绘制不规则的圆形:
1. 内容分析,需要绘制:
闭环曲线和散点;
闭环曲线和散点的背景色渐变;
文字
- 通过echarts官网示例浏览,发现“象形柱图”中的下图示例跟我们想要的效果比较类似;
查看代码,发现“小山”的图形来源于“path://…”这样一个类svg图形的字符串。原来,自定义不规则图形可以通过svg的path路径来处理。
3. SVG-path的用法了解
注释:参考网址
D详解:blog.csdn.net/weixin_4544…
贝塞尔曲线:blog.csdn.net/xiaozhangcs…
- Echarts图表初始化
- 不规则曲线的svg-path设置与弯曲系数处理
注释:六边形的位置,照着下图大概估计一下就好了(左上角0 0, 右下角200 200)。如果需要更加奇形怪状的,可以先找个图形参考下位置!
- 最后,展示下代码运行的效果,如下图:
目测与设计稿相差不大,就讲到这里了!!!