1.安装依赖
npm install echarts@5.2.0 --save-dev
npm install echarts-liquidfill@3.0.0 --save-dev
完整的例子:
<template>
<div id="demoChart"></div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
data(){
return {
demoChart:null
}
},
mounted(){
this.initChart();
},
methods:{
//初始化chart
initChart(){
let option = {
series: [{
type: 'liquidFill',
data: [0.6],
radius:'90%',
center: ['50%', '50%'],
outline: {
show: false, //是否显示外圈线
},
shape:"path://M505.668923 74.919385c-17.142154 19.282708-34.282338 44.994954-100.688738 149.962831-32.143754 53.5552-59.984738 102.829292-85.698954 152.103385-49.274092 96.407631-98.548185 227.089723-98.548185 310.636308 2.140554 72.847754 29.993354 134.973046 85.698954 186.387692C364.266338 925.426215 430.682585 951.138462 509.950031 951.138462s147.822277-25.712246 203.52-79.267446c57.844185-53.565046 85.698954-115.688369 83.5584-188.526277C797.026462 462.684554 503.518523 72.778831 505.668923 74.919385z", //svg路径
backgroundStyle:{
color:'#3A63CB'
},
itemStyle: {
opacity: 0.95, //透明度
color:'rgba(144, 194, 255, 0.6)',
// shadowBlur: 50,
// shadowColor: 'rgba(144, 194, 255, 0.6)'
},
emphasis: {
itemStyle: {
opacity: 0.8,
color:'rgba(144, 194, 255, 0.6)',
}
},
label: {
normal: {
//fontSize:80 //这里也可以设置
textStyle: {
fontSize: 12 //修改字体大小
}
}
}
}]
}
this.demoChart =
echarts.init(document.getElementById('demoChart'))
this.demoChart.setOption(option)
window.addEventListener('resize', () => {
this.demoChart.resize()
})
}
}
}
</script>
<style>
#demoChart{width:200px;height:200px}
</style>