vue 圆形 水波_vue中绘制水球图（水波纹增长图，波纹型百分比）

先上效果图

1.在项目中安装依赖

npm i echarts-liquidfill -s

2.在组件中引入需要的echarts水球图插件

import echartsLiquidfill from 'echarts-liquidfill'

3.创建一个容器安置图形(设置好宽高)

4.生成图表

initWave (ref) {

let _this = this

setTimeout(() => {

_this.chart = this.$echarts.init(_this.$refs[ref])

// 把配置和数据放这里

_this.chart.setOption({

title: {// 标题

text: '补贴资金剩余',

textStyle: {// 标题的样式

color: '#888', // 字体颜色

fontFamily: 'Microsoft YaHei', // 字体

fontSize: 14,

fontWeight: '400',

align: 'center', // 文字的水平方式

baseline: 'middle',

position: 'inside',

verticalAlign: 'middle'// 文字的垂直方式

},

left: 'center', // 定位

top: &#