1）項(xiàng)目中作為項(xiàng)目依賴，安裝到項(xiàng)目當(dāng)中(注意必須要結(jié)合echars)

npm?install?echarts?vue-echarts --save npm install echarts-liquidfill --save

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

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

3）在模板中加入掛載水晶球的DOM節(jié)點(diǎn)

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

4）在方法methods中添加liquidFill調(diào)用方法，如
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,? ?//良好？差？優(yōu)秀 textStyle: { fontSize: 50 //字體大小 } } }, outline: { show: true, //是否顯示輪廓 布爾值 borderDistance: 0, //外部輪廓與圖表的距離 數(shù)字 itemStyle: { borderColor: '#edf2f6', //邊框的顏色 borderWidth: 1 //邊框的寬度 //shadowBlur: 5 , //外部輪廓的陰影范圍 一旦設(shè)置了內(nèi)外都有陰影 //shadowColor: '#000' //外部輪廓的陰影顏色 } }, color: [ 'rgba(118,216,255,0.3)', 'rgba(0,206,255,0.5)', 'rgba(0,148,255,0.3)' ] //水波的顏色 對應(yīng)的是data里面值 } ] }) } }) }, 4）在mounted（）{}中調(diào)用 initWater方法
頁面完成效果如：
大功告成！！！！ ? ?

　　

轉(zhuǎn)載于:https://www.cnblogs.com/wangqi2019/p/10978804.html

總結(jié)

以上是生活随笔為你收集整理的如何实现动态水球图 --》 echars结合echarts-liquidfill实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。