最终效果
代码部分
<template>
<div>
<div id="charts" style="width:200px;height:200px"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
this.getInit()
},
methods: {
getInit() {
let option = {
series: [
{
type: 'liquidFill',
shape: 'circle',
radius: '80%',
center: ['50%', '50%'],
data: [0.6, 0.5, 0.4],
// 球体配置
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: '#3dfff6',
shadowBlur: 20,
shadowColor: '#12786f'
}
},
color: ['rgba(50, 255, 238, .6)', 'rgba(154, 255, 247, .6)'],
backgroundStyle: {
color: 'transparent',
},
label: {
show: true,
textStyle: {
color: '#12786f',
insideColor: '#12786f',
fontSize: 28
}
},
label: {
show: true,
textStyle: {
color: '#12786f',
insideColor: '#12786f',
fontSize: 40
},
formatter: params => {
return `${(params.value * 100).toFixed(0)}%\n {a|百分比}`
},
rich: {
a: {
fontSize: 24,
}
}
}
},
]
}
this.$echarts.init(document.getElementById('charts')).setOption(option);
}
}
}
</script>