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