echart 畫出儀表盤 式進度條

pc 端儀表盤進度條：可以參考 element-ui中的組件

移動端的進度條：可以參考 京東 或者 vant 中的組件

但是沒有一個可以完全符合自己的項目需求，所以就只能自己做一個：

基於 Vue 框架 

<div id="myChart"></div> 

makeEcharet() {
      var myChart = this.$echarts.init(document.getElementById('myChart'))
      myChart.resize({
        width: 'auto',
        height: 240
      })
      // 指定圖表的配置項和數據
      var option = {
        angleAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          min: 0,
          max: 133.5,
          boundaryGap: ['0', '100'],
          startAngle: 225
        },
        radiusAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          data: ['a', 'b', 'c'],
          z: 10
        },
        polar: {
          radius: '80%'
        },
        series: [{
          type: 'bar',
          data: [0, 0, this.parseMsg.paper_log.rate],
          coordinateSystem: 'polar',
          barMaxWidth: 10,
          z: 2,
          roundCap: true,
          color: '#ee2e2e',
          barGap: '100%'
        }, {
          type: 'bar',
          data: [0, 0, 100],
          z: 0,
          silent: true,
          coordinateSystem: 'polar',
          barMaxWidth: 10,
          name: 'C',
          roundCap: true,
          color: '#eee',
          barGap: '-100%'
        }],
        tooltip: {
          show: false
        }
      }
      // 使用剛指定的配置項和數據顯示圖表。
      myChart.setOption(option)
      window.onresize = myChart.resize
    },

　　效果展示：可適應PC端和移動端

 

 

附帶ecahart 示例地址（因為好多人說現在官網沒有更多示例了）：https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all