ECharts极简入门

ECharts 是一个基于 JavaScript的开源可视化图表库，广泛应用于数据可视化的场景中，支持多种图表类型，如柱状图、折线图、饼图、散点图、雷达图等，且具有强大的自定义功能。

1. ECharts 基本使用

首先需要引入 ECharts 库，通常通过 CDN 或本地引入。以下是通过 CDN 引入的方式：

<!DOCTYPE html>
<html lang="en">
<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@5.3.0/dist/echarts.min.js"></script>
    <style>
        #chart {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="chart"></div>

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

        // 配置项
        var option = {
            title: {
                text: 'ECharts 入门示例',
                subtext: '子标题',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['A', 'B', 'C', 'D']
            },
            series: [
                {
                    name: '类别',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 40, name: 'A' },
                        { value: 30, name: 'B' },
                        { value: 20, name: 'C' },
                        { value: 10, name: 'D' }
                    ]
                }
            ]
        };

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

2. 解析配置项

title：图表的标题配置。
- text: 主标题内容。
- subtext: 副标题内容。
- left: 控制标题的位置，center表示居中，left表示左对齐，right表示右对齐。
tooltip：提示框配置，鼠标悬浮在图形元素上时显示的内容。
- trigger: 触发方式，item表示触发项（如饼图的每一项），axis表示坐标轴触发。
- formatter: 自定义提示框的显示内容，{a}是系列名称，{b}是数据项名称，{c}是数据项的值，{d}是百分比。
legend：图例配置，展示各系列对应的标识符。
- orient: 图例的排列方式，vertical表示竖直排列，horizontal表示水平排列。
- left: 控制图例的位置，left表示左对齐，center居中，right右对齐。
- data: 图例项的名称数组，对应到 series 数据项中的 name。
series：系列数据配置，ECharts 中的图表类型（如柱状图、折线图、饼图等）都会通过 series 来定义。
- name: 系列名称，用于 tooltip 提示框展示。
- type: 图表类型，这里是 pie，表示饼图，其他常见类型有 bar（柱状图）、line（折线图）等。
- radius: 饼图的半径大小，50% 表示占据容器宽度的50%。
- data: 图表数据，包含各数据项的 value（数值）和 name（名称）。

3. 场景分析：使用 ECharts 展示数据统计

假设我们需要展示一个饼图，反映某公司不同部门的员工分布情况。我们可以通过 ECharts 来快速实现该需求，以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工分布情况</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
    <style>
        #chart {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="chart"></div>

    <script>
        var chart = echarts.init(document.getElementById('chart'));

        var option = {
            title: {
                text: '公司部门员工分布',
                subtext: '2025年数据',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}人 ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['研发', '市场', '销售', '人力资源', '财务']
            },
            series: [
                {
                    name: '员工分布',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 400, name: '研发' },
                        { value: 150, name: '市场' },
                        { value: 300, name: '销售' },
                        { value: 100, name: '人力资源' },
                        { value: 50, name: '财务' }
                    ]
                }
            ]
        };

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

4. 详细解释

title：此图表的主标题为“公司部门员工分布”，副标题为“2025年数据”，这些都位于页面中央显示。
tooltip：每次鼠标悬停在图表的不同部门上时，都会弹出该部门员工数量以及该部门占总员工数的百分比。
legend：显示不同部门的图例，并放置在页面的左侧。
series：这里的 type 为 pie，表示我们使用饼图来展示员工分布，radius: '50%' 让饼图的大小为容器宽度的50%。

5. 进阶功能：自定义样式和交互

ECharts 提供了许多自定义图表样式和交互功能，可以进一步优化用户体验。例如，可以为每个部门设置不同的颜色，或者启用动画效果。

option = {
    ...option,
    color: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'], // 自定义颜色
    animationType: 'expansion', // 动画效果
    series: [{
        name: '员工分布',
        type: 'pie',
        radius: '50%',
        label: {
            show: true,
            position: 'outside',
            formatter: '{b}: {c}人'
        },
        data: [
            { value: 400, name: '研发' },
            { value: 150, name: '市场' },
            { value: 300, name: '销售' },
            { value: 100, name: '人力资源' },
            { value: 50, name: '财务' }
        ]
    }]
};

color: 自定义每个部分的颜色。
label: 配置标签的显示方式，包括位置和格式。