ECharts 教程：入门与进阶

ECharts 是一个基于 JavaScript 的开源数据可视化库，由百度开源，提供丰富的图表类型、强大的交互功能以及高度的可定制性，适用于各种数据可视化需求，如折线图、柱状图、散点图、地图、关系图等。

1. ECharts 简介

1.1 主要特点

  • 丰富的图表类型：支持折线图、柱状图、饼图、散点图、雷达图、地图、热力图等。
  • 强大的交互能力：支持缩放、拖拽、数据筛选等交互功能。
  • 高性能：基于 Canvas 技术，支持海量数据渲染。
  • 跨平台：支持 PC 和移动端，兼容主流浏览器。
  • 高度可定制：可以自定义颜色、样式、动画、工具提示等。

1.2 适用场景

  • 数据可视化大屏（BI 报表、仪表盘）
  • 实时监控系统
  • 地理信息展示
  • 统计分析

2. 快速入门

2.1 引入 ECharts

ECharts 支持多种方式引入，包括 CDN 和 npm。

方式 1：使用 CDN

最简单的方式是通过 CDN 直接引入：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>ECharts 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('chart'));
        var option = {
            title: { text: '简单示例' },
            tooltip: {},
            xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
            yAxis: {},
            series: [{ type: 'bar', data: [5, 20, 36, 10, 10] }]
        };
        chart.setOption(option);
    </script>
</body>
</html>

方式 2：使用 npm

如果你在 Node.js 或 Vue、React 项目中使用：

npm install echarts --save

然后在 JavaScript 代码中：

import * as echarts from 'echarts';
let chart = echarts.init(document.getElementById('chart'));

3. 基础图表

3.1 折线图

var option = {
    title: { text: '折线图示例' },
    tooltip: {},
    xAxis: { data: ['1月', '2月', '3月', '4月', '5月'] },
    yAxis: {},
    series: [{ type: 'line', data: [5, 20, 36, 10, 10] }]
};
chart.setOption(option);

3.2 柱状图

var option = {
    title: { text: '柱状图示例' },
    tooltip: {},
    xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
    yAxis: {},
    series: [{ type: 'bar', data: [10, 15, 30, 25, 20] }]
};
chart.setOption(option);

3.3 饼图

var option = {
    title: { text: '饼图示例' },
    tooltip: { trigger: 'item' },
    series: [{
        type: 'pie',
        radius: '50%',
        data: [
            { value: 1048, name: '苹果' },
            { value: 735, name: '香蕉' },
            { value: 580, name: '橙子' }
        ]
    }]
};
chart.setOption(option);

4. 进阶功能

4.1 数据动态更新

setInterval(function () {
    var newData = option.series[0].data.map(item => item + Math.floor(Math.random() * 10));
    option.series[0].data = newData;
    chart.setOption(option);
}, 2000);

4.2 交互功能

  • 工具栏（保存图片、数据视图、还原）
var option = {
    toolbox: {
        feature: {
            saveAsImage: {},
            dataView: { readOnly: false },
            restore: {}
        }
    }
};
  • 点击事件
chart.on('click', function (params) {
    alert(params.name + ': ' + params.value);
});

5. 结合后端

ECharts 可以与后端（如 Python、PHP、Node.js）结合，动态获取数据。例如：

5.1 使用 Ajax 获取数据

fetch('/api/data')
    .then(response => response.json())
    .then(data => {
        option.series[0].data = data;
        chart.setOption(option);
    });

5.2 Flask 后端示例

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data')
def get_data():
    return jsonify([10, 20, 30, 40, 50])

if __name__ == '__main__':
    app.run(debug=True)

6. ECharts 进阶

6.1 地图可视化

ECharts 支持中国地图、世界地图，需引入 geoJSON：

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [{ name: '北京', value: [116.4, 39.9, 200] }]
    }]
};
chart.setOption(option);

6.2 热力图

var option = {
    series: [{
        type: 'heatmap',
        data: [[10, 10, 5], [20, 20, 10], [30, 30, 15]]
    }]
};
chart.setOption(option);

7. 总结

ECharts 是一个强大且灵活的数据可视化工具，适用于各种场景。从基础柱状图、折线图到复杂的地图、热力图，它都能轻松实现。希望本教程能帮助你快速掌握 ECharts 的使用！

你有具体的 ECharts 需求或想实现的效果吗？欢迎交流！ 🚀