ECharts 饼图 | 菜鸟教程

时间: 2024-10-18 21:59:31

(部分内容来自网络，其真实性存疑，为了避免对您造成误导，请谨慎甄别。)

ECharts 是一款由百度开源的前端数据可视化库，能够帮助开发者创建各种图表和可视化效果，其中饼图是最常用的图表之一。饼图用于展示部分与整体之间的比例关系，视觉效果直观，适用于展示数据的组成结构。

以下是创建一个简单的 ECharts 饼图的步骤：

步骤 1: 引入 ECharts

在 HTML 文件中引入 ECharts 的核心库。可以使用以下CDN链接：


<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

步骤 2: 创建一个 HTML 容器

在你的 HTML 中，创建一个 div 元素作为饼图的容器：


<div id="main" style="width: 600px; height: 400px;"></div>

步骤 3: 初始化 ECharts 实例

在 <script> 标签中，初始化 ECharts 实例并创建饼图的配置项和数据：


<script>
    // 初始化ECharts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定饼图的配置项
    var option = {
        title: {
            text: '饼图示例',
            subtext: '数据来源：某某数据',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 335, name: '直接访问' },
                    { value: 310, name: '邮件营销' },
                    { value: 234, name: '联盟广告' },
                    { value: 135, name: '视频广告' },
                    { value: 1548, name: '搜索引擎' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>

步骤 4: 完整的 HTML 代码

将上述代码整合成一个完整的 HTML 文档：


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 饼图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px; height: 400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: '饼图示例',
                subtext: '数据来源：某某数据',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' },
                        { value: 234, name: '联盟广告' },
                        { value: 135, name: '视频广告' },
                        { value: 1548, name: '搜索引擎' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

示例效果

将上述代码保存为 .html 文件后，用浏览器打开，就能看到一个简单的饼图示例，展示了不同访问来源的比例。

小结

通过 ECharts 创建饼图相对简单，只需设置好数据和配置项，就能快速实现数据的可视化。可以根据具体需求调整样式和数据，使其更符合实际应用场景。更多详细的配置和功能，可以参考 [ECharts 官方文档](https://echarts.apache.org/zh/index.html)。