Vue中使用echarts实现水球图

效果：

在线调试网址：https://gallery.echartsjs.com/editor.html?c=xry0tUfcBe

echarts使用说明请查看：Vue中使用echarts实现常用图表总结

控制台输入安装echarts以及水球图

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

vue main.js中注册

import echarts from 'echarts'  //引入echarts
import 'echarts-liquidfill'

组件中使用

<template>
	<div class="hygrometer" ref="hygrometer"></div>
</template>
let hygrometer = this.$echarts.init(this.$refs.hygrometer)
option = {
   
   
            series: [{
   
   
                type: 'liquidFill',
                radius: '100px',
                data: [