ECharts 饼图学习笔记

概述

ECharts 是一款基于 JavaScript 的开源可视化库，提供多种常见图表类型的展示，包括饼图、柱状图、折线图等。其中饼图是一种常用的数据可视化方式，能够直观地展示数据的占比情况。

基本使用

首先需要引入 ECharts 的 JavaScript 文件，在 HTML 中添加一个 div 容器，然后创建一个 ECharts 实例并将其绑定到容器上即可。以下是一个简单的饼图示例：

htmlCopy Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts 饼图示例</title>
    <!-- 引入 ECharts 的 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 创建一个 div 容器 -->
    <div id="chart" style="width: 600px; height:400px;"></div>
    <script>
        // 创建 ECharts 实例并绑定到容器上
        var chart = echarts.init(document.getElementById('chart'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '饼图示例'
            },
            tooltip: {},
            legend: {
                data:['销售额']
            },
            series: [{
                name: '销售额',
                type: 'pie',
                data: [
                    {value: 335, name: '商品A'},
                    {value: 310, name: '商品B'},
                    {value: 234, name: '商品C'},
                    {value: 135, name: '商品D'}
                ]
            }]
        };

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

实例解析

通过上面的示例代码可以看到，在 ECharts 中创建一个饼图需要指定以下几个配置项：

title: 饼图的标题，可以通过 text 属性指定。
tooltip: 提示框组件，用于展示鼠标悬浮到图表上时的提示信息。
legend: 图例组件，用于展示饼图中各个部分的名称和颜色。
series: 系列列表，其中每个系列代表一个饼图，在饼图中需要指定具体数据和样式。

在上面的示例中，我们定义了一个饼图系列，其类型为 pie，数据包含四个对象，每个对象代表饼图的一个扇形区域，其中 name 属性指定了该区域的名称，value 属性指定了该区域所占比例的数值。

总结

饼图是一种简单易用的数据可视化方式，基于 ECharts 我们可以很方便地创建出一个饼图来展示数据的占比情况。在实际应用中，饼图除了可以用于简单数据的展示之外，还可以通过一些高级配置项来实现更加复杂的功能，例如内外径不同、标签样式自定义等。