CSS（Cascading Style Sheets，层叠样式表）描述 HTML 元素的呈现方式：颜色、大小、间距、布局。CSS 通过选择器找到元素并施加样式。

1. 三种基本选择器

2. 盒模型

每个元素都是一个“盒子”，从内到外依次是：内容 content → 内边距 padding → 边框 border → 外边距 margin。理解盒模型，才能精确控制页面布局与图表容器尺寸。

3. Flex 布局：最常用的现代布局

给容器设置 display:flex 后，其子元素会自动沿主轴排列，配合 justify-content（主轴对齐）、align-items（交叉轴对齐）、gap（间距）即可快速完成常见布局——可视化大屏的多图表排列正是它的典型应用。

4. 常用文字与颜色属性

5. display：元素的三种形态

JavaScript 是浏览器内置的编程语言，ECharts 本身就是用 JavaScript 编写的，所有图表配置也都由 JavaScript 对象表达。

1. 变量声明：var / let / const

2. 数据类型

数字 number、字符串 string、布尔 boolean、空 null、未定义 undefined、对象 object、数组 array。判断类型用 typeof，例如 typeof 3 结果为 "number"。

3. 函数：两种写法

4. 数组与对象：图表数据的“原料”

ECharts 的 series.data 几乎都是数组，数组元素常常是对象。掌握下面四个数组方法，就能灵活加工数据：

5. 流程控制：if 判断与 for 循环

6. 对象：图表数据的基本单元

7. 模板字符串（ES6）

DOM（Document Object Model，文档对象模型）把网页结构组织成一棵“节点树”。JS 通过 DOM API 找到节点、修改节点，页面就会实时变化。

1. 获取元素

2. 修改内容与样式

3. 事件监听

4. 动态创建与删除元素

5. 事件对象 e：拿到“谁触发了事件”

JSON（JavaScript Object Notation，对象表示法）是一种轻量级数据交换格式，由键值对和数组嵌套组成。服务器返回的数据、本地数据文件，大多都是 JSON。

1. JSON 的基本形态

2. 两个关键方法

3. JSON 与 ECharts 的无缝对接

教材中的图表数据常以 .json 文件存放，加载后只需一行 map 即可取出类目与数值：

4. 嵌套 JSON：对象套数组、数组套对象

5. 数据加工三连：取字段、筛选、排序

浏览器向服务器请求数据需要“网络往返”，不能立即拿到结果。JavaScript 采用异步机制：先去做别的事，等数据返回后再执行后续代码。

1. 同步 vs 异步

2. Promise 与 fetch

3. 加载中的用户体验

请求期间页面应给出“加载中”反馈。ECharts 内置了 chart.showLoading() 与 chart.hideLoading()，在异步加载前后调用，体验更完整。

4. async / await：更优雅的异步写法

数据可视化流程是一个系统化的步骤，从需求分析到分析报告，每一步都至关重要：

案例：农村电商“销售数据分析”五步走

选择依据：根据工具特点与实际需求选择——Web 端交互图表首选 ECharts；数据处理深度分析用 Python；高度定制用 D3；企业级报表用 FineBI / Power BI。

常见图表具有两个核心价值：一是直观呈现复杂数据；二是帮助决策者快速理解信息，辅助高效决策。图表类型由系列（series）中的 type 属性决定：

图表选择小练习：问题 → 该选哪种图？

ECharts 是一款基于 JavaScript 的开源可视化库，通过 HTML 页面中的 <script> 标签引入，与 Web 前端技术紧密相连。

Web（World Wide Web，万维网）是由众多通过超文本传输协议（HTTP）相互链接的文档和资源组成的全球性信息系统。在 Web 网页中，开发者使用 JavaScript 创建和配置图表，图表被渲染在 HTML 元素中（通常是 <div> 标签内）；利用 JavaScript 操作 DOM，可动态修改图表的配置和数据，实现用户交互时图表的实时更新和响应。

ECharts 还可与 React、Vue、Angular 等前端框架无缝集成，嵌入现代 Web 应用。在数据驱动的 Web 应用时代，ECharts 增强了数据表达力，为用户提供直观、互动的数据分析界面。

在 ECharts 的架构体系中，基于轻量级的 Canvas 类库 ZRender，以及组件、图类和接口这三个核心模块，共同构建了一个高效且灵活的数据可视化框架。

图表开发的核心任务在于配置项属性的设定，其中最关键的是系列（series）中的图表类型属性（type）。记住图表对应的英文术语是编写配置项的基础：

组件是构成图表的基本元素，它决定图表的外观布局和支撑图表与用户之间的交互行为。组件类型丰富、分工明确，开发者通过组合和配置组件，实现高度自定义、灵活互动的图表效果。

