echarts 环形进度条

echarts 圆环进度条  

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var value = 90; //当前进度
var maxvalue = 100; //进度条最大值
//指定图标的配置项和数据
var option = {
  title: {
    text: '合格率',
    left: 'center'
    // bottom:'0'
  },
  //饼图中间显示文字
  graphic: {
    type: 'text',
    left: 'center',
    top: 'center',
    style: {
      text: value + '%', //文字内容
      // 	fill: "red",//文字颜色
      fontSize: 50, //文字字号
      fontWeight: '1000'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      //第一张圆环
      name: '生产率',
      type: 'pie',
      radius: ['50%', '80%'],
      center: ['50%', '50%'],
      // 隐藏指示线
      labelLine: { show: false },
      //隐藏圆环上文字
      label: {
        show: false
      },
      data: [
        //value当前进度 + 颜色
        {
          name: '合格',
          value: value,
          itemStyle: {
            normal: { color: '#dd5044' }
          }
        },
        {
          name: '不合格',
          value: maxvalue - value,
          itemStyle: {
            normal: { color: '#ededed' }
          }
        }
      ]
    }
  ]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);

option && myChart.setOption(option);

复制粘贴可以使用