ECharts #

什么是 ECharts？ #

ECharts（Enterprise Charts）是由百度开源的数据可视化库，基于 JavaScript 实现，可以流畅运行在 PC 和移动设备上，兼容当前绝大部分浏览器。ECharts 提供直观、生动、可交互、可高度个性化定制的数据可视化图表。

文档结构 #

本指南按以下结构组织，循序渐进地帮助你掌握 ECharts：

1. 入门基础 #

主题	描述	文档链接
ECharts 简介	ECharts 的定义、特点、历史与应用场景	intro.md
安装与配置	环境搭建、安装方式、开发工具	installation.md
基础概念	图表配置、数据格式、核心组件	basics.md

2. 核心图表 #

主题	描述	文档链接
常见图表	柱状图、折线图、饼图等基础图表	charts.md

3. 进阶功能 #

主题	描述	文档链接
交互功能	提示框、图例、数据区域缩放等	interaction.md
主题样式	主题定制、样式配置、视觉映射	theme.md

4. 高级应用 #

主题	描述	文档链接
高级功能	地图可视化、3D 图表、大数据优化	advanced.md

学习路径 #

入门阶段（ECharts 新手） #

了解 ECharts 的基本概念和优势
搭建 ECharts 开发环境
掌握基本的配置项结构
创建第一个简单图表
理解数据系列的概念

进阶阶段（ECharts 熟练） #

掌握各种常见图表的使用
学习图表的交互功能
自定义图表样式和主题
实现多图表联动
处理动态数据更新

高级阶段（ECharts 专家） #

掌握地图可视化
使用 3D 图表展示复杂数据
大数据量渲染优化
自定义系列和组件
构建可视化仪表板

大师阶段（ECharts 大师） #

开发自定义图表类型
实现复杂的数据可视化方案
性能调优与最佳实践
参与开源社区贡献
构建企业级可视化平台

ECharts vs 其他可视化库 #

特性	ECharts	D3.js	Chart.js	Highcharts
学习曲线	平缓	陡峭	平缓	平缓
配置驱动	✅	❌	✅	✅
中文文档	✅ 官方	社区翻译	社区翻译	官方中文
图表丰富度	极高	无限	中等	高
地图支持	强大	插件	无	插件
3D 图表	✅	插件	无	插件
开源免费	✅	✅	✅	⚠️ 商业收费

快速开始 #

html

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
  <script>
    const chart = echarts.init(document.getElementById('chart'));
    
    const option = {
      title: {
        text: 'ECharts 示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    
    chart.setOption(option);
  </script>
</body>
</html>

核心概念预览 #

初始化实例 #

javascript

const chart = echarts.init(document.getElementById('chart'));

配置项 #

javascript

const option = {
  title: { text: '图表标题' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['系列名称'] },
  xAxis: { type: 'category', data: ['类目1', '类目2'] },
  yAxis: { type: 'value' },
  series: [{
    name: '系列名称',
    type: 'bar',
    data: [10, 20]
  }]
};

数据更新 #

javascript

chart.setOption({
  series: [{
    data: [15, 25, 30]
  }]
});

响应式 #

javascript

window.addEventListener('resize', () => {
  chart.resize();
});

资源推荐 #

ECharts 官方网站：最权威的 ECharts 文档
ECharts GitHub：ECharts 源码和问题反馈
ECharts 配置项手册：详细的配置项文档
ECharts 示例：丰富的官方示例

贡献指南 #

欢迎对本指南进行贡献！如果你发现错误或有改进建议，请联系我们。

更新日志 #

2026-03-28：创建初始版本，包含完整的 ECharts 学习大纲

继续探索本指南，逐步掌握 ECharts 技术，从新手成长为数据可视化专家！