ECharts / Plotly · 深度入门手册

分类：可视化绘图 ｜ 难度：★★☆ 进阶 ｜ 编号：echarts

一、这是什么（一句话用途）

Web 交互图表库，做可缩放/悬停/联动的动态可视化，适合网页与报告。

二、核心定位

用 JS/Python 配置数据+图形选项，渲染 Canvas/SVG 交互图；Plotly 可用 Python 直接出。

三、核心原理剖析

ECharts（Apache，JS）与 Plotly（Python/R/JS）代表"声明式交互可视化"：你用一份配置对象（option）描述"数据是什么、画什么图、坐标轴怎样、交互怎么联动"，库负责把它渲染成可在网页里缩放、悬停、框选、联动的动态图表。这种"配置即图表"的模式天然适合数据仪表盘、网页报告、可分享的交互作品。Plotly 更进一步提供 Python 高阶 API（px.bar(df)），把 DataFrame 直接变交互图，降低门槛。在建模成果展示上，它们比静态图更适合做"可探索"的数据故事，也常被嵌入网页版资料站（如本资料站）。

四、底层机制与推导

渲染管线（ECharts）：用户传入 option（含 series/xAxis/yAxis 等），ECharts 内部建一棵"图表元素树"（ZRender 图形系统），把 series 数据映射为图形原语（矩形/路径/文本）。数据更新时调 setOption（支持增量合并），引擎做脏检查只重绘变化部分，避免整图重建——这是它面对大数据量仍能流畅交互的原因。

坐标系与数据映射：以直角坐标系为例，数据点 $(x_i,y_i)$ 经标度（scale）函数映射到像素：

$$px = x_0 + \frac{x_i - x_{\min}}{x_{\max}-x_{\min}}\cdot W,\qquad py = y_0 + H - \frac{y_i - y_{\min}}{y_{\max}-y_{\min}}\cdot H$$

（SVG 坐标系 y 向下，故用 $H-$ 翻转）。悬停（tooltip）即反查鼠标像素落在哪个图元并取回其绑定数据。

Plotly：Python 端 px.bar(df) 把 DataFrame 转为一组 trace 结构，经 plotly.js（同样基于 SVG/Canvas）渲染；fig.show() 启动本地 Web 视图或导出 HTML，交互逻辑由前端 JS 接管，与 Python 已无关。

五、上手步骤

1. 引 ECharts 库或 pip plotly
2. 准备数据(数组/字典)
3. 配置 option(series/axis)
4. setOption 渲染(或 fig.show)
5. 导出 HTML/图片

六、关键命令 / 语法 / 界面要点

// ECharts
option={{xAxis:{type:'category',data},yAxis:{},series:[{type:'bar',data}]}};
myChart.setOption(option);
# Plotly
import plotly.express as px; px.bar(df).show()

七、最小可跑示例

给一组城市数据配 option，渲染出可悬停的柱状图；Plotly 一行 px.line(df) 出交互线图。

八、学习资源 / 去哪学

Apache ECharts（JS，免费）、Plotly（Python/R/JS）；都开源；适合网页/报告嵌入。

九、常见坑（避坑清单）

• ECharts 需前端环境
• 数据格式要匹配 series 类型
• Plotly 离线需装包
• 过度交互影响阅读

十、怎么算用好了

悬停看数值、缩放看细节；导出 HTML 可分享。

十一、能跑哪些建模算法

产出：交互可视化、网页图表、动态报告。

---

本手册由「工具入门手册生成器」自动产出（深度版），与算法深度手册同套体系。

实战案例

ECharts 交互图表实战

场景：网页版论文附件需展示可缩放的时间序列与可下钻的柱状图。
任务：用 ECharts 绘制带 dataZoom 的销量趋势图。

完整代码（javascript）

const chart = echarts.init(document.getElementById('main'));
chart.setOption({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: months },
  yAxis: { type: 'value' },
  dataZoom: [{ type: 'slider' }, { type: 'inside' }],
  series: [{
    name: '销量', type: 'line', smooth: true,
    data: sales,
    markLine: { data: [{ type: 'average', name: '均值' }] }
  }]
});
window.addEventListener('resize', () => chart.resize());

运行效果

特性	说明
dataZoom滑块	拖动查看任意区间
鼠标滚轮缩放	局部放大细节
均值标线	一眼看出基准
自适应	窗口缩放重绘
生成的网页可直接嵌入论文附件或答辩PPT。