网格组件是直角坐标系下用于定义绘图区域的关键组件。它控制图表中坐标轴和系列图形的显示区域，通过设置边距、大小和背景等属性，精确布置图表的布局结构，也是实现多图表并排或叠加显示的基础。

支持配置多个 grid（数组形式）实现复杂图表布局；containLabel 可将刻度标签纳入网格计算，避免标签溢出容器。

坐标轴是数据展示的基准线，决定了数据如何映射到图表空间。ECharts 提供灵活的坐标轴配置，支持不同类型的轴，允许设置坐标轴的位置、范围、刻度密度、标签样式以及轴线的显示方式等，便于精细化调整。

标题组件用于展示图表的主标题与副标题，ECharts 支持配置多个标题（数组形式）便于复杂排版。可灵活设置位置、样式、对齐方式，使图表层次清晰。

图例组件用于展示图表中各系列的标识信息（标记、颜色和名称），帮助用户识别数据系列。图例具备交互功能，点击可控制系列的显示和隐藏；当图例项较多时可启用 scroll 滚动模式（横向或纵向）。

提示框组件用于提供图表数据的详细信息展示功能。可设置在全局（tooltip）、坐标系中（grid.tooltip 等）、系列中（series.tooltip）以及系列的每个数据项中（series.data.tooltip）。

标记点组件用于突出展示数据关键信息与异常值，配置在系列（series）内部。标记点位置有三种指定方式：① 使用 type: 'max' / 'min' / 'average' 内置标记；② 使用 coord 指定数据点坐标；③ 直接指定 x / y 像素位置。

标记线组件用于绘制参考线，同样配置在系列内部，常用于标注平均值、目标值、阈值等。

饼图主要用于展示不同类目数据在总和中的占比，每个扇区的弧度表示数据数量的比例。圆环图通过将 radius 设置为数组（如 ['40%', '65%']）实现，能够更有效地利用空间并突出各部分的比例关系，适用于需要清晰展示多个数据类别且空间有限的情况。

南丁格尔玫瑰图将数值映射到扇区半径（roseType: \'radius\'），能够更有效地传达数据的层次和重要性。在数据差异较大的情况下，玫瑰图比普通饼图更能突出对比效果，适用于需要强调数据相对大小的场景，如各省份快递包裹数量对比。

散点图由多个“点”组成，直观观察数据的变化趋势与分布特征。数据格式为二维数组 [[x1, y1], [x2, y2], …]；气泡图是特殊的散点图，通过 symbolSize 把第三个维度映射到气泡大小（配合 visualMap 还可映射颜色），从而在二维平面上展示三个变量的关系。

多系列散点图可在同一坐标系中绘制不同系列的点集，展示多组数据之间的关系和分布特征，适用于揭示数据集群、趋势以及不同变量间的相关性。

漏斗图通过连续阶段构成类似漏斗的形状，清晰展示数据在各个阶段的变化和转化情况，适用于业务流程比较规范、周期长、环节多的流程分析。

多个漏斗图共存：需在系列配置中定义多个对象（多组 series），实现左右对照的漏斗对比。

行为事件指在特定交互动作下所触发的预设功能（如单击工具栏中的按钮、图例项等），通过组件交互直接控制图表的显示状态和数据呈现。行为事件不会自动触发，必须在代码中手动调用 myChart.dispatchAction({ type, … }) 触发。

两类事件是一体两面：鼠标事件负责监听用户行为，行为事件负责控制图表状态，组合使用可实现循环高亮等复杂交互。

相似之处：① 都作用于图表元素（数据项、系列、图形区域）；② 都可用于交互处理；③ 都能实现图表联动；④ 都可通过 dataIndex、seriesIndex 等定位到具体的数据图形。

雷达图是一种多维数据可视化图表，常用于展示不同类别的多维度数据，适合数据对比、分类问题（如地区、产品或人群偏好分析）。数据结构核心是指标轴与数据系列：每一条轴线表示一个维度，每个数据系列表示一个对象的多维数据。

案例分析要点：各地区用户购买偏好呈现显著地域特征——上海用户更偏爱购买柠檬，广东用户偏爱沃柑、红枸杞和砂糖橘，这与当地饮食习惯、文化背景及季节性因素有关。

矩形树图用于展示层级结构数据：整个图形由一个大矩形划分为多个子矩形，每个矩形的面积由节点数值决定，支持多层嵌套（children），直观反映数据的层级关系与比例分布，适用于地区用户分布、市场份额比较、文件存储空间占比等场景。

时间轴通过数据缩放组件 dataZoom 实现，提供交互式数据探索能力——用户可通过拖动或缩放时间范围，动态聚焦于特定时间段内的数据细节，兼具折线图的趋势表达与时间维度的动态展示，支持多个数据系列同时对比群体差异。

案例分析要点：25-34 岁和 35-49 岁年龄段用户活跃度整体较高，是平台的主要活跃群体；18-24 岁和 50-59 岁年龄段活跃度相对较低但呈一定波动性。

