绘制饼图及环形图（饼图和环形图示）

Question

img https://img-mid.csdnimg.cn/release/static/image/mid/ask/e9a8e1abe178479496ad376811e50a62.jpeg "#left")

Answer 1

AIGC生成：

---

绘制饼图及环形图

根据提供的图片，需要绘制一个饼图和一个环形图。ECharts是一个功能强大且易于使用的数据可视化库，可以轻松地绘制饼图和环形图。

以下是一个简单的示例代码，使用ECharts绘制饼图和环形图：

// 1. 创建一个echarts实例
var chart = echarts.init(document.getElementById('chart'));

// 2. 设置图表的配置项
var option = {
  title: '饼图和环形图示例',
  series: [
    {
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [
        {value: 30, name: 'A'},
        {value: 20, name: 'B'},
        {value: 10, name: 'C'},
        {value: 40, name: 'D'}
      ]
    },
    {
      type: 'ring',
      radius: '60%',
      center: ['50%', '50%'],
      data: [
        {value: 30, name: 'A'},
        {value: 20, name: 'B'},
        {value: 10, name: 'C'},
        {value: 40, name: 'D'}
      ]
    }
  ]
};

// 3. 将配置项应用于图表
chart.setOption(option);

在上面的代码中，我们首先创建了一个ECharts实例，然后设置了图表的配置项。其中，我们使用了pie类型的图表绘制了一个饼图，并使用了ring类型的图表绘制了一个环形图。最后，我们将配置项应用于图表。

在实际应用中，你需要根据自己的数据和需求来调整图表的配置项。

---