ECharts 简介 #

什么是数据可视化？ #

数据可视化是将数据转换为图形或图像的过程，使人们能够更直观地理解数据中的模式、趋势和关系。好的数据可视化能够将复杂的数据转化为易于理解的视觉形式。

text 
┌─────────────────┐
│     原始数据     │
│   [1, 2, 3...]  │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   数据可视化     │
│   ECharts 处理  │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   视觉呈现       │
│   图表、图形     │
└─────────────────┘

什么是 ECharts？ #

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

核心定位 #

text 
┌─────────────────────────────────────────────────────────────┐
│                         ECharts                              │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  丰富的图表   │  │  强大的交互   │  │  炫酷的特效   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  地图可视化   │  │  3D 可视化   │  │  大数据渲染   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

ECharts 的历史 #

发展历程 #

text 
2013年 ─── ECharts 诞生
    │
    │      百度团队创建
    │      内部项目孵化
    │      基础图表支持
    │
2015年 ─── ECharts 2.0
    │
    │      开源发布
    │      地图可视化
    │      更多图表类型
    │
2016年 ─── ECharts 3.0
    │
    │      架构重构
    │      性能大幅提升
    │      移动端优化
    │
2018年 ─── Apache 孵化
    │
    │      捐赠给 Apache
    │      国际化发展
    │
2020年 ─── ECharts 5.0
    │
    │      全新设计
    │      性能优化
    │      更多特性
    │
至今   ─── Apache 顶级项目
    │
    │      全球广泛使用
    │      活跃的社区

里程碑版本 #

版本 时间 重要特性
1.0 2013 初始发布，基础图表
2.0 2015 开源、地图可视化
3.0 2016 架构重构、性能优化
4.0 2018 Apache 孵化、数据集
5.0 2020 全新设计、性能优化
5.4 2023 地图优化、新图表类型

为什么选择 ECharts？ #

传统图表开发的痛点 #

在使用 ECharts 之前，数据可视化面临以下问题：

javascript 
// 传统方式：需要手动处理所有细节
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 手动计算坐标
const x = 50;
const y = 100;
const width = 30;
const height = data[i] * scale;

// 手动绘制
ctx.fillStyle = 'steelblue';
ctx.fillRect(x, y, width, height);

// 交互需要自己实现
element.addEventListener('click', () => {
  // 处理点击事件
});

ECharts 的解决方案 #

javascript 
// ECharts：配置驱动，简单直观
const option = {
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [10, 20, 30] }]
};

chart.setOption(option);
// 交互、动画、提示框全部自动实现

ECharts 的核心特点 #

1. 丰富的图表类型 #

ECharts 支持几十种图表类型：

text 
┌─────────────────────────────────────────┐
│              图表类型                    │
├─────────────────────────────────────────┤
│  基础图表：                              │
│  • 柱状图 (bar)                         │
│  • 折线图 (line)                        │
│  • 饼图 (pie)                           │
│  • 散点图 (scatter)                     │
│                                         │
│  高级图表：                              │
│  • 雷达图 (radar)                       │
│  • 仪表盘 (gauge)                       │
│  • 漏斗图 (funnel)                      │
│  • 热力图 (heatmap)                     │
│                                         │
│  专业图表：                              │
│  • 地图 (map)                           │
│  • 关系图 (graph)                       │
│  • 桑基图 (sankey)                      │
│  • 旭日图 (sunburst)                    │
│                                         │
│  3D 图表：                               │
│  • 3D 柱状图                            │
│  • 3D 散点图                            │
│  • 3D 地图                              │
└─────────────────────────────────────────┘

2. 强大的交互功能 #

javascript 
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: { data: ['销量', '利润'] },
  dataZoom: [
    { type: 'slider', start: 0, end: 100 },
    { type: 'inside' }
  ],
  toolbox: {
    feature: {
      saveAsImage: {},
      dataView: { readOnly: false },
      restore: {}
    }
  }
};

3. 炫酷的视觉效果 #

javascript 
const option = {
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff',
      borderWidth: 2
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

4. 地图可视化 #

javascript 
const option = {
  geo: {
    map: 'china',
    roam: true,
    label: { show: true },
    emphasis: {
      label: { show: true }
    }
  },
  series: [{
    type: 'scatter',
    coordinateSystem: 'geo',
    data: [
      { name: '北京', value: [116.46, 39.92, 100] },
      { name: '上海', value: [121.48, 31.22, 200] }
    ]
  }]
};

5. 大数据渲染 #

javascript 
// 增量渲染
chart.appendData({
  seriesIndex: 0,
  data: largeData
});

// 数据采样
const option = {
  series: [{
    type: 'line',
    large: true,
    largeThreshold: 2000,
    data: largeData
  }]
};

6. 移动端优化 #

javascript 
// 自动响应式
const chart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});

// 触摸手势支持
chart.getZr().on('click', eventHandler);
chart.getZr().on('touchstart', eventHandler);
chart.getZr().on('touchmove', eventHandler);

ECharts 与其他可视化库对比 #

ECharts vs D3.js #

特性 ECharts D3.js
学习曲线 平缓 陡峭
使用方式 配置驱动 编程式
图表类型 预设丰富 无限可能
开发效率 高 中
灵活性 中等 极高
中文文档 ✅ 官方 社区翻译
适用场景 企业报表 定制可视化

ECharts vs Chart.js #

