数据可视化 ECharts

一、数据可视化概述与主流库对比

数据可视化的核心是将冰冷的数字转化为直观图形，揭示数据规律，广泛应用于报表、大屏展示、业务监控等场景。目前主流的前端可视化库各有特点，需根据项目需求选择：

可视化库	核心特点	上手难度	适用场景	开源协议 / 商用情况
ECharts	百度出品，基于 Canvas，图表类型丰富（含地图、水球图），配置化开发，文档完善	低	企业级报表、大屏展示、常规图表（柱状图 / 折线图 / 饼图等）	Apache-2.0 协议，免费商用
D3.js	底层可视化库，灵活性极高，可自定义任意图形	高	复杂自定义可视化（如学术图表、特殊交互图形）	BSD 协议，免费商用
AntV（G2/G6）	蚂蚁金服出品，基于 SVG/Canvas，注重交互与数据驱动，生态完善（含图分析 G6）	中	中后台系统、数据中台、图可视化（如关系图）	MIT 协议，免费商用
Highcharts	国外库，基于 SVG，兼容性好，图表美观	中	海外项目、对图表样式要求高的场景	非商用免费，商用需付费
ichartjs	国产轻量库，基于 Canvas，体积小	低	简单图表需求、轻量项目	开源免费

二、ECharts 核心使用流程（五分钟上手）

ECharts 采用 "配置化" 开发模式，核心步骤固定，所有功能通过 option 配置实现：

1. 基础流程（5 步）

1. 引入 ECharts 文件

   • 本地引入：下载 ECharts 官网 的 echarts.min.js，通过 <script> 标签引入。

   • CDN 引入：直接使用 BootCDN 等公共资源，示例： html

     预览

     <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>

2. 准备 DOM 容器必须为容器设置宽高（行内样式 / 外部 CSS 均可），否则图表无法渲染：

   html

   预览

   <div id="main" style="width: 800px; height: 500px;"></div>

3. 初始化 ECharts 实例 通过 echarts.init() 绑定 DOM 容器，生成图表实例：

   javascript

   运行

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

4. 配置 option（核心） option 是一个 JSON 对象，包含图表的标题、坐标轴、数据、样式等所有配置，示例（柱状图）：

   javascript

   运行

   var option = {
     title: { text: '商品销量统计' }, // 标题
     xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, // X轴
     yAxis: {}, // Y轴（默认配置可省略）
     series: [ // 数据系列（决定图表类型）
       {
         name: '销量',
         type: 'bar', // 图表类型：bar=柱状图
         data: [5, 20, 36, 10, 10, 20]
       }
     ]
   };

5. 渲染图表 将 option 配置传入实例，完成渲染：

   javascript

   运行

   myChart.setOption(option);

2. ECharts 关键配置项解析

option 包含多个核心模块，需理解各模块的作用及常用属性：

配置模块	核心作用	常用属性
title	图表标题	text（标题文本）、subtext（副标题）、left/top（位置）、textStyle（文字样式）
tooltip	提示框（鼠标悬浮时显示）	trigger（触发方式：axis= 坐标轴触发，item= 数据项触发）、formatter（自定义提示内容）
legend	图例（用于区分多系列数据）	data（图例名称数组，需与 series.name 一致）、orient（排列方向：horizontal/vertical）
grid	网格（控制折线图 / 柱状图的位置与大小）	left/right/top/bottom（边距）、containLabel（是否包含坐标轴标签，避免标签被截断）
xAxis/yAxis	坐标轴（X 轴 / Y 轴）	type（类型：category= 类目轴，value= 数值轴，time= 时间轴）、data（类目轴的选项数据）、axisLine（轴线样式）
series	数据系列（决定图表类型与数据）	type（图表类型：bar= 柱状图，line= 折线图，pie= 饼图，radar= 雷达图等）、data（具体数据）、itemStyle（数据项样式）
color	调色盘	数组形式定义颜色，如 ['#FF6B6B', '#4ECDC4', '#45B7D1']，控制图表的默认颜色
toolbox	工具箱	提供 "下载图片""数据视图""重置" 等功能，示例：toolbox: { feature: { saveAsImage: {}, restore: {} } }

