echarts饼图自适应

要实现 Echarts 饼图的自适应，有几个关键点需要注意：

1. 容器大小：确保饼图所在的容器具有合适的大小并能够自适应页面的变化。可以使用 CSS 来控制容器的宽度和高度，或者使用响应式设计来自适应不同屏幕尺寸。

2. 图表实例：使用 Echarts 提供的 API 创建饼图的实例。

3. 配置项：在创建图表实例时，可以通过配置项来设置饼图的各种样式和数据。对于自适应，需要关注以下几个配置项：

- `grid`：可以通过设置 `grid` 的属性来调整图表在容器中的位置和大小。
- `series`：在 `series` 中设置饼图的半径和位置信息，可以使用百分比来实现自适应效果。
- `resize`：启用 `resize` 属性，使得图表在容器尺寸变化时能够自动重绘。

下面是一个简单的示例代码：

// 创建图表实例
var myChart = echarts.init(document.getElementById('chart-container'));

// 设置配置项
var option = {
  grid: {
    top: '10%',
    left: '10%',
    right: '10%',
    bottom: '10%',
  },
  series: [{
    type: 'pie',
    radius: ['50%', '70%'],
    center: ['50%', '50%'],
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 234, name: '联盟广告' },
      { value: 135, name: '视频广告' },
      { value: 1548, name: '搜索引擎' }
    ],
    label: {
      show: true,
      position: 'inside'
    },
    labelLine: {
      show: true
    },
    emphasis: {
      label: {
        show: true,
        fontSize: '20',
        fontWeight: 'bold'
      }
    }
  }],
  resize: true
};

// 设置图表配置项并渲染
myChart.setOption(option);

以上代码中，我创建了一个 ID 为 `chart-container` 的容器，并将其传给 `echarts.init()` 方法来创建图表实例。然后，通过设置 `grid` 和 `series` 的属性，来调整图表的位置、大小和数据。最后，启用 `resize` 属性，使得图表能够自适应容器的尺寸变化。

你可以根据具体需求，对以上示例代码进行修改和扩展。希望能帮到你！如果有更多问题，请继续提问。