目录

Apache ECharts 使用指南：快速入门

一、ECharts 是什么？

二、快速开始

三、核心概念详解

四、进阶功能与最佳实践

五、最佳实践

六、资源与学习

Apache ECharts 使用指南：快速入门

一、ECharts 是什么？

Apache ECharts（Incubating）是一个基于 JavaScript 的开源可视化图表库，由百度团队最初创建并捐赠给 Apache 基金会。它提供了大量丰富、直观、可高度定制且交互性强的图表类型，让开发者能够轻松地将数据转换为美观的统计图表。

核心优势：

  • 丰富的图表类型：支持折线图、柱状图、饼图、散点图、雷达图、地图、热力图、关系图、箱线图、平行坐标等几十种图表。
  • 多种渲染方式：支持 Canvas 和 SVG 两种渲染方式，以适应不同场景和需求（Canvas 适合数据量大的情况，SVG 更适合交互频繁的移动端）。
  • 深度的交互功能：支持数据筛选、缩放、拖拽、详情提示等丰富的交互操作。
  • 强大的可视化效果：支持渐变、动画、混搭等，让图表生动直观。
  • 活跃的社区和文档：拥有完善的中文文档和活跃的社区，遇到问题容易找到解决方案。
二、快速开始

只需简单四步，即可创建你的第一个图表。

第1步：引入 ECharts 首先，你需要在 HTML 页面中通过 <script> 标签引入 ECharts 库。你可以选择以下两种方式之一：

  • 方式一：从 CDN 引入（推荐用于学习和快速原型开发）


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个 ECharts 实例</title>
        <!-- 引入 echarts.js -->
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    </head>
    <body>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 600px;height:400px;"></div>
    </body>
    </html>


    
 
  • 方式二：从 npm 安装（推荐用于正式项目）
    • 



npm install echarts


然后在你的 JavaScript 文件中引入：


    // 按需引入
    import * as echarts from 'echarts';
    // 或者全量引入
    // import * as echarts from 'echarts';






第2步：准备一个容器 在 HTML 中创建一个 DOM 元素作为图表的容器，并为其设置宽度和高度。


<div id="chart-container" style="width: 800px; height: 500px;"></div>




第3步：初始化实例并绑定容器 使用 JavaScript 获取 DOM 元素，并基于它初始化一个 ECharts 实例。


// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart-container'));






第4步：指定配置项和数据，并渲染图表 准备一个包含图表所有信息和配置的 option 对象，然后使用 setOption 方法生成图表。


import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

option && myChart.setOption(option);



展示效果






至此，一个简单的柱状图就创建完成了！


三、核心概念详解


要灵活使用 ECharts，必须理解其核心配置项 option 的结构。


        1、标题 (title)：图表的标题。




    title: {
        text: '销售数据统计', // 主标题文本
        subtext: '2023年Q4',  // 副标题文本
        left: 'center'        // 位置居中
    }




        2、提示框 (tooltip)：当鼠标悬停在图表上时显示的提示信息。




    tooltip: {
        trigger: 'axis', // 触发方式，'axis' 为坐标轴触发，'item' 为数据项触发
        formatter: '{b}<br/>{a}: {c}' // 自定义提示框内容格式
    }




        3、图例 (legend)：展示不同系列的标识和名称，用于筛选系列。




    legend: {
        data: ['销售额', '利润'] // 需要和图表的 series.name 一一对应
    }




        4、坐标轴 (xAxis / yAxis)：定义直角坐标系的坐标轴。




    xAxis: {
        type: 'category', // 类目轴，适用于离散的类别数据
        data: ['一月', '二月', '三月']
    },
    yAxis: {
        type: 'value' // 数值轴，适用于连续的数据
    }




        5、系列 (series)：这是最重要的部分，决定了图表的类型和核心数据。它是一个数组，每个元素代表一个数据系列。


示例：一个折线图和一个柱状图混搭


    
 
  • type: 定义图表类型，如 'line'（折线图）、'bar'（柱状图）、'pie'（饼图）等。
    • 
 
  • name: 系列名称，与 legend.data 对应。
    • 
 
  • data: 系列的数据数组。
    • 





    series: [
        {
            name: '销售额',
            type: 'line',
            data: [150, 230, 224, 218, 135, 147]
        },
        {
            name: '利润',
            type: 'bar',
            data: [40, 55, 70, 45, 30, 35]
        }
    ]




