echart 半环渐变仪表盘

实现效果如图：

 op配置项代码：

let Chart = this.$echarts.init(document.getElementById('dashboard-1'));let option = {// backgroundColor: '#040d2e',series: [// 中间灰色轴线{type: 'gauge',radius: '150%', // 位置center: ['50%', '90%'],startAngle: 180,endAngle: 0,axisLine: {show: true,lineStyle: {// 轴线样式width: 20, // 宽度color: [[1, '#2d4e7d']], // 颜色},},axisTick: {// 刻度show: false,},splitLine: {// 分割线show: false,},axisLabel: {// 刻度标签show: false,},pointer: {// 仪表盘指针show: false,},detail: {// 仪表盘详情show: false,},},// 内侧刻度{type: 'gauge',radius: '145%', // 位置center: ['50%', '90%'],startAngle: 180,endAngle: 0,axisLine: {show: false,lineStyle: {// 轴线样式width: 10, // 宽度color: [[1, '#4ABEFE']], // 颜色},},axisTick: {// 刻度show: true,splitNumber: 2,length: 6,lineStyle: {width: 1,color: 'rgba(107, 205, 255, 0.2)'}},splitLine: {// 分割线show: false,},axisLabel: {// 刻度标签show: false,},pointer: {// 仪表盘指针show: false,},detail: {// 仪表盘详情show: false,},},// 刻度线背景色{type: 'gauge',radius: '115%', // 位置center: ['50%', '90%'],startAngle: 180,endAngle: 0,axisLine: {show: true,lineStyle: {// 轴线样式width: 14, // 宽度color: [[1, 'rgba(0,0,0,0.1)']], // 颜色},},axisTick: {// 刻度show: false,},splitLine: {// 分割线show: false,},axisLabel: {// 刻度标签show: false,},pointer: {// 仪表盘指针show: false,},detail: {// 仪表盘详情show: false,},},// 数据{type: 'gauge',radius: '150%', // 位置center: ['50%', '90%'],startAngle: 180,endAngle: 0,axisLine: {show: true,lineStyle: {// 轴线样式width: 20, // 宽度color: [[0.95, new echarts.graphic.LinearGradient(1, 0, 0, 1, [{offset: 0,color: "#00B0D6FF",},{offset: 0.5,color: "#17D0B4FF",},{offset: 1,color: "#00CCFFFF",},])]], // 颜色},},pointer: {// 仪表盘指针show: false,},axisTick: {// 刻度show: false,},splitLine: {// 分割线show: false,},axisLabel: {// 刻度标签show: false,},detail: {// 仪表盘详情show: false,},},],};Chart.clear();Chart.resize();Chart.setOption(option);