echarts-liquidfill（水球图）

vue项目里使用echarts-liquidfill（水球图）步骤

echarts水球图并不在echarts常用图表里，是作为插件使用的，因此使用echarts水球图需要先安装echarts和水球图。

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

可以在vue main.js中注册，也可以在单独使用的组件里注册。

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

组件中使用（部分代码）：

	<template>
	  <div ref="hygrometer" :class="className">
	</template>

	props:{
		className: {
		   type: String,
		   default: 'chart'
		}
	},
	data() {
	  return {
	     chart: null
	  }
	},

	this.chart = echarts.init(this.$refs.hygrometer)
	this.chart.setOption({
	  series: [{
	     type: 'liquidFill',
	     name: 'Liquid Fill',
	     radius: '80%',
	     data: [{
	       name: 'score',
	       direction: 'right',
	       value: 0.6,
	       itemStyle: {
	         normal: {
	           color: '#34cfe9'
	         }
	       }
	     }],
	     label: {
	       nomal: {
	         formatter: function(param) {
	           return param.value * 100
	         },
	         textStyle: {
	           color: '#34cfe9',
	           insideColor: '#ffffff',
	           fontSize: 50
	         }
	       }
	     },
	     outline: { // 是否显示外圈
	       show: false
	     }
	  }]
	})

还有更多的功能可以参考以下地址：
vue使用水球图
参考地址：https://blog.youkuaiyun.com/focusmickey/article/details/109188774
ECharts绘制水球图
参考地址：https://blog.youkuaiyun.com/qq_22238629/article/details/80238868

如果使用过程中报错，应该是版本太高引起的，我这里使用的是2.0.6