Apache ECharts（深度版）

Web 端最强开源图表库，交互炫酷

一、一句话定位

Web 端最强开源图表库，交互炫酷

二、为什么是它：设计哲学与底层逻辑

Apache ECharts 是 Web 端最强开源图表库：用 option JSON 描述图（含地图/关系/桑基/树图），canvas/SVG 双渲染、交互与动效强大、中文文档好。它面向网站/大屏/网页报告。哲学是"声明式 option + 前端渲染"，和前端框架易集成。代价是要写 JS、静态论文用不上交互、深度定制要懂前端布局——它是"网页可视化层"的选型，与"出版静态图"分工明确。## 三、渲染管线与可复现性推导
option 树 $\Omega$ 经 setOption 触发渲染循环：

$$\Omega\ \xrightarrow{\text{setOption}}\ \text{render loop}\ \xrightarrow{\text{canvas/SVG}}\ \text{pixels}$$

canvas 渲染 $O(N)$ 批量绘制适合大数据/动效；SVG 渲染 DOM 可交互但量大时慢。这也是"网站可视化用 ECharts、论文静态图用 Matplotlib"的分工依据——交互 vs 出版精度，二者目标不同。## 四、适用场景

• 要做网站/大屏/网页报告里的图
• 需要地图、动态、关系图等复杂交互
• 对外站（如本站）可视化模块

五、优点

• ✅ 开源免费，中文文档好
• ✅ 图表类型极全（含地图/关系/桑基/树图）
• ✅ 交互与动效强大，颜值高
• ✅ 和前端框架易集成

六、缺点

• ⚠️ 要写 JS，非纯数据分析友好
• ⚠️ 静态论文里用不上交互
• ⚠️ 深度定制要懂前端布局

七、上手难度

较难

八、典型用途

• 网站/大屏可视化
• 交互报告
• 地图与关系图

九、与谁搭配

数据用 Python 预处理成 JSON；前端嵌 ECharts 渲染

十、学习资源

• ECharts 官网示例与文档
• Gallery 画廊抄代码

---

本篇来自《绘图软件横评（深度版）》· 数学建模学习资料站 MCM520

9、实战案例

案例场景：用 ECharts 制作网页交互式图表，适合展示和汇报。示例采用本地自托管方式加载 echarts.min.js，不依赖任何外部 CDN；本站已托管一份副本，从 /assets/vendor/echarts/echarts.min.js 下载到与该 HTML 同目录即可离线运行。

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 本地自托管：把 echarts.min.js 放在与本文件同一目录 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('chart'));
        var option = {
            title: { text: '方案评价雷达图' },
            radar: {
                indicator: [
                    { name: '准确性', max: 100 },
                    { name: '稳定性', max: 100 },
                    { name: '效率', max: 100 },
                    { name: '可解释性', max: 100 },
                    { name: '鲁棒性', max: 100 }
                ]
            },
            series: [{
                type: 'radar',
                data: [
                    { value: [90, 85, 88, 80, 82], name: '方案A' },
                    { value: [85, 90, 82, 88, 85], name: '方案B' }
                ]
            }]
        };
        chart.setOption(option);
    </script>
</body>
</html>

---

实战案例

ECharts 热力图实战

场景：需展示 24h×7天 的网站访问热力，发现高峰时段。
任务：用 ECharts heatmap 绘制并加 visualMap。

完整代码（javascript）

option = {
  tooltip: { position: 'top' },
  grid: { height: '70%', top: '10%' },
  xAxis: { type: 'category', data: hours },
  yAxis: { type: 'category', data: days },
  visualMap: { min: 0, max: 100, calculable: true, orient: 'horizontal' },
  series: [{ type: 'heatmap', data: data,
    emphasis: { itemStyle: { shadowBlur: 10 } } }]
};

运行效果

时段	访问强度
工作日 9-11	高（红）
周末 14-16	中（黄）
凌晨 2-5	低（蓝）
热力图一眼定位高峰，配色随值渐变直观。