Echarts中关于水波球的使用

由于我是在vue.js中使用的echarts, 所以第一步依旧是下包, 不过在echarts官网中并没有水波图的直接展示,方便大家使用, 我挂上水波图的源仓库地址 www.npmjs.com/package/ech…,
github.com/ecomfe/echa…, 但由于是纯英文 释义, 使用起来不是太方便,

(原先是有效果图的, 不过不知道为什么不显示了) 所以放上我自己使用过的

然后就是下包了, npm i echarts echarts-liquidfill

下完包之后, 在组件中全部引用 import * as echarts from echarts, 并在main.js中引入 import 'echarts-liquidfill'

接下来就可以使用echarts进行渲染了, 创建一个容器装载图表

定义常量量获取到这个盒子

定义球的样式, 对应改变样式的已注释

最后调用echarts的方法使用这个样式

这就是我自己水波图的使用流程了,更详细的可以去官方参考