vue中使用echarts-liquidfill实现水球图
<template>
<div style="width:400px;height:400px;" ref="hygrometer"></div>
</template>
<script>
export default {
data() {
},
mounted() {
this.drawLiquidfill()
},
methods: {
drawLiquidfill(){
// 基于准备好的dom，初始化echarts实例
let hygrometer = this.$echarts.init(this.$refs.hygrometer)
// 使用指定的配置项和数据显示图表
hygrometer.setOption({
tooltip: {
show: true
},
series: [{
name: '睡了',
type: 'liquidFill',
radius: '200px',
data: [0.6],
label: {
normal: {
color: '#27e5f1',
insideColor: '#fff',
textStyle: {
fontSize: 40,
fontWeight: 'bold',
}
}
},
color: [{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 1,
color: ['#6a7feb'], // 0% 处的颜色
}, {
offset: 0,
color: ['#27e5f1'], // 100% 处的颜色
}],
global: false // 缺省为 false
}],
outline: {
show: true,
borderDistance: 5,
itemStyle: {
borderColor: '#27e5f1',
borderWidth: 3
}
}
}]
})
}
}
}
}
</script>