vue+Echarts 仪表盘进度条颜色和样式修改

**

1.vue+Echarts 仪表盘进度条颜色

**

mounted() {
var myChart = echarts.init(document.getElementById('eachers'))
myChart.setOption({
    series: [
        {
      splitNumber: 1,        
      type:'gauge',
      progress: {
          show: true,
          roundCap: true,
          width: 10,
      },
      axisLine: {
          lineStyle: {
              width: 10,
              color:[
                  [0.6,'rgba(248,90,73,1)'],
                  [1,'rgba(216,216,216,1)'],
                  ],
          }
         },
         pointer: {
             width:5,
             length: '65%',
             itemStyle: {
                 color:'#45474C',
             }
         },
         axisTick: {
             show: false,
         },
         splitLine: {
             length: 0,
             show: false,
         },
         anchor: {
             show:true,
             showAbove:true,
             size: 2,
             itemStyle: {
                 color: 'blue'
             },
         },
         detail: {
             fontSize: 1,
             show: false,
         },
         data: [
             {
                 value:60,
                 itemStyle: {
                     color:'#45474C'
                 }
             }
             ]
        }
      
    ]
})
}

2.Echarts 仪表盘样式修改

option = {
  series: [
    {
      type: 'gauge',
      // 仪表盘的外圈 渐变色
       axisLine: {
        lineStyle: {
          width: 130,
          color: [ // 这个是修改仪表盘的进度条颜色的
              [0.6, 'rgba(248, 90, 73, 1)'],
              [1, 'rgba(216, 216, 216, 1)'],
          ]
        }
      },
      axisTick: {
        distance: -112,
        show: true,        // 显示小刻度线
        length: 15,        // 刻度线长度
        lineStyle: {
          width: 5,       // 刻度线宽度
          color: 'rgba(255, 255, 255, 0.4)'   // 刻度线颜色
        }
      },
      splitLine: {       // 长刻度线
        distance: -112,
        length: 30,
        lineStyle: {
          width: 5,
          color: 'rgba(255, 255, 255, 1)'  
        }
      },
      // 刻度数值
      axisLabel: {
        distance: 140,    // 数值与刻度的距离
        color: 'rgba(255, 255, 255, 0.6)',
        fontSize: 40
      },
      // 中心圆
      anchor: {
        show: true,
        showAbove: true,
        size: 45,    // 中心圆的大小
        itemStyle: {
          borderWidth: 15,   //中心圆的边框大小
          borderColor:"#fff", // 边框颜色
          color:"#000"      // 中心圆颜色
        }
      },
      // 指针
      pointer: {
        width:15,
        length: '65%',
        // offsetCenter: [0, '5%'],  指针位置 默认圆中心
        itemStyle: {
          color: '#ADE1FF',
        }
      },
      title: {
        show: false
      },
      // 文字
      detail: {
        valueAnimation: true,
        fontSize: 50,
        formatter: '{value} %',
        color: '#3DFFDC',
        offsetCenter: [0, '70%']  // 文字的位置
      },
      data: [
        {
          value: 40
        }
      ]
    },
    {
      type: 'gauge',
      // center: ['50%', '60%'],  // 仪表盘位置(圆心坐标)
      // startAngle: 200,   // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
      // endAngle: -20,     // 仪表盘结束角度,默认 -45
      // min: 0,           // 最小的数据值,默认 0 。映射到 minAngle。
      // max: 60,         // 最大的数据值,默认 100 。映射到 maxAngle。
      // clockwise: true,        // 仪表盘刻度是否是顺时针增长,默认 true。
      // splitNumber: 10,        // 仪表盘刻度的分割段数,默认 10。
      itemStyle: {
        color: '#FD7347',
      },
      axisLine: {
        lineStyle: {
          width: 18,
          color: [
            [0.35, '#36F097'],
            [0.75, '#1ED6FF'],
            [1, '#5A3FFF']
          ],
          // shadowBlur: 20,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
          // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
        }
      },
      pointer: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      detail: {
        show: false
      },
      data: [
        {
          value: 20
        }
      ]
    }
  ]
};