需要下载"echarts-liquidfill": "^2.0.6",
这个插件,在main.js中导入插件
import 'echarts-liquidfill'
以下代码为配置项,注释的地方是红色虚线,用来标识标准值在水波球的位置
let barEcharts = this.$echarts.init(this.$refs.middleEchart)
const data = [13.22/16.76, 13.22/16.76]
let max = 96.1
let option = {
title:{
text:'90%',
textStyle:{
fontSize: 80,
fontFamily: 'Microsoft Yahei',
fontWeight: 'normal',
color: '#fff',
fontWeight:'bold',
},
x:'center',
y:'35%'
},
graphic: [{
type: 'group',
left: 'center',
top: '60%',
children: [{
type: 'text',
z: 100,
left: '10',
top: 'middle',
style: {
fill: '#fff',
text: '塌陷土地治理率',
font: '43px Microsoft YaHei'
}
}]
}],
// x轴
xAxis: {
show: false // 不显示
},
// y轴
yAxis: {
axisLine: {
show: false
},
axisLabel: {
fontSize: 18,
color: "#d8bb93"
}
},
grid: {
top: '15%',
right: '20%',
bottom: '15%',
left: '20%'
},
series:[
{
type: 'liquidFill',
color: [{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 1,
color: 'rgba(0, 108, 154, 1)'
}, {
offset: 0.5,
color: 'rgba(0, 155, 219, .5)'
}, {
offset: 0,
color: 'rgba(0, 155, 219, 0)'
}],
globalCoord: false
}],
radius: '78%', // 半径大小
center: ['50%', '50%'], // 布局位置
data, // 水球波纹值
backgroundStyle: {
color: '#1D1C1B' //背景颜色
},
outline: { // 轮廓设置
show: true,
borderDistance: 5, // 轮廓间距
itemStyle: {
// borderColor: '#ECE2BD', // 轮廓颜色
borderColor: '#006D9B', // 轮廓颜色
borderWidth: 4, // 轮廓大小
shadowBlur: 'none' // 轮廓阴影
}
},
label: {
show: false
}
},
// {
// type: 'line', // 折线图
// markLine: {
// label: {
// show: true,
// position: 'right',
// fontSize: 16,
// // color: 'red',
// formatter: function (params) {
// // params = "考核指标:\n" + max*100 + "%";
// params = max * 100 + "%";
// return params
// }
// },
// emphasis: {
// label: {
// show: true,
// position: 'right',
// fontSize: 16,
// // color: 'red',
// formatter: function (params) {
// params = "考核\n指标\n" + max * 100 + "%";
// return params
// }
// },
// lineStyle: { // 标线样式
// width: 2,
// color: 'red',
// type: 'dashed'
// },
// },
// // silent: true, // 不触发鼠标事件
// symbol: 'none', // 标线两端样式
// lineStyle: { // 标线样式
// width: 2,
// color: 'red',
// type: 'dashed'
// },
// data: [
// { // 标线数据
// // lineStyle: {
// // color: '#d8bb93'
// // },
// yAxis: max
// // yAxis: this.echart1Data.ptcfkTarget && this.echart1Data.ptcfkTarget !== '' ?
// // this.echart1Data.ptcfkTarget / 100 : '-', y 轴
// }
// ]
// }
// }
]
}
barEcharts.setOption(option)