前端可视化¶

ECharts¶

ECharts 是百度开源的纯 Javascript 图表库，是目前最流行、功能最强大的前端图表库之一。

核心特性¶

图表类型丰富: 支持折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等。
交互组件: 提供标题、气泡提示、图例、值域、数据区域、时间轴、工具箱等可交互组件，支持多图表、组件的联动和混搭。

图表类型 (chart type)¶

line：折线图，堆积折线图，区域图，堆积区域图。
bar：柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
scatter：散点图，气泡图。当散点图的数据维度映射到大小时，即为气泡图。
k：K线图，常用于展现股票交易数据。
pie：饼图，圆环图。支持南丁格尔玫瑰图模式。
radar：雷达图，填充雷达图，常用于高维度数据展现。
chord：和弦图，常用于展现关系数据。
force ：力导向布局图，常用于展现复杂关系网络聚类。
map：地图，内置世界、中国及各省市地图数据，可通过标准 GeoJson 扩展。
gauge：仪表盘，用于展现关键指标数据。
funnel：漏斗图，用于展现数据的流程变化。
eventRiver：事件河流图，用于展示带时间属性的多个事件及其演化。
treemap：矩形树图，用于展示树形数据结构，并突出节点的尺寸特征。
venn：韦恩图，用于展示集合及其交集。

快速上手¶

引入JS文件: 在 HTML 的 <head> 中通过 <script> 标签引入 ECharts 的 JS 文件。
准备DOM容器: 创建一个具有明确宽度和高度的 DOM 元素（通常是 <div>）。
初始化实例: 调用 echarts.init() 方法初始化 ECharts 实例。
```
var myChart = echarts.init(document.getElementById('main'));
```
配置图表: 创建一个 option 对象，在其中定义图表的配置项和数据。
渲染图表: 调用实例的 setOption() 方法，将配置项应用到图表上。
```
myChart.setOption(option);
```

常用配置¶

折线图平滑显示

series: [{
    smooth: true,
    // ... 其他配置
}]

自定义图例形状

通过 legend.data 中的 icon 属性可以修改图例的形状，可选值包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'。

legend: {
    show: true,
    data: [{
        name: '负载',
        icon: 'rect' // 设置为矩形
    }, {
        name: '用户名',
        icon: 'roundRect' // 设置为圆角矩形
    }]
}

Canvas¶

简介¶

Canvas 是 HTML5 新增的核心元素，它提供了一个可以通过 JavaScript 绘制图形的矩形区域（画布）。开发者可以控制画布上的每一个像素，用于制作图表、动画、游戏或进行图像处理。

核心特点¶

依赖分辨率: Canvas 是位图，在放大时会失真。
动态渲染: 每次修改都需要重绘整个或部分画布。
无DOM结构: 画布上的图形不是 DOM 元素，无法单独绑定事件或通过 CSS 控制。
强大的API: 提供多种绘制路径、矩形、圆形、字符以及添加图像的方法。
像素级操作: 可以对图像进行像素级的处理，实现滤镜、色彩转换等高级功能。

面试题¶

Q: SVG 和 Canvas 有什么核心区别？¶

特性	SVG (Scalable Vector Graphics)	Canvas
底层技术	矢量图形，基于 XML 描述图形。	位图，基于像素，通过 JavaScript 绘制。
缩放	无损缩放，放大后不失真。	有损缩放，放大后会变得模糊或像素化。
DOM结构	每个图形都是一个独立的 DOM 元素。	所有图形都在单一的 DOM 元素 `<canvas>` 内。
事件处理	支持，可以直接为每个图形元素绑定事件。	不支持，需要手动计算坐标来判断事件目标。
文本	独立、可编辑、可搜索的文本节点。	文本是渲染在画布上的像素，不可编辑和搜索。
性能	适合静态、低复杂度的图形，DOM 节点过多时性能下降。	适合高频重绘的场景，如游戏、复杂动画。
适用场景	图表、地图、图标等需要高保真和交互的场景。	游戏、数据可视化、图像处理等像素密集的场景。
文件格式	可以 `.svg` 格式保存，或直接嵌入 HTML。	可以通过 API 导出为 `.png`、`.jpg` 等图片格式。

Q: Canvas 和 SVG 的事件绑定机制有何不同？¶

核心差异在于它们的结构模型：

SVG: 基于 DOM 的事件模型
- 原理: SVG 中的每一个图形（如 <rect>, <circle>, <path>）都是一个独立的 DOM 元素。
- 事件绑定: 你可以像操作普通 HTML 元素一样，直接使用 addEventListener 为每一个 SVG 图形绑定事件处理器。
- 事件委托: 支持事件委托，可以在父级 SVG 容器上监听事件，通过 event.target 判断事件源。
- 优势: 事件处理直观、简单，符合前端开发者熟悉的 DOM 操作模式。
Canvas: 基于坐标的事件模型
- 原理: Canvas 是一个单一的 HTML 元素，它本身就像一块画板。一旦图形被绘制上去，它就变成了画布的一部分（一堆像素），系统并不知道那里曾经是一个“矩形”或“圆形”。
- 事件绑定: 你只能在 <canvas> 元素本身上监听事件（如 click）。
- 事件判断: 当事件触发时，你需要手动编写逻辑来判断事件发生的坐标（例如 event.clientX, event.clientY）是否落在你绘制的某个图形的区域内。这通常需要自己维护一个包含所有图形位置、尺寸等信息的列表，并进行碰撞检测计算。
- 优势: 由于没有庞大的 DOM 结构，对于大量图形的场景，渲染性能更高。

总结

对比项	SVG	Canvas
事件模型	DOM 事件模型	坐标计算模型
实现方式	直接对图形元素 `addEventListener`	对 `<canvas>` 元素 `addEventListener`，然后手动判断坐标
复杂度	简单直观	复杂，需要自己实现碰撞检测和状态管理
交互性	强，天然支持 CSS 的 `:hover` 等伪类	弱，所有交互效果（如悬停高亮）都需要 JS 重绘模拟