三、ECharts 常见图表实战（附代码）

1. 折线图（趋势分析）

适用于展示数据随时间的变化趋势（如月度销量、日活用户等）：

html

预览

<div id="lineChart" style="width: 800px; height: 500px;"></div>
<script>
var myChart = echarts.init(document.getElementById('lineChart'));
var option = {
  title: { text: '月度销量趋势' },
  tooltip: { trigger: 'axis' }, // 坐标轴触发，显示整行数据
  legend: { data: ['销量', '产量'] }, // 多系列图例
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: { type: 'value' },
  series: [
    { name: '销量', type: 'line', data: [120, 190, 150, 230, 210, 250] },
    { name: '产量', type: 'line', data: [150, 220, 180, 260, 240, 280] }
  ]
};
myChart.setOption(option);
</script>

2. 饼图（占比分析）

适用于展示各部分占总体的比例（如用户来源、产品销量占比等）：

html

预览

<div id="pieChart" style="width: 800px; height: 500px;"></div>
<script>
var myChart = echarts.init(document.getElementById('pieChart'));
var option = {
  title: { text: '用户访问来源', x: 'center' }, // 标题居中
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)' // 自定义提示：名称+数值+百分比
  },
  legend: {
    orient: 'vertical', // 垂直排列
    left: 'left', // 图例居左
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '60%', // 饼图半径
      center: ['50%', '60%'], // 饼图位置（水平居中，垂直60%处）
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ]
    }
  ]
};
myChart.setOption(option);
</script>

3. 雷达图（多维度对比）

适用于多维度数据对比（如用户能力评分、产品性能评估等）：

html

预览

<div id="radarChart" style="width: 800px; height: 500px;"></div>
<script>
var myChart = echarts.init(document.getElementById('radarChart'));
var option = {
  title: { text: '用户能力评估' },
  radar: [
    {
      indicator: [ // 维度指标（需包含名称和最大值）
        { text: '收益能力', max: 100 },
        { text: '风险控制', max: 100 },
        { text: '盘面感知', max: 100 },
        { text: '仓位控制', max: 100 },
        { text: '选股能力', max: 100 }
      ],
      radius: 150, // 雷达图半径
      shape: 'polygon' // 形状：polygon=多边形，circle=圆形
    }
  ],
  series: [
    {
      name: '用户评分',
      type: 'radar',
      data: [{ value: [85, 63, 37, 20, 84], name: '用户A' }],
      areaStyle: { color: 'rgba(78, 115, 223, 0.3)' } // 填充区域样式
    }
  ]
};
myChart.setOption(option);
</script>

4. 地图（地理数据展示）

适用于展示区域相关数据（如各省份销量、人口分布等），需注意跨域问题（需在服务器环境运行，或使用同源地图数据）：

步骤：

1. 获取地图数据 ：从 阿里云数据可视化平台 下载对应区域的 JSON 数据（如中国地图 100000_full.json）。
2. 注册地图 ：通过 echarts.registerMap() 注册地图数据。
3. 配置 geo 模块 ：在 option 中添加 geo 配置，指定地图类型。

代码示例：

html

预览

<div id="mapChart" style="width: 1000px; height: 600px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('mapChart'));
// 用 jQuery 加载地图数据（需服务器环境，避免跨域）
$.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function (mapData) {
  // 1. 注册地图
  echarts.registerMap('china', mapData);
  // 2. 配置地图
  var option = {
    backgroundColor: '#f5f5f5',
    geo: [
      {
        map: 'china', // 对应注册的地图名称
        label: {
          emphasis: { show: true, color: '#333' } // 鼠标悬浮时显示省份名称
        },
        itemStyle: {
          areaColor: '#e0f3ff', // 省份默认颜色
          borderColor: '#fff' // 省份边界颜色
        },
        emphasis: {
          itemStyle: { areaColor: '#4ECDC4' } // 鼠标悬浮时省份颜色
        }
      }
    ]
  };
  myChart.setOption(option);
});
</script>

