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: [0.6], 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 } } }] } console.log('option', option) hygrometer.setOption(option)

数据动态显示只需要调用后台接口，改变data的值即可 如果想做成水滴形状可以增加shape属性，利用svg的path路径，如

let option = { series: [{ type: 'liquidFill', radius: '100px', data: [0.6], shape: 'path://M 100 120 a 140 140 0 1 0 198 0 c -26 -26 -44 -48 -44 -90 c -42 28 -128 64 -154 90"', 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 } } }] }