由于Echarts官网没有给出水波球案例,选择别的技术方案;使用的是v-charts, v-charts = Vue+ echarts
相关具体文档可以查看:v-charts
简单记录一下使用过程
效果如图:
导入echarts依赖
npm i v-charts echarts -S
在main.js中添加:
import 'echarts-liquidfill' // 水波球
import VCharts from 'v-charts'
Vue.use(VCharts)
在VUE页面中添加:
<div style="width: 100%;height: 100%;margin: auto">
<ve-liquidfill :data="chartData" :settings="serviceChartSettings" style="height:100%;width:100%;margin-top: auto"></ve-liquidfill>
</div>
添加配置项:
chartData: {
columns: ['name', 'percent'],
rows: [
{
name: '',
percent: 0.5 //球里的水也就是图中红色部分的占比;因为我要的是这个动态背景,所以直接写死了
}
]
},
serviceChartSettings: {
seriesMap: [
{
label: {
// show: false,
fontSize: 20,
color: '#ffffff',
insideColor: '#ffffff',
position: ['50%', '50%'],
formatter: function () {
return '17\n\n\n服务能力' //这个可以配置水波球里的显示内容
}
},
center: ['50%', '25%'], //调整位置
radius: '80%',
color: ['#F75169'],
waveAnimation: 10,
amplitude: 10, // 振幅
// 设置背景色
backgroundStyle: {
borderColor: 'transparent',
borderWidth: 1,
shadowColor: 'transparent',
shadowBlur: 20,
opacity: '100%',
// 环状里边的背景色
color: 'transparent'
},
outline: {
show: true,
borderDistance: 5,
itemStyle: {
borderColor: '#F75169',
borderWidth: 2
}
}
}
]
}