四、进阶功能与最佳实践


    
 
  1. 响应式布局：当浏览器窗口大小改变时，调用 resize() 方法使图表自适应。
    2. 





    window.addEventListener('resize', function() {
        myChart.resize();
    });




        2、数据异步加载：在实际项目中，数据通常从后端 API 异步获取。




    // 假设使用 fetch API 获取数据
    fetch('/api/sales-data')
        .then(response => response.json())
        .then(data => {
            // 动态更新 chart 的 option
            myChart.setOption({
                xAxis: {
                    data: data.categories // 假设返回的数据结构中有 categories
                },
                series: [{
                    data: data.values // 假设返回的数据结构中有 values
                }]
            });
        });


    
 
  1. 主题应用：ECharts 支持主题，可以统一图表的视觉风格。 
  
      
   
    • 首先引入主题的 JS 文件。
      • 
   
    • 然后在初始化图表时应用主题。
      • 
  
    2. 





    // 初始化实例时传入主题名称
    var myChart = echarts.init(document.getElementById('main'), 'dark');




        按需引入：在正式项目中，为了减小打包体积，建议使用按需引入的方式。


        import * as echarts from 'echarts/core';
        import { BarChart } from 'echarts/charts';
        import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';
        import { CanvasRenderer } from 'echarts/renderers';

        echarts.use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]);
        // ... 其余代码相同




*   **错误处理**：在异步加载数据时，务必添加 `.catch()` 来处理可能的错误。
*   **销毁实例**：在单页应用（SPA）中，当组件卸载时，应调用 `dispose()` 方法销毁图表以避免内存泄漏。


        myChart.dispose();


五、最佳实践


通过客户群发起请求→服务端返回数据→客户端通过ECharts把数据可视化


1.服务端代码准备


创建数据模型 (model/SalesData.java)


这是一个简单的 POJO (Plain Old Java Object) 类，用于封装返回给前端的数据。




package com.example.demo.model;

// 省略 getter/setter 和构造函数，实际开发中请使用 Lombok 或自行生成
public class SalesData {
    private String[] categories;
    private int[] values;

    public SalesData() {
    }

    public SalesData(String[] categories, int[] values) {
        this.categories = categories;
        this.values = values;
    }

    // Getter and Setter 方法
    public String[] getCategories() {
        return categories;
    }

    public void setCategories(String[] categories) {
        this.categories = categories;
    }

    public int[] getValues() {
        return values;
    }

    public void setValues(int[] values) {
        this.values = values;
    }
}


创建控制器 (controller/ChartDataController.java)


这是核心，负责处理 HTTP 请求并返回 JSON 数据。


package com.example.demo.controller;

import com.example.demo.model.SalesData;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("/api")
// 解决跨域问题：允许来自 http://127.0.0.1:5500 的请求（根据你的前端服务器地址修改）
@CrossOrigin(origins = "http://127.0.0.1:5500") 
public class ChartDataController {

    // 模拟月度销售额数据 API
    @GetMapping("/sales-data")
    public SalesData getSalesData() {
        // 模拟从数据库查询数据
        String[] months = {"一月", "二月", "三月", "四月", "五月", "六月"};
        int[] sales = {150, 230, 224, 218, 135, 147};
        
        return new SalesData(months, sales);
    }

    // 模拟产品分类占比数据 API
    @GetMapping("/product-pie")
    public Map<String, Object>[] getProductPieData() {
        // 这里使用 Map 数组来模拟 ECharts 饼图所需的数据结构 [{value: 1048, name: 'Search Engine'}, ...]
        // 更规范的做法是创建一个 PieData 类
        return new Map[] {
            createPieItem(1048, "电子产品"),
            createPieItem(735, "服装"),
            createPieItem(580, "家居"),
            createPieItem(484, "食品"),
            createPieItem(300, "图书")
        };
    }

    // 辅助方法，创建一个饼图数据项
    private Map<String, Object> createPieItem(int value, String name) {
        Map<String, Object> item = new HashMap<>();
        item.put("value", value);
        item.put("name", name);
        return item;
    }

    // 另一个示例：带参数请求，比如查询某年的数据
    @GetMapping("/sales-by-year")
    public SalesData getSalesByYear(int year) {
        // 根据 year 参数模拟不同数据
        if (year == 2022) {
            String[] months = {"Q1", "Q2", "Q3", "Q4"};
            int[] sales = {420, 532, 601, 534};
            return new SalesData(months, sales);
        } else { // 默认2023年
            String[] months = {"Q1", "Q2", "Q3", "Q4"};
            int[] sales = {520, 632, 701, 634};
            return new SalesData(months, sales);
        }
    }
}


关键点说明：


    
 
  • @RestController: 标明这个类是一个控制器，并且返回的数据直接写入 HTTP 响应体（通常是 JSON）。
    • 
 
  • @GetMapping: 将 HTTP GET 请求映射到特定的方法上。
    • 
 
  • @CrossOrigin: 处理跨域问题。允许指定的源（前端地址）访问此 API。这是必须的，因为前端和后端运行在不同端口。
    • 
 
  • Spring Boot 自动使用 Jackson 库将返回的 Java 对象序列化为 JSON。
    • 



2.客户通代码


