echarts:实现水球图

1、安装插件

npm install echarts --save

npm install echarts-liquidfill --save

2、main.js中引入

import * as echarts from 'echarts' 

import 'echarts-liquidfill'

3、组件初始化

option: {
					series: [{
						type: 'liquidFill',
						radius: '200px',
						data: [0.6],
						shape: 'circle',
						label: {
							normal: {
								color: '#fff',
								insideColor: 'transparent',
								textStyle: {
									fontSize: 30,
									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: 'rgba(67,209,100,1)',
								borderWidth: 0
							}
						}
					}]
				}

参考：ECharts之水球图_半度℃温热-CSDN博客_水球图