echarts渐变色环状饼图

ECharts是一个强大的JavaScript图表库，它提供了丰富的图表类型，包括渐变色环状饼图（也称为环形图或 doughnut chart）。渐变色环状饼图用于展示数据在整体中的占比，颜色的变化可以帮助用户快速理解各个部分的相对大小。

在ECharts中创建渐变色环状饼图的基本步骤如下：

1. **初始化图表**：

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

2. **配置选项**：
- 设置环状图的基本参数，如标题、标签等。
- 定义渐变色环的样式，比如颜色数组和百分比数组。

   var option = {
     title: {
       text: '环状饼图'
     },
     series: [
       {
         type: 'pie',
         radius: '55%', // 控制圆环的半径
         center: ['50%', '60%'], // 圆心的位置
         data: [
           { value: 335, name: '部分A' },
           { value: 310, name: '部分B' },
           { value: 234, name: '部分C' },
           { value: 135, name: '部分D' },
         ],
         // 渐变色配置
         itemStyle: {
           emphasis: {
             shadowBlur: 10,
             shadowOffsetX: 0,
             shadowColor: 'rgba(0, 0, 0, 0.5)'
           },
           color: function (params) {
             return [
               { offset: 0, color: '#F00' }, // 颜色数组开始
               { offset: params.percent * 100, color: '#00F' } // 按百分比变化到下一个颜色
             ];
           }
         }
       }
     ]
   };

3. **渲染图表**：

   myChart.setOption(option);