嵌套饼图由内环和外环组成，用于表达主类与子类之间的上下级逻辑（内环展示水果、肉类等大类，外环展示苹果、葡萄等具体品种），特别适用于市场调研、消费分析、分类结构等数据场景。实现方式是在同一 option 中定义两个饼图系列，通过不同的 radius 控制内外位置。

数据分析要点：明确层级（大类进内环）、细化品种（子类进外环）、合理配色区分（不同颜色区分类别，增强层次感与辨识度）。

词云图是基于文本数据的可视化图表，通过词语大小和颜色突出词频信息——频率越高字体越大，适合展示关键词的频率分布与重要程度，常用于用户评论分析、舆情监测、热点话题挖掘等。注意：词云图不是 ECharts 内置图表，需要额外引入 echarts-wordcloud 插件。

形状词云图（拓展）：普通词云图在方形或圆形区域内随机布局单词；形状词云图的单词布局受限于自定义图片形状——通过 maskImage 属性传入一个 Image 对象（如水果轮廓图），词语将沿形状填充排布。

案例分析要点：“超赞”“准时”“专业”“信任”“好吃”等正面词汇频率较高，用户普遍满意；也存在“不好”“不满意”等负面词，但频率明显更低。

基础仪表盘通过指针和刻度展示单一数值的圆形仪表图，直观反映指标的当前状态，适合关键性能指标（KPI）的实时监控，应用场景包括用户满意度分析、设备运行状态监测、业务目标达成度评估等。

多标题仪表盘（拓展）：与基础仪表盘的区别在于显示多个数据指标时，为每个指标配置独立的标题和详情——通过在 data 数组中为每个数据项定义 title.offsetCenter 与 detail.offsetCenter 分别设置标题和详情的位置，实现多指标布局。

主题是什么？主题是一组预定义的样式配置（配色、字体、背景、轴线、图例等）。把主题名传给 echarts.init(dom, themeName) 的第二个参数后，整个图表自动按该风格渲染，无需逐项配置颜色。

主题的使用步骤

什么是联动？当两张图表使用同一组类目轴数据（如"主要肉类销售总量"的柱状图与折线图）时，联动让鼠标在任意图表上悬停，另一张图同步显示对应年份的指示器与提示框，便于对比趋势。

方式一：指定 group ID（适合多图表）

方式二：实例数组（适合少量图表）

注意：联动依赖各图表的横轴数据一致（同为类目轴且类目相同），否则指示器位置无法对齐。

为什么需要异步加载？真实业务中数据持续变化，把数据写死在 JS 里无法更新。将数据保存为 JSON 文件，页面加载后再异步请求数据渲染图表，实现"数据与图表分离、改数据不改代码"。

jQuery 异步取数写法

JSON 数据文件示例（data/sale.json）

什么是可视化大屏？把多张图表按业务逻辑组织在同一屏幕上，用于监控中心、指挥大厅等场景。本项目大屏由三个页签组成：农村电商发展（全国快递业务量、主要农产品生产总量、电商平台数量、农村电商零售额、多品类零售额占比）、销售分析（竞争对手的市场份额、不同种类商品市场占比、订单来源占比、快递包裹数量、活跃商家数量、订单数量与销售额随时间变化、各销售环节转化率）、用户分析（部分地区的用户购买喜好、用户分布、用户偏向的农产品、不同年龄段用户活跃度、用户满意度、用户对产品或服务的评论）。

大屏页面结构

设计要点

• 深色背景（如 #0b1d34）衬托数据光效，标题与装饰线使用青绿色系；
• 网格布局（pure-g / pure-u-* 或 CSS Grid）控制每张图表的尺寸与位置，常用 1/4、1/3、1/2 等比例组合；
• 每张图表一个独立的初始化函数，配合 $.get() 统一异步取数，同一 JSON 可被多张图表共用一次请求；
• 三个页签共享头部导航，各自独立一个 HTML 页面，通过链接相互跳转。

本项目围绕销售分析、订单分析、物流分析三个方向组织数据，共使用 9 张 JSON 数据表：

数据导入统一使用 JavaScript 的 fetch() 方法读取 JSON 文件。任务可拆分为：绘制 9 张图表（任务 6.1—6.9），再组装大屏（任务 6.10）。

项目 5 用 jQuery 的 $.get() 异步取数；本项目改用原生 JavaScript 的 fetch()，无需引入任何库。fetch 返回 Promise，用 .then() 链式处理响应与数据。

堆叠条形图（不同渠道 × 不同品类）

把 x 轴设为数值轴（value）、y 轴设为类目轴（category）得到横向条形图；再在三个渠道系列中同时设置 stack: 'total'，同一类目下的系列会堆叠成一整条，直观对比各品类在三个渠道的总量与结构。

