如何实现动态水球图 --》 echars结合echarts-liquidfill实现

1）项目中作为项目依赖，安装到项目当中(注意必须要结合echars)

npm install echarts vue-echarts --save

npm install echarts-liquidfill --save

2）在需要使用水晶球的组件里引入liquidFill.js

import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入

3）在模板中加入挂载水晶球的DOM节点

 <div id="echarts" :style="{width: '340px', height: '220px',}"></div>

4）在方法methods中添加liquidFill调用方法，如

initWhater() {

var value = this.score

let myChart = this.echarts.init(document.getElementById('myChartWhater'))

var data = []

data.push(value)

data.push(value)

data.push(value)

myChart.setOption({

backgroundColor: 'white', //容器背景颜色

title: {

text: '',

textStyle: {

fontWeight: 'normal',

fontSize: 25,

color: 'rgb(97, 142, 205)'

}

},

series: [

{

type: 'liquidFill',

radius: '80%', //水球的半径

data: data,

backgroundStyle: {

color: 'white'

},

label: {

normal: {

formatter:

(value * 100).toFixed(0) +

'\n' +           //换行

'\n' +

this.healthyName,   //良好？差？优秀

textStyle: {

fontSize: 50 //字体大小

}

}

},

outline: {

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

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

itemStyle: {

borderColor: '#edf2f6', //边框的颜色

borderWidth: 1 //边框的宽度

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

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

}

},

color: [

'rgba(118,216,255,0.3)',

'rgba(0,206,255,0.5)',

'rgba(0,148,255,0.3)'

] //水波的颜色 对应的是data里面值

}

]

})

}

})

},

4）在mounted（）{}中调用 initWater方法
页面完成效果如：
大功告成！！！！