echarts 环形进度条

城永

已于 2022-06-09 18:34:17 修改

阅读量3.5k

点赞数 1

文章标签： echarts 前端 javascript

于 2022-06-02 11:52:17 首次发布

本文链接：https://blog.csdn.net/weixin_47133092/article/details/125098007

版权

本文介绍了如何使用Echarts库创建一个动态的圆环进度条。通过设置`pie`类型图表的配置项，实现了显示合格率的圆环图，其中圆环内部显示当前进度为90%，最大值为100%。代码示例详细展示了如何初始化Echarts实例、设置图表选项，以及动态更新数据的方法。

摘要由CSDN通过智能技术生成

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);