前言：
我们平时总会看见各种炫酷的效果，比如这样的:
没做过的同学一定会觉得很难，也没有什么好的思路。如果你是一名前端工程师，那么我今天将用10分钟带你揭开它的神秘面纱。10分钟这并不是夸大其说，因为echarts官方介绍echarts入门只需要5分钟，还剩下5分钟我将带你了解SVG。不多不少，10分钟刚刚好。
一：找到需要做出效果的SVG
这个我们可以去百度搜索阿里巴巴矢量图标官网
进入官网进行选择和下载，都是免费的哦。
先建一个html文件，大家可以先观察一下SVG图片的相关属性，特别是d属性，待会儿我们会用到哦。
双击html文件，可以得到SVG的效果如下：
二：echarts常规操作
我们接下来就是echarts常规操作。我这里引用的是波纹流动效果：引用的是# echarts-liquidfill 有很多例子，大家可以自己试试。
直接粘echarts代码
我们再来看数据配置项，把label的文字干掉，得到如下效果：
这里的shape里面其实就是图形的数据，我们需要把SVG里面的数据替换到这里。
三：把SVG数组组装echarts配置项和数据
至此，SVG就已经和echarts完美结合在一起了。
当然你还可以根据自己的品味调调色、加点其他效果和细节。
总结：本文重点在于理解SVG是如何和Echarts结合的，帮助很多没有做过的同学打开思维，了解SVG的相关属性，把SVG数组组装echarts配置项和数据。当然这篇文章只是带大家入门，激发大家学习的兴趣，给大家一个做动态图的思路，之后大家可以深入去了解SVG和echarts。还没体验过的同学，赶快打开电脑一起试试吧
本文参考文章： juejin.cn/post/705213…
