结果演示：
<el-col style="height: 100%">
<div
style="
height: 100%;
padding-top: 50px;
padding-right: 25px;
"
>
<vab-chart
:init-options="initOptions"
:option="setOption"
theme="vab-echarts-theme"
style="height: 90%; width: 100%"
/>
</div>
// 设置背景颜色 70%以上绿色 30% - 70% 蓝色， 小于 30% 黄色
点击查看代码
// 设置背景颜色 70%以上绿色 30% - 70% 蓝色， 小于 30% 黄色
var color0;
if (result > 70) {
//绿色
color0 = '#8CCF76'
} else if (result <= 70 && result > 30) {
//蓝色
color0 = '#0000FF'
} else {
//黄色
color0 = '#FFFF00'
}
this.setOption = {
// 图表主标题
title: {
show: true,
text: '配送完成率',
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'center',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: '30%',
// itemGap设置主副标题纵向间隔，单位px，默认为10，
itemGap: 30,
//backgroundColor: "#fff",
// 主标题文本样式设置
textStyle: {
fontSize: 16,
fontWeight: '600',
color: '#000000',
},
// 副标题文本样式设置
},
// 提示框组件
tooltip: {
trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
textStyle: {
color: '#fff', // 文字颜色
},
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
// 水球图: {a}（系列名称），{b}（无），{c}（数值）
// 使用函数模板 传入的数据值 -> value: number|Array,
formatter: function (value) {
var a =
value.seriesName + ':' + (value.value * 100).toFixed(3) + 'KW'
console.log(a)
return a
},
},
series: [
{
clickable: false,
hoverAnimation: false,
silent: true,
type: 'liquidFill',
name: '', // 系列名称，用于tooltip的显示，legend 的图例筛选
radius: '95%', // 水球图的半径 // 水球图的半径
//center: ["52%", "55%"], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
// 水填充图的形状 circle 默认圆形 rect 圆角矩形 triangle 三角形
// diamond 菱形 pin 水滴状 arrow 箭头状 还可以是svg的path
shape: 'circle',
//amplitude: 0,//水面静止
phase: 100, // 波的相位弧度 不设置 默认自动
//waveAnimation: false,
waveLength: 175,
direction: 'right', // 波浪移动的速度 两个参数 left 从右往左 right 从左往右
outline: {
show: true,
borderDistance: 2, // 边框线与图表的距离 数字
itemStyle: {
opacity: 0.9, // 边框的透明度 默认为 1
borderWidth: 1, // 边框的宽度
shadowBlur: 0, // 边框的阴影范围 一旦设置了内外都有阴影
shadowColor: '#FFFFFF', // 边框的阴影颜色,
borderColor: '#FFFFFF', // 边框颜色
//shadowColor: "#fff", // 边框的阴影颜色,
},
},
backgroundStyle: {
color: '#ffffff', // 水球未到的背景颜色
},
// 图形的高亮样式
emphasis: {
itemStyle: {
opacity: 1, // 鼠标经过波浪颜色的透明度
},
},
// 图形上的文本标签
label: {
fontSize: 20,
fontWeight: 400,
color: 'green',
},
color: [
{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
//color:color0,
colorStops: [
{
offset: 1,
color: color0, // 0% 处的颜色
},
{
offset: 0,
color: 'red', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
],
data: [
{ name: '', value: result / 100 - 0.03 },
{ name: '', value: result / 100 - 0.02 },
{ name: '', value: result / 100 - 0.01 },
{ name: '', value: result / 100 },
],
label: {
normal: {
formatter:
'\n' + parseFloat(parseFloat(result).toFixed(2)) + '%',
textStyle: {
color: '#FFFFFF',
fontSize: 25,
},
insideColor: '#FFFFFF',
},
},
},
],
}