Echarts简单介绍

开发工具与关键技术：VS

作者：黄 金 燕 

班级：18级（4）班

撰写时间：2019.4.22

一.Echarts中的事件和行为
在 ECharts 的图表中用户的操作都会有相应的事件，开发者可以监听这些事件然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。
在 ECharts 3 中绑定事件跟 2 一样都是通过 on 方法，但是事件名称比 2 更加简单了，跟 dom 事件一样事件名就是全小写的字符串，如下是一个绑定点击操作的示例。
ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 ‘legendselectchanged’ 事件（这里需要注意切换图例开关是不会触发’legendselected’事件的），数据区域缩放时触发的 ‘datazoom’ 事件等等。
二.移动端自适应
ECharts 工作在用户指定高宽的 dom 节点（容器）中，ECharts 的『组件』和『系列』都在这个 dom 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 dom 文档流布局，而是实现简单容易理解的类似绝对布局。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。
另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要ECharts 内部组件随着容器尺寸变化而变化的能力。
为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 CSS Media Query 的自适应能力。
Echarts组件的定位和布局
1.大部分【组件】和【系列】会遵循两种定位方式
1.left
2.right
3.top
4.bottom
5.widtd
6.height
2.这六个量中，每个量都可以是【绝对值】或者【百分比】或者【位置描述】
绝对值：单位是浏览器像素（px）, 用number 形式书写（不写单位）
例子：{ left:
50, height: 400 }
百分比：表示占dom容器高度的百分之多少，用string形式书写。
例子：{right:
‘30%’ , bottom: ‘40%’}
位置描述：
可以设置 left: ‘center’, 表示水平居中。
可以设置 top: ‘middle’, 表示垂直居中。
3.这六个量的概念，和css中六个量的概念类似：
Left: 距离 dom
容器左边界的距离
Ringht: 距离 dom 容器右边界的距离
Top: 距离 dom 容器上边界的距离
Bottom: 距离 dom 容器下边的距离
Width: 宽度
Height: 高度
在横向，left、right、width三个中，只需要两个量有值即可，因为任两个量可以决定组件的位置和大小，例如：left 和 right 或者 width
都可以决定组件的位置和大小。纵向，top、bottom、height三个量，和横向类同不赘述。
1.Center/radius定位方式：
Center：是一个数组，表示[x , y],其中,x、y可以是【绝对值】或者【百分比】，含义和前述相同
Radius: 是一个数组，表示【内半径，外半径】，其中，内外半径可以是【绝对值】或者【百分比】，含义和前述相同。
在自适应容器大小时，百分比设置是很有用的。
2.横向（horizontal）和纵向（vertixal）
ECharts的『外观狭长』型的组件（如 legend、visualMap、dataZoom、timeline等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。
横纵向布局的设置，一般在『组件』或者『系列』的 orient 或者 layout 配置项上，设置为 ‘horizontal’ 或者 ‘vertical’。
三.鼠标事件的处理
Echarts支持常规的鼠标事件类型，包括 ‘click’ , ‘dblclick’ , ‘mousedown’ , ‘mousemove’ , ‘mouseup’ , ‘mouseover’
, ‘mouseout’ 事件，下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例