可视化

ECharts 可视化组件库

当用户需要构建高交互、可组合的 Web 数据可视化、仪表盘或数据大屏，或明确要求 Apache ECharts 时，使用此 Skill。该库擅长：折线图、面积图、柱状图、条形图、饼图、环形图、南丁格尔玫瑰图、散点图、气泡图、涟漪散点图、K 线图、雷达图、热力图、箱线图、平行坐标图、树图、矩形树图、旭日图、关系图、路径图、飞线图、地图、仪表盘、漏斗图、桑基图、主题河流图、象形柱图、自定义系列图。不要用于可由 Chart.js 完成的极简图表，也不要替代专用关系图编辑器、路线地图或 3D 场景工具。

去使用

hustcc

使用643

Skill 文件

Skill

references

SKILL.md

name	echarts-viz
title	ECharts 可视化组件库
description	当用户需要构建高交互、可组合的 Web 数据可视化、仪表盘或数据大屏，或明确要求 Apache ECharts 时，使用此 Skill。该库擅长：折线图、面积图、柱状图、条形图、饼图、环形图、南丁格尔玫瑰图、散点图、气泡图、涟漪散点图、K 线图、雷达图、热力图、箱线图、平行坐标图、树图、矩形树图、旭日图、关系图、路径图、飞线图、地图、仪表盘、漏斗图、桑基图、主题河流图、象形柱图、自定义系列图。不要用于可由 Chart.js 完成的极简图表，也不要替代专用关系图编辑器、路线地图或 3D 场景工具。
keywords	echartschartvisualization数据可视化图表

ECharts 可视化组件库

概述

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

核心能力

支持的图表类型

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

图表配置规范

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

javascript

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

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

使用指南

基础用法

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

响应式设计

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

交互功能

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

依赖说明

NPM 安装

CDN 引入

html

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

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

最佳实践

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

参考资料

Ln 1, Col 1MarkdownSpaces: 2

No errors