当前位置： 首页 > news >正文

数据可视化 ECharts

news 2025/10/11 5:38:50

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

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

可视化库核心特点上手难度适用场景开源协议 / 商用情况
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 容器 IDwidth: 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 核心差异

对比维度EChartsAntV 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/（无需代码生成词云图）
http://www.dtcms.com/a/464838.html

相关文章：

  • javascript 性能优化实例一则
  • mapbox基础，使用矢量切片服务（pbf）加载line线图层
  • LLVM（Low Level Virtual Machine）介绍
  • Docker 一键部署指南：GitLab、Nacos、Redis、MySQL 与 MinIO 全解析
  • HDLBit 个人记录
  • 基于Jetson+FPGA+GMSL+AI的自动驾驶数据采集解决方案
  • 0006.C#学习笔记3-- HTML和CSS
  • 基于X86+FPGA+GPU的自动驾驶数据回灌测试解决方案
  • 在JavaScript / HTML中，Chrome报错Refused to execute inline script
  • 自动驾驶的“虚拟驾校”如何炼成？
  • 自动驾驶传感器数据录制过程中的五大系统性挑战
  • 学校网站建设开题报告书wordpress 发布说说
  • 企业如何减少由于数据不一致带来的运营成本？
  • 安卓开发APP应用程序和苹果iOS开发APP应用程序有什么区别？
  • Mac 上用 Homebrew 安装 JDK 8（适配 zsh 终端）完整教程
  • 利用小偷程序做网站企业网站开发建设
  • K8S基本命令操作
  • 【kubernetes/k8s源码分析】kube-controller-manager之node controller源码分析
  • SMOTE 算法详解：解决不平衡数据问题的有效工具
  • HGDB集群（安全版）repmgr手动切换主备库
  • 三维GIS数据转换指南：SHAPE文件到3DTiles的高效实现方案
  • K8S（三）—— 基于kubeadm 1.20版本部署Kubernetes集群与Harbor私有仓库实战
  • 宁波外贸网站制作公司手机网站建设哪家公司好
  • 【C语言实战(8)】C语言循环结构（do-while）：解锁编程新境界
  • 面向Qt/C++开发工程师的Ai提示词（附Trae示例）
  • sqlite 使用: 01-源码编译与使用
  • Django视图进阶：快捷函数、装饰器与请求响应
  • 企业营销网站的建设网站开发响应式
  • 掌握DMA基于GD32F407VE的天空星的配置
  • 基于腾讯云的物联网导盲助手设计与实现(论文+源码)