echarts饼图占比进度条

ECharts是一个非常流行的开源JavaScript图表库，它提供了丰富的可视化图表类型，包括饼图（Pie Chart）和进度条（Progress Bar）。饼图用于展示整体中的部分占比，而占比进度条则可以直观地展现数据随时间或某进程的动态变化。

在ECharts中，饼图通常用于展示各部分在整个整体中的相对大小，每个扇区的面积大小代表了对应的比例。饼图可以通过`series`配置项中的`type: 'pie'`来创建。你可以设置`data`属性来定义各个扇区的数据，以及`name`属性为标签显示每个部分的名称。

占比进度条（也称为环形图或 doughnut chart）则是饼图的一种变体，它内部有部分填充，外部是透明的，这样就可以清楚地看到背景，更像一个环形进度条。在ECharts中，你可以通过`type: 'ring'`来创建这种效果。

以下是一个简单的ECharts饼图和占比进度条的配置示例：

// 饼图示例
var pie = {
  type: 'pie',
  data: [
    { value: 335, name: '销售部' },
    { value: 310, name: '市场部' },
    { value: 234, name: '研发部' },
    { value: 135, name: '客服部' }
  ],
  series: [{
    name: '各部门占比',
    type: 'pie',
    radius: ['45%', '70%'],
    avoidLabelOverlap: false,
    label: {
      normal: {
        show: false,
        position: 'center'
      },
      emphasis: {
        show: true,
        textStyle: {
          fontSize: '16px',
          fontWeight: 'bold'
        }
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    }
  }]
};

// 占比进度条示例
var ring = {
  type: 'ring',
  center: ['50%', '60%'],
  radius: ['55%', '70%'],
  data: [
    { value: 335, name: '销售部' },
    { value: 310, name: '市场部' },
    { value: 234, name: '研发部' },
    { value: 135, name: '客服部' }
  ],
  series: [{
    type: 'ring',
    animationDurationUpdate: 1000,
    silent: true,
    color: ['#8ec07c', '#f60', '#3398db', '#f46f56'],
    label: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    }
  }]
};

// 使用ECharts实例化并渲染图表
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(pie);