ECharts 可视化组件库

概述

本 Skill 基于 Apache ECharts —— 一个功能强大、开源的 JavaScript 可视化库，为平台提供丰富的图表组件能力。

核心能力

支持的图表类型

• 基础图表：折线图、柱状图、饼图、散点图
• 统计图表：盒须图、热力图、K线图
• 关系图表：树图、桑基图、关系图
• 地图可视化：地图、轨迹图、3D 地图
• 高级图表：仪表盘、漏斗图、雷达图、象形柱图

图表配置规范

所有 ECharts 图表使用统一的配置结构：

{  // 标题配置  title: {    text: '图表标题',    subtext: '副标题'  },  // 图例配置  legend: {    data: ['系列1', '系列2']  },  // 提示框配置  tooltip: {    trigger: 'axis'  },  // 数据集（推荐方式）  dataset: {    source: [      ['维度', '数值1', '数值2'],      ['A', 10, 20],      ['B', 30, 40]    ]  },  // 系列配置  series: [...],  // 坐标轴配置  xAxis: {...},  yAxis: {...}}

使用指南

基础用法

1. 选择图表类型：根据数据特征选择合适的图表类型
2. 准备数据：按 ECharts dataset 格式组织数据
3. 配置选项：设置 title、legend、tooltip 等通用配置
4. 定制样式：通过 color、theme 调整视觉风格

响应式设计

ECharts 图表默认支持响应式，容器尺寸变化时自动重绘。

交互功能

• 数据筛选：通过 dataZoom 实现区域缩放
• 图表联动：多图表间通过 connect 实现联动
• 点击事件：支持 drill-down 和下钻分析

依赖说明

NPM 安装

npm install echarts

import * as echarts from 'echarts';

CDN 引入

jsDelivr CDN（推荐）

<​!-- 完整版 --​><​script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"​><​/script​>
<​!-- 按需引入核心（需配合图表组件） --​><​script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.core.min.js"​><​/script​>

unpkg CDN

<​script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"​><​/script​>

cdnjs CDN

<​script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"​><​/script​>

最佳实践

1. 数据格式化：优先使用 dataset 管理数据，便于系列与维度映射
2. 性能优化：大数据量时启用 sampling 或 progressive 渲染
3. 主题定制：使用 theme 配置统一下午视觉风格
4. 移动端适配：设置 responsive 规则优化移动端体验

参考资料

• ECharts 官方文档
• ECharts 示例
• 详细使用指南