1.效果图
2.使用
echarts里面没有这样的组件,需要参考echarts的第三方社区
社区地址:https://www.makeapie.cn/echarts_component/dataZoom_2.htm
下包
npm install echarts
npm install echarts-liquidFill
引入
import echarts from 'echarts'
import 'echarts-liquidFill'
代码
<div id="myEcharts"></div>
initEcharts () {
const myEcharts = echarts.init(document.querySelector('#myEcharts'))
console.log(document.querySelector('#myEcharts'))
const options = {
backgroundColor: '#FFF', // 设置背景颜色
series: [
{
type: 'liquidFill',
data: [0.6],
backgroundStyle: {
borderWidth: 0
},
itemStyle: {
color: '#25928c'
},
radius: '100%', // 设置水球半径,使用百分比
shape: 'circle', // 设置水球形状为圆形
outline: {
show: false // 不显示外边框
},
label: {
normal: {
fontSize: 100 // 设置水球内文字字体大小为 40
}
}
}
]
}
myEcharts.setOption(options)
}