vue中使用echarts-liquidfill实现水球图

先看效果图

echarts-liquidfill查看官方文档

安装

npm install echarts --save
npm install echarts-liquidfill --save

vue main.js 中注册

import echarts from 'echarts'  //引入echarts
import '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>

附： v-charts 中也有水球图https://v-charts.js.org/#/liquidfill