企业官网建设流程全解析

本文要点

• 基于 Apache ECharts 官网示例页最新目录逐一核实（含 v6.0 新增的 Matrix、Chord）
• 24 种核心 2D 图表 + 11 种 ECharts-GL 3D 扩展，共 35 种
• 每种图表从统计学视角解读：对应什么统计方法、解决什么分析问题
• 附 6 个可运行的统计图实战代码（箱线图、回归散点、相关矩阵、置信区间、桑基图、二元正态曲面）

一、前言：选错图表，数据分析就输在了起跑线上

做数据可视化时，最常纠结的问题是：这个场景到底该用哪种图？

很多人用 ECharts 三五年，只会 Line、Bar、Pie 三件套。实际上 ECharts 官网示例页（echarts.apache.org/examples）的左侧目录里，安安静静躺着35 种图表类型。如果从统计学的角度重新审视它们，你会发现：

• Boxplot就是教科书上的"五数概括"直接落地；
• Scatter + ecStat三行代码就能做线性/多项式/指数回归；
• Matrix（v6.0 新增）原生支持相关系数矩阵、协方差矩阵、混淆矩阵——这几乎是多元统计分析的标配；
• 3D Surface可以把二元正态分布密度曲面画出来。

两点口径说明：

1. 官网目录中的 Dataset、DataZoom、Graphic、Rich Text 属于组件/功能演示，不是图表类型，本文不计入；
2. 3D 图表（ECharts-GL）需单独引入echarts-gl库，不在主包内。

下面按统计分析任务分成六大类，逐一详解。

二、比较与趋势类（6 种）

2.1 Line 折线图

统计学定位：时间序列分析的基础工具。

典型场景：

• 单变量/多变量时间序列趋势（销量、气温、股价走势）
• 置信区间带（Confidence Band）：预测值 ± 1.96 倍标准误构成的 95% 置信区间，是统计预测结果的标准表达
• 函数图像 y = f(x)，如概率密度函数曲线
• Bump Chart（排名变化图）：多实体排名随时间的演化

实战代码：折线图 + 95% 置信区间带

原理：用两个堆叠的 area 系列实现——下层透明占位（lower 值），上层绘制区间宽度（upper - lower）。

constbase=[/* 预测值 */];constlower=base.map(v=>+(v-1.96*2).toFixed(2));// 假设标准误为 2constupper=base.map((v,i)=>+(v+1.96*2-lower[i]).toFixed(2));option={xAxis:{type:'category',data:['周一','周二','周三','周四','周五','周六','周日']},yAxis:{type:'value'},series:[{name:'lower',type:'line',stack:'ci',data:lower,lineStyle:{opacity:0},areaStyle:{opacity:0},symbol:'none'},{name:'95%置信区间',type:'line',stack:'ci',data:upper,lineStyle:{opacity:0},areaStyle:{color:'#5470c6',opacity:0.25},symbol:'none'},{name:'预测值',type:'line',data:base,lineStyle:{color:'#5470c6',width:2}}]};

2.2 Bar 柱状图

统计学定位：分类变量的描述统计与比较。

典型场景：

• 分类变量频数/频率分布（柱状图 ≈ 分类版直方图）
• 多组均值比较（配合误差棒更佳，见 Custom 系列）
• 堆叠柱状图：构成比较；百分比堆叠：相对构成比较
• 瀑布图（Waterfall）：增减量分解，如利润从期初到期末的逐项归因
• 按数值降序排列 + 累积百分比线 =帕累托图（Pareto Chart），质量管理"二八原则"的经典工具
• 极坐标柱状图（Bar on Polar）：环形比较

2.3 PictorialBar 象形柱图

统计学定位：与柱状图相同，属于图形修辞层面的增强。

典型场景：用图标（人形、水滴、山峰）替代矩形表达数值，适合大屏、汇报场景。注意：图标拉伸会造成面积感知失真，严谨统计报告中慎用。

2.4 Candlestick K线图

统计学定位：区间数据（OHLC）的波动分布展示。

典型场景：

• 金融时间序列：每个周期展示开盘(Open)、最高(High)、最低(Low)、收盘(Close)
• 本质上是一种"区间值 + 端点值"的复合统计图形，可推广到任何周期性区间数据（如每日气温的最低/最高 + 均值）

2.5 ThemeRiver 主题河流图

统计学定位：多类别时间序列的强度演变（堆叠面积图的对称流形变体）。

典型场景：

• 舆情分析：各话题热度随时间的涨落
• 音乐收听偏好演变（官网 Last.fm 示例）
• 河流的"宽度"即类别强度，对称布局降低基线漂移的视觉误导

2.6 Calendar 日历图

统计学定位：日粒度时间数据的周期性分析坐标系。

典型场景：

• 日历热力图：GitHub 提交次数、每日步数、AQI 分布
• 快速识别周内效应（周末 vs 工作日）与季节模式
• 日历坐标系上还可以叠加饼图、关系图、散点图

三、分布与相关类（4 种）⭐ 统计浓度最高

3.1 Scatter 散点图

统计学定位：双变量关系分析的第一工具，回归与聚类的可视化载体。

典型场景：

• 相关性初判：点的走向即相关方向（正/负/无相关）
• 回归分析：配合官方统计扩展库ecStat，一行配置完成线性/指数/对数/多项式回归
• 聚类分析：ecStat.clustering.kMeans聚类过程可视化
• 异常值检测：远离点云主体的离群点一目了然
• 气泡图：点的大小承载第三维变量
• 抖动散点（Jittering，v6.0 新增）：解决分类轴上点重叠问题，近似小提琴图的"裸数据"版
• 官网彩蛋：Anscombe’s quartet（安斯库姆四重奏）——四组统计量完全相同但分布迥异的数据，论证"可视化比统计量更诚实"的经典案例

实战代码：散点图 + 线性回归

<scriptsrc="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>

constdata=[[1.2