双 Y 轴组合图（每日 / 时间段销售）

销售总金额与销售数量量纲不同（元 vs 件），必须使用两个 Y 轴：yAxis 写成数组定义左右两轴，系列中用 yAxisIndex 指定挂在哪个轴上。柱状图表达金额、折线图表达数量，趋势同步可读。

data.map() 动态映射颜色

支付方式数据源为每个数据项预置了 color 属性：{ "value": 507, "name": "支付宝", "color": "#316695" }。直接传给 ECharts 无法生效，需要先用 data.map() 遍历，把颜色映射进 itemStyle.color：

emphasis 悬停高亮

物流圆环图通过 emphasis 配置数据项在悬停时的阴影效果，让被选中的数据项"浮"出来：

完成 9 张图表后，按三步组装大屏：

大屏结论示例：本周销售完成率 86%，任务接近完成；晚上时段与 3 月 8 日销售额最高；支付宝 + 手机端是主流；韵达快递承担主要配送。

大数据分析可视化平台由广东泰迪智能科技股份有限公司自主研发、基于 ECharts、用于可视化仪表盘展示，是一款适用于高校教学和各领域企业的零门槛可视化工具，主要特点如下：

• 无须编程：图表通过拖曳的方式操作，方便、快捷。
• 图表丰富：提供多种类、多样式的可交互式图表，自定义程度高。
• 模板多样：提供多个仪表盘布局和项目模板，满足多样化需求。
• 源码可查：支持查看图表源码，方便教学。
• 数据实时：支持数据定时更新，实时反映数据变化趋势。

用户登录后首先进入公共空间，这里展示所有公开大屏的信息：每个公开大屏均具备预览和复制功能——单击"复制"可将该大屏下的页面和数据一起复制到各功能模块，系统会自动添加"日期+随机数字"后缀以示区别；用户也可将自己设计好的大屏分享到公共空间供他人预览使用；自己分享的大屏可设为私有（不再公开显示）或删除（删除该大屏全部数据）。

"数据空间"模块分为数据库连接与数据文件两部分，主要用于添加 / 管理数据：

• 数据库连接：数据来源于数据库，支持 DB2、SQL Server、MySQL、Oracle、PostgreSQL 等常用数据库类型。连接成功后，数据库信息显示在数据列表中。
• 数据文件：支持本地 CSV 文件上传和数据库文件上传，上传成功并保存后，数据信息显示在列表中。

本项目需要上传 9 个 CSV 数据文件（与项目 6 的 9 张 JSON 表对应）：

"指标"通过选择上传数据文件的表单，对原数据进行构建，共 5 种方式：

以"不同时间段销售总金额与销售数量.csv"为例，选择四则运算：销售总金额 ÷ 销售数量 = 客单价（元/件），即可在指标列表中得到每个时段的客单价字段，供图表库直接调用。

"图表库"模块用于添加 / 管理图表，并对图表进行设计。平台提供的常见图表类型如下：

• 折线图：基础折线图、柱线混合图、堆叠折线图
• 柱状图：基础柱状图、堆叠柱状图、正负柱状图、横向柱状图
• 饼图：基础饼图、环形饼图、嵌套环形图
• 散点图：基础散点图、复合散点图
• 地图：区域地图、中国地图
• 其他：词云图、雷达图、仪表盘、漏斗图、河流图、热力图、旭日图、基础箱线图

在本项目中，图表库主要完成 9 张图表的创建：品类销量用基础柱状图、渠道品类用堆叠柱状图（或横向）、支付 / 物流占比用环形饼图、下单 / 优惠占比用基础饼图、每日 / 时段销售用柱线混合图、完成率用仪表盘。设计好的图表保存在"个人图表"中，供仪表盘调用。

"仪表盘"模块由仪表盘与个人图表两部分组成。仪表盘的设计分为固定布局和自由布局：

• 固定布局：主体画布由多个小画布组成，每个小画布放置一张在图表库中设计好的图表。固定布局包含 9 种可视化经典布局，每种各有特点，最多可同时展示 9 张图表。
• 自由布局：可自定义图表显示方式。通过新增自由布局、拖曳个人图表到画布中，使用边框、装饰、文本等样式装饰图表，构成丰富且极具个性搭配的图表。

本项目选择 3×3 九宫格固定布局，把 9 张图表（或其中 6 张核心图表）拖入各小画布，调整位置与大小后保存，即完成电商运营数据仪表盘的设计。

"大屏"提供默认、深色、浅色共 3 种风格的主题供选择，主要由各个仪表盘组成：大屏可选 1～6 张仪表盘，新增填写的名称为大屏显示名称；大屏可全屏展示、分享到公共空间、生成链接使用。

使用平台实现电商平台运营数据可视化的完整流程如下：