echart 画出仪表盘 式进度条

pc 端仪表盘进度条：可以参考 element-ui中的组件

移动端的进度条：可以参考 京东 或者 vant 中的组件

但是没有一个可以完全符合自己的项目需求，所以就只能自己做一个：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

基于 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