5. 特殊图表：水球图（进度展示）

水球图需引入额外的扩展库 echarts-liquidfill.min.js，适用于展示进度（如完成率、使用率等）：

步骤：

1. 引入扩展库 ：下载 echarts-liquidfill 的 echarts-liquidfill.min.js 并引入。
2. 配置 series 模块 ：type 设为 liquidFill，指定数据。

代码示例：

html

预览

<div id="liquidChart" style="width: 500px; height: 500px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-liquidfill/3.1.0/echarts-liquidfill.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('liquidChart'));
var option = {
  series: [
    {
      type: 'liquidFill',
      data: [0.6, 0.5, 0.4], // 水球层数与进度（0.6=60%）
      radius: '70%',
      shape: 'diamond', // 形状：diamond=菱形，circle=圆形
      label: {
        formatter: '60%', // 显示进度文本
        fontSize: 36,
        color: '#333'
      }
    }
  ]
};
myChart.setOption(option);
</script>

四、ECharts 进阶功能

1. 图表交互（点击 / 拖拽）

（1）点击事件

通过 myChart.on('click', callback) 监听图表点击，实现数据下钻等功能：

javascript

运行

// 监听柱状图点击，切换为该月份的上旬/中旬/下旬数据
myChart.on('click', function (params) {
  // params 包含点击的系列、数据索引等信息
  var monthIndex = params.dataIndex; // 点击的月份索引
  var tenDayData = [ // 上旬/中旬/下旬数据
    [300, 200, 150], [250, 180, 120], [320, 220, 180],
    [280, 190, 160], [350, 250, 200], [310, 210, 170]
  ];
  // 更新 option 数据并重新渲染
  myChart.setOption({
    xAxis: { data: ['上旬', '中旬', '下旬'] },
    series: [{ data: tenDayData[monthIndex] }]
  });
});

（2）窗口自适应

通过 window.onresize 监听窗口大小变化，调用 myChart.resize() 实现图表自适应：

javascript

运行

window.onresize = function () {
  myChart.resize(); // 图表随窗口缩放
};

2. 动态数据更新

通过 myChart.setOption(option, true) 实时更新数据（如仪表盘动态刷新）：

html

预览

<div id="gaugeChart" style="width: 500px; height: 500px;"></div>
<script>
var myChart = echarts.init(document.getElementById('gaugeChart'));
var option = {
  series: [
    {
      type: 'gauge',
      name: '完成率',
      detail: { formatter: '{value}%' },
      data: [{ value: 30, name: '业务指标' }]
    }
  ]
};
myChart.setOption(option);

// 每2秒更新一次数据（随机值）
setInterval(function () {
  var randomValue = (Math.random() * 100).toFixed(2); // 0-100的随机数
  option.series[0].data[0].value = randomValue;
  myChart.setOption(option, true); // 强制更新数据
}, 2000);
</script>

3. 大屏展示优化

大屏场景下，需注意以下优化点：

• 分辨率适配 ：使用 vw/vh 单位设置容器大小，或通过 resize 事件动态调整。
• 性能优化 ：减少不必要的动画（如 animation: false），复杂图表使用 "增量更新" 而非全量重绘。
• 样式统一 ：通过 color 调色盘统一图表颜色，配合大屏背景色（如深色背景用亮色图表）。

五、其他可视化库简介（以 AntV G2 为例）

AntV 是蚂蚁金服推出的企业级数据可视化解决方案，其中 G2（Graph Visualization 2.0）是基于 "图形语法" 设计的可视化库，核心优势是 "数据驱动" 和 "高可定制性"，适合中后台系统、数据中台等场景，与 ECharts 形成互补。

1. G2 核心特点