前端代码与之前类似，唯一需要改变的是 请求的 URL，现在它指向的是 Java 后端。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java + ECharts 数据看板</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        .chart-container {
            width: 1000px;
            height: 450px;
            margin: 30px auto;
        }
        .controls {
            text-align: center;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">Java Spring Boot 数据看板</h1>

    <div class="controls">
        <label for="yearSelect">选择年份：</label>
        <select id="yearSelect" onchange="loadSalesByYear()">
            <option value="2023">2023</option>
            <option value="2022">2022</option>
        </select>
    </div>

    <div id="salesChart" class="chart-container"></div>
    <div id="productPie" class="chart-container"></div>

    <script>
        // 初始化图表实例
        const salesChart = echarts.init(document.getElementById('salesChart'));
        const productPieChart = echarts.init(document.getElementById('productPie'));

        // Java 后端 API 基地址
        const API_BASE_URL = 'http://localhost:8080/api';

        // 主加载函数
        async function loadAllCharts() {
            try {
                // 并发请求所有数据
                const [salesResponse, pieResponse] = await Promise.all([
                    fetch(`${API_BASE_URL}/sales-data`),
                    fetch(`${API_BASE_URL}/product-pie`)
                ]);

                if (!salesResponse.ok || !pieResponse.ok) {
                    throw new Error(`HTTP error! status: ${salesResponse.status}`);
                }

                const salesData = await salesResponse.json();
                const pieData = await pieResponse.json();

                renderSalesChart(salesData);
                renderProductPieChart(pieData);

            } catch (error) {
                console.error('获取数据失败:', error);
                alert('图表数据加载失败: ' + error.message);
            }
        }

        // 根据年份加载数据
        async function loadSalesByYear() {
            const year = document.getElementById('yearSelect').value;
            try {
                const response = await fetch(`${API_BASE_URL}/sales-by-year?year=${year}`);
                if (!response.ok) throw new Error('Network response was not ok.');
                const data = await response.json();
                renderSalesChart(data, `${year}年季度销售额`);
            } catch (error) {
                console.error('按年加载失败:', error);
            }
        }

        // 渲染销售图表
        function renderSalesChart(data, title = '2023年上半年月度销售额') {
            salesChart.setOption({
                title: { text: title },
                tooltip: { trigger: 'axis' },
                legend: { data: ['销售额'] },
                xAxis: {
                    type: 'category',
                    data: data.categories
                },
                yAxis: { type: 'value' },
                series: [{
                    name: '销售额',
                    type: 'bar', // 这里改用柱状图
                    data: data.values,
                    itemStyle: {
                        color: '#5470c6'
                    }
                }]
            });
        }

        // 渲染产品饼图
        function renderProductPieChart(data) {
            productPieChart.setOption({
                title: { text: '产品销售额占比', left: 'center' },
                tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: data.map(item => item.name)
                },
                series: [{
                    name: '销售额占比',
                    type: 'pie',
                    radius: '60%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            });
        }

        // 页面加载和窗口调整
        window.addEventListener('load', loadAllCharts);
        window.addEventListener('resize', () => {
            salesChart.resize();
            productPieChart.resize();
        });
    </script>
</body>
</html>


3.运行与测试


    
 
  1. 
  
    启动 Java 后端：
    
  
      
   
    • 在 IDE（如 IntelliJ IDEA）中运行 DemoApplication.java。
      • 
   
    • 或在项目根目录下使用 Maven 命令：./mvnw spring-boot:run (Linux/Mac) 或 mvnw.cmd spring-boot:run (Windows)。
      • 
   
    • 确保后端服务在 http://localhost:8080 成功启动。
      • 
  
    2. 
 
  2. 
  
    运行前端：
    
  
      
   
    • 由于涉及跨域请求，不要直接双击打开 index.html。
      • 
   
    • 使用一个本地 HTTP 服务器来托管前端页面。例如，如果你有 Python：
      • 
  
    3. 



        # 进入 frontend 目录
        cd frontend
        # 使用 Python 内置服务器 (端口 5500)
        python -m http.server 5500


然后在浏览器中访问 `http://127.0.0.1:5500


六、资源与学习



希望这份指南能帮助你顺利开启数据可视化之旅！通过理解和实践上述内容，你将能够使用 Apache ECharts 创造出强大而美观的数据图表。
 
  

        # echarts
      
        # 信息可视化
      
        # 前端
      
  
 
 Logo 
2048 AI社区
 
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
 
 
  
更多推荐
  
cover
 
出海企业如何依托拓氪科技AIGEO布局AI采购流量入口？
 
 
avatar 2048 AI社区
 
cover
 
2026年AI写作辅助平台推荐：9款实用AI工具终极合辑
 
 
avatar 2048 AI社区
 
cover
 
你的论文被“误判”成AI写的？别急着改，先看懂aigc检测的“潜规则”
 
 
avatar 2048 AI社区