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
}
}
}]
}
