echart5.0实现一个进度仪表

echart5.0实现一个进度仪表

推荐一个超级炫酷的，拥有各式各样图表的网址 www.makeapie.com/explore.htm…

效果图：

代码实现：

其实可以直接复制人家的代码。

配置项如下：

var color = ' '
export default{
  title: {
    text: '',  
    // subtext:"完成比例",
    x:"center",
    y:"center",
    textStyle: {
      fontWeight: 'normal',
      color: '#333',
      fontSize: '32'
    },
    subtextStyle:{
      color:"#797979",
      fontSize:"12",
    },
  },
  color: ["#5AD8A6",'#687795'], 
  legend: {
    show: false,
    itemGap: 12,
    data: ['01', '02']
  },
  
  series: [{
    name: 'Line 1',
    type: 'pie',
    clockWise: true,
    radius: ['45%', '70%'],
    itemStyle: {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            }
        }
    },
    hoverAnimation: false, 
    data: [
      // {
      //   value: 80,
      //   name: '01',
      // }, 
      // {
      //   name: '02',
      //   value: 20
      // }
    ]
  }]
}

html结构：

<div class="echart" style="height: 100%" option="pieOption1" name="chart5"></div>

引入配置项并配置：

import pieOption1 from './echarts/pie1'
document.getElementById("echart").setOption(pieOption1)