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方法
頁面完成效果如：
大功告成！！！！??