• 图形语法驱动：基于 Leland Wilkinson 的《The Grammar of Graphics》，通过组合 "数据""标记""编码" 等基础元素，可灵活构建任意图表，而非局限于预设类型。
• 数据驱动：强调 "数据与图形分离"，修改数据后图表自动更新，无需手动调整样式。
• 轻量高效：核心包体积小（约 40KB gzip 后），支持按需引入，性能优于 ECharts 复杂场景。
• 生态整合：与 Ant Design（前端 UI 库）、G6（图分析库）、F2（移动端可视化库）无缝衔接，适合企业级技术栈。

2. G2 快速上手（3 步）

（1）引入 G2

• CDN 引入 ：

  html

  预览

  <script src="https://cdn.jsdelivr.net/npm/@antv/g2@4.2.10/dist/g2.min.js"></script>

• npm 引入 （工程化项目）：

  bash

  npm install @antv/g2 --save

  javascript

  运行

  import { Chart } from '@antv/g2';

（2）准备 DOM 容器

与 ECharts 类似，需指定宽高：

html

预览

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

（3）核心代码（绘制柱状图）

G2 遵循 "创建图表 → 载入数据 → 定义图形语法 → 渲染" 的流程，示例：

javascript

运行

// 1. 准备数据（JSON 格式，每一行对应一个数据项）
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
];

// 2. 创建 Chart 实例（绑定容器、设置尺寸）
const chart = new G2.Chart({
  container: 'g2-container', // DOM 容器 ID
  width: 800,
  height: 500,
  padding: [50, 50, 50, 50] // 上右下左内边距（避免标签被截断）
});

// 3. 载入数据
chart.data(data);

// 4. 定义图形语法（核心：标记类型 + 数据编码）
// - interval()：标记类型为"矩形"（对应柱状图）
// - position('genre*sold')：x轴映射 genre 字段，y轴映射 sold 字段
chart.interval()
  .position('genre*sold')
  .color('genre', ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57']) // 按 genre 字段着色
  .label('sold', { position: 'top' }); // 在柱子顶部显示 sold 数值

// 5. 渲染图表
chart.render();

3. G2 与 ECharts 核心差异

对比维度	ECharts	AntV G2
设计理念	配置化（预设图表类型，通过 option 快速搭建）	图形语法（灵活组合元素，支持高度定制）
上手难度	低（文档直观，复制示例即可用）	中（需理解图形语法概念，适合有一定基础开发者）
定制能力	中等（复杂图表需修改源码或使用扩展）	高（可自定义任意标记、交互逻辑）
体积	较大（全量引入约 1MB+）	小（核心包约 40KB，按需引入更小）
适用场景	快速搭建常规图表（报表、大屏、演示）	复杂自定义可视化（中后台系统、数据产品）

六、总结与资源推荐

1. 核心总结

• 工具选择：快速出活选 ECharts，复杂定制选 G2，学术 / 特殊图形选 D3.js。
• ECharts 关键 ：掌握 option 配置逻辑，重点理解 series（图表类型）、xAxis/yAxis（坐标轴）、tooltip（交互）三大模块。
• 性能优化：复杂图表用 "离屏渲染""增量更新"，避免频繁全量重绘；地图数据按需加载，避免一次性加载过大 JSON。
• 交互设计：大屏场景减少冗余动画，聚焦核心数据；中后台场景增加 "筛选""钻取" 功能，提升数据探索效率。

2. 推荐资源

• 官方文档 ：
  • ECharts 官网：https://echarts.apache.org/zh/index.html（示例丰富，API 详细）
  • AntV G2 官网：https://antv.vision/zh/docs/g2/intro/（图形语法讲解清晰）
• 地图数据 ：
  • 阿里云数据可视化：https://datav.aliyun.com/portal/school/atlas/area_selector（免费下载各层级地图 JSON）
• 案例参考 ：
  • ECharts 示例库：https://echarts.apache.org/examples/zh/index.html（含代码可直接复制）
  • 掘金 "数据可视化" 专栏：https://juejin.cn/column/6844983613819510792（实战教程丰富）
• 辅助工具 ：
  • ECharts 在线编辑器：https://echarts.apache.org/examples/zh/editor.html（快速调试配置）
  • 词云图生成器：https://tendcode.com/tool/word-cloud/（无需代码生成词云图）