echarts 饼图（加载进度条动画效果）

ECharts是一个非常流行的开源JavaScript图表库，它提供了丰富的可视化图表类型，包括饼图（Pie Chart）和进度条（Progress Bar）。饼图用于展示整体中的部分占比，而占比进度条则可以直观地展现数据随时间或某进程的动态变化。 在ECharts中，饼图通常用于展示各部分在整个整体中的相对大小，每个扇区的面积大小代表了对应的比例。饼图可以通过`series`配置项中的`type: 'pie'`来创建。你可以设置`data`属性来定义各个扇区的数据，以及`name`属性为标签显示每个部分的名称。 占比进度条（也称为环形图或 doughnut chart）则是饼图的一种变体，它内部有部分填充，外部是透明的，这样就可以清楚地看到背景，更像一个环形进度条。在ECharts中，你可以通过`type: 'ring'`来创建这种效果。 以下是一个简单的ECharts饼图和占比进度条的配置示例： ```javascript // 饼图示例 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); ```