在ECharts中绘制饼图及环形图(图表)

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/8ac2caf65a144cca8 6cc223a940fcd2.jpeg"#left")

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

13条回答默认最新

阿里嘎多学长 2024-09-22 20:06

关注

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

根据您提供的信息，您希望在ECharts中绘制饼图和环形图。ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够绘制各种图表，包括饼图和环形图。

饼图和环形图的区别：

饼图：显示数据的比例关系，每个扇区的面积表示数据的大小。
环形图：与饼图类似，但中间有一个空心，可以显示更多的信息或者用于视觉上的区分。

环境版本：

ECharts 版本：通常建议使用最新稳定版本。

编程实现步骤：

引入 ECharts 库：在 HTML 文件中通过 <script> 标签引入 ECharts 库。
准备一个容器：在 HTML 中准备一个用于显示图表的 <div> 容器。
初始化图表：使用 echarts.init 方法初始化图表。
配置图表选项：设置图表的 option，包括系列类型（series），数据（data）等。
设置图表：使用 setOption 方法应用配置。

示例代码：

以下是一个简单的饼图和环形图的示例代码。

HTML 文件：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>ECharts 饼图和环形图示例</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <div id="pieChart" style="height: 50%"></div>
    <div id="donutChart" style="height: 50%"></div>
    <script>
        // 饼图
        var pieChart = echarts.init(document.getElementById('pieChart'));
        var pieOption = {
            title: {
                text: '饼图示例',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '联盟广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1548, name: '搜索引擎'}
                    ]
                }
            ]
        };
        pieChart.setOption(pieOption);

        // 环形图
        var donutChart = echarts.init(document.getElementById('donutChart'));
        var donutOption = {
            title: {
                text: '环形图示例',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '55%'],
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '联盟广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1548, name: '搜索引擎'}
                    ]
                }
            ]
        };
        donutChart.setOption(donutOption);
    </script>
</body>
</html>

示例输入和输出：

输入：假设的数据集，如上所示。
输出：在网页上显示一个饼图和一个环形图。

运行环境：

任何支持 JavaScript 的现代浏览器。

通过上述步骤和代码，您可以在网页中绘制出饼图和环形图。如果您有更具体的需求或者遇到任何问题，欢迎继续提问。

AIGC生成：

在 ECharts 中绘制饼图及环形图

你好！根据你提供的图片，我可以看到你想在 ECharts 中绘制饼图和环形图。下面是一些可能的解决方法：

使用 echarts 的 pie 和 ring 两个系列来绘制饼图和环形图。例如：

option = {
  series: [
    {
      type: 'pie',
      data: [
        { value: 30, name: 'A' },
        { value: 20, name: 'B' },
        { value: 10, name: 'C' }
      ]
    },
    {
      type: 'ring',
      data: [
        { value: 30, name: 'A' },
        { value: 20, name: 'B' },
        { value: 10, name: 'C' }
      ]
    }
  ]
};

使用 echarts 的 geo 系列来绘制环形图。例如：

option = {
  series: [
    {
      type: 'geo',
      map: 'china',
      roam: true,
      label: {
        normal: {
          show: true,
          formatter: '{b}'
        }
      }
    }
  ]
};

使用 echarts 的 gauge 系列来绘制环形图。例如：

option = {
  series: [
    {
      type: 'gauge',
      startAngle: 0,
      endAngle: 360,
      radius: '100%',
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 0, 0, 0.5)'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      data: [
        {
          value: 30,
          name: 'A'
        },
        {
          value: 20,
          name: 'B'
        },
        {
          value: 10,
          name: 'C'
        }
      ]
    }
  ]
};

这些方法可以帮助你在 ECharts 中绘制饼图和环形图。如果你需要更多帮助，请提供更多的信息和代码。