vue使用echart仪表（echart 5.0以上版本）

场景：

实现一个展示xx率的仪表，页面一刷新就能够从0增长到指定数值。 注：这个特效5.0以后的版本才支持

效果图

代码实现：

配置项：

import echarts from 'echarts'
export default {
  series: [
    {
      startAngle: 180,
      endAngle: 0,
      name: '选项二',
      type: 'gauge',
      axisLabel: {
        show:false,
      },
      title:{
        show:true,
        offsetCenter: [0, '21%'],
        fontSize:14,
        fontWeight:'normal',
        color: 'rgba(0,0,0,0.35)'
      },
      detail: {
        offsetCenter: [0, '-13%'],
        formatter: function (value) {
          return value.toFixed(0)+'%';
        },
        textStyle: {
          fontSize:22,
          fontWeight:'normal',
          color: '#333'
        },
      },
      //指针
      pointer:{
        show:false
      },
      axisLine: {
          lineStyle: {
              width: 10,
              color: [[1, '#E6EBF8']]
          }
      },
      //刻度
      // axisLabel:{
      //   formatter: function (value) {
      //     if(value==0||value==100){
      //       return value;
      //     }
      //   }
      // },
      progress:{
        show:true,
        itemStyle:{
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#5B8FF9' // 0% 处的颜色
            }, {
                offset: 1, color: '#B0D0FF' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      },
      
      itemStyle: {
        color: '#4dc445'
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: []
    },
  ]
};