visualization¶

3. 图¶

3.1 ECharts¶

ECharts

ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库.支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

简单配置

1.Head内通过script引入ECharts3的js：2.为 ECharts 准备一个具备大小（宽高）的 DOM : 3.初始化echarts实例var myChart = echarts.init(document.getElementById(‘main’)); 4.设置Option中参数，指定图表的配置项和数据 5.使用setoption生成图表显示图表：myChart.setOption(option);

图表名词

line：折线图，堆积折线图，区域图，堆积区域图。
bar：柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
scatter：散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图
k：K线图，蜡烛图。常用于展现股票交易数据。
pie：饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式
radar：雷达图，填充雷达图。高维度数据展现的常用图表。
chord：和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据
force ：力导布局图。常用于展现复杂关系网络聚类布局。
map：地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。
gauge：仪表盘。用于展现关键指标数据，常见于BI类系统。
funnel：漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化，常见于BI类系统。
evnetRiver：事件河流图。常用于展示具有时间属性的多个事件，以及事件随时间的演化。
treemap：矩形式树状结构图，简称：矩形树图。用于展示树形数据结构，优势是能最大限度展示节点的尺寸特征。
venn：韦恩图。用于展示集合以及它们的交集。

折线图的折线平滑显示

series: [    smooth: true,]

设置图例的形状

修改图例的icon，自带的有’circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’

legend : { //=========圖表控件                    show : true,                    data : [ {                        name : '负载',                        icon : 'rect'                    },                   {                        name : '用户名',                        icon : 'roundRect'                    } ]                }

3.2 canvas¶

简介：

是H5新增的组件，就像一块幕布，一个可以使用脚本（通常为Javascript）在其中绘制图形的HTML元素，他可以用来制作各种图、表，或者一些动画，同时还可以实现动画、缩放、各种过滤和像素转换等高级操作。

特点：

canvas 元素是html5的核心功能之一，使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
每次更改某个canvas元素，此canvas元素都需要整体重绘。
无法只修改某个canvas元素的某一部份。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas 元素本身没有绘图能力。

SVG与Canvas比较¶

svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。
svg 支持事件处理器，而 canvas 不支持事件处理器。
svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。
canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。
canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
canvas 适合开发游戏，svg 不适合游戏应用。

canvas 和 svg 的事件绑定¶

canvas 和 svg 都是前端技术，用于图形和可视化。但它们的工作方式和事件绑定有很大的不同。下面是它们之间在事件绑定方面的主要区别：

结构和原理：
- Canvas：Canvas 是基于位图的，它允许你在一个画布上绘制像素。当你在 canvas 上绘制图形时，实际上你只是在改变画布上的像素。一旦绘制完成，canvas 不再知道你绘制了什么。所有图形都被渲染为像素，没有保留其结构。
- SVG：SVG 是基于向量的，它描述的是形状、路径、文字等。SVG 是由真正的 DOM 元素组成的，每一个 SVG 元素都是可访问和可交互的。
事件绑定：
- Canvas：由于 Canvas 是位图，它没有为你绘制的每一个图形维持一个对象或引用。如果你想为 Canvas 上的特定图形绑定事件，你需要自己来判断点击或其他事件是否发生在该图形上，这通常需要额外的代码和计算。例如，你可能需要使用数学方法来检测一个点是否在一个特定的矩形或圆形区域内。
- SVG：每一个 SVG 元素都是一个真正的 DOM 元素，因此你可以像处理其他 DOM 元素一样为其绑定事件。如果你有一个 SVG 矩形，你可以直接为这个矩形元素绑定点击事件。
事件委托：
- Canvas：Canvas 不支持事件委托，因为所有内容都被渲染为一个统一的像素画布。
- SVG：由于 SVG 是由 DOM 元素组成的，你可以使用事件委托。例如，你可以为整个 SVG 绑定一个事件，并在事件处理程序中检查事件的目标元素。
交互性和动画：
- Canvas：要在 Canvas 上创建动画或交互，你可能需要频繁地重绘整个画布，这可能会导致性能问题。
- SVG：SVG 可以使用 CSS 或 JavaScript 进行动画处理，并且只有修改的部分会重新渲染，这使得动画和交互效果更加流畅。

总结：Canvas 和 SVG 在事件绑定和交互方面有显著的差异。Canvas 需要更多的手动计算来处理事件，而 SVG 则可以利用 DOM 事件系统。根据具体的需求和用例，选择最适合的技术。