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: '20%'

},

series: [{

type: 'liquidFill',

radius: '95%',

waveAnimation: true,

data: [{

value: 0.5,

direction: 'left',

itemStyle: {

normal: {

color: '#1890ff'

}

}

}],

outline: {

// show: true , //是否显示轮廓 布尔值

borderDistance: 1, // 外部轮廓与图表的距离 数字

itemStyle: {

borderColor: '#1890ff', // 边框的颜色

borderWidth: 3 // 边框的宽度

// shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影

// shadowColor: '#000' //外部轮廓的阴影颜色

}

},

itemStyle: {

opacity: 0.9, // 波浪的透明度

shadowBlur: 0 // 波浪的阴影范围

},

backgroundStyle: {

color: '#fff' // 图表的背景颜色

},

label: { // 数据展示样式

show: true,

color: '#000',

insideColor: '#fff',

fontSize: 20,

fontWeight: 400,

align: 'center',

baseline: 'middle',

position: 'inside'

}

}]

})

}, 0)

}

在页面挂载时调用此方法即可