特性 ECharts Chart.js
图表丰富度 极高 中等
地图支持 ✅ 强大 ❌ 无
3D 图表 ✅ 支持 ❌ 无
配置复杂度 中等 简单
文件大小 较大 较小
适用场景 复杂需求 简单图表

ECharts vs Highcharts #

特性 ECharts Highcharts
开源免费 ✅ 完全免费 ⚠️ 商业收费
图表类型 更丰富 丰富
3D 支持 ✅ 原生 插件
地图支持 ✅ 强大 插件
技术支持 社区 商业支持
适用场景 各类项目 商业项目

ECharts 的应用场景 #

1. 企业数据报表 #

javascript 
const option = {
  title: { text: '月度销售报表' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['销售额', '利润'] },
  xAxis: { type: 'category', data: ['1月', '2月', '3月'] },
  yAxis: { type: 'value' },
  series: [
    { name: '销售额', type: 'bar', data: [200, 300, 400] },
    { name: '利润', type: 'line', data: [50, 80, 120] }
  ]
};

2. 数据大屏 #

javascript 
// 多图表联动
const chart1 = echarts.init(document.getElementById('chart1'));
const chart2 = echarts.init(document.getElementById('chart2'));

echarts.connect([chart1, chart2]);

// 自动刷新数据
setInterval(() => {
  chart1.setOption({
    series: [{ data: generateData() }]
  });
}, 3000);

3. 地理信息可视化 #

javascript 
const option = {
  visualMap: {
    min: 0,
    max: 1000,
    left: 'left',
    top: 'bottom',
    text: ['高', '低'],
    calculable: true
  },
  series: [{
    type: 'map',
    map: 'china',
    data: [
      { name: '北京', value: 500 },
      { name: '上海', value: 800 }
    ]
  }]
};

4. 实时监控 #

javascript 
// WebSocket 实时数据
const ws = new WebSocket('ws://example.com/data');
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  chart.setOption({
    series: [{ data: data }]
  });
};

5. 科学数据可视化 #

javascript 
const option = {
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    type: 'scatter',
    symbolSize: 10,
    data: scientificData,
    markLine: {
      data: [{ type: 'average', name: '平均值' }]
    }
  }]
};

ECharts 的核心概念 #

实例（Instance） #

javascript 
// 创建实例
const chart = echarts.init(domElement);

// 销毁实例
chart.dispose();

配置项（Option） #

javascript 
const option = {
  title: {},      // 标题组件
  tooltip: {},    // 提示框组件
  legend: {},     // 图例组件
  xAxis: {},      // X 轴
  yAxis: {},      // Y 轴
  series: []      // 系列列表
};

系列（Series） #

javascript 
series: [{
  type: 'bar',    // 图表类型
  name: '销量',   // 系列名称
  data: [10, 20], // 数据
  // ... 其他配置
}]

组件（Component） #

text 
┌─────────────────────────────────────────┐
│                 title                    │
├─────────────────────────────────────────┤
│  legend                                  │
├─────────────────────────────────────────┤
│          │                       │       │
│   yAxis  │      grid            │       │
│          │                       │       │
│          ├───────────────────────┤       │
│          │      xAxis            │       │
├─────────────────────────────────────────┤
│                 tooltip                  │
└─────────────────────────────────────────┘

ECharts 的设计哲学 #

1. 配置驱动 #

javascript 
// 声明式配置
const option = {
  series: [{
    type: 'bar',
    data: [10, 20, 30]
  }]
};

// ECharts 自动处理渲染
chart.setOption(option);

2. 组件化设计 #

text 
┌─────────────────────────────────────┐
│              ECharts                 │
├─────────────────────────────────────┤
│  组件：                              │
│  • title - 标题                     │
│  • legend - 图例                    │
│  • tooltip - 提示框                 │
│  • xAxis/yAxis - 坐标轴             │
│  • grid - 网格                      │
│  • dataZoom - 数据缩放              │
│  • visualMap - 视觉映射             │
│  • toolbox - 工具栏                 │
│  • ...                              │
└─────────────────────────────────────┘

3. 渐进式渲染 #

javascript 
// 增量渲染大数据
chart.appendData({
  seriesIndex: 0,
  data: newDataChunk
});

ECharts 的架构 #

text 
┌─────────────────────────────────────────────────────────────┐
│                        应用层                                │
│  setOption()  resize()  on()  dispatchAction()             │
├─────────────────────────────────────────────────────────────┤
│                        组件层                                │
│  Title  Legend  Tooltip  Axis  Grid  DataZoom  VisualMap   │
├─────────────────────────────────────────────────────────────┤
│                        系列层                                │
│  Bar  Line  Pie  Scatter  Map  Graph  ...                   │
├─────────────────────────────────────────────────────────────┤
│                        渲染层                                │
│  Canvas Renderer  SVG Renderer                              │
├─────────────────────────────────────────────────────────────┤
│                        基础层                                │
│  ZRender (图形渲染引擎)                                      │
└─────────────────────────────────────────────────────────────┘

学习建议 #

  1. 从配置开始：理解 option 的结构是使用 ECharts 的基础
  2. 多看示例：官方示例库有丰富的案例
  3. 善用文档：配置项手册是最重要的参考资料
  4. 动手实践：在实际项目中应用所学知识
  5. 关注性能：大数据量场景需要特别注意性能优化

下一步 #

现在你已经了解了 ECharts 是什么，接下来学习 安装与配置，开始你的数据可视化之旅！

最后更新：2026-03-28