一.Echart基本图表显示与地图显示
将各种图形拆分为交互组件,各组件接收特定参数实现效果
- echart实例生成
每个echart都实例依赖于一个dom容器,且每个dom上仅可以有一个echart实例
初始化实例方法Init(1,2,3)用于在dom上初始化echart实例
注:对于隐藏的dom可能导致获取不到height无法实例化,一般通过resize方法重新设定
setOption用来为实例设置表现配置项
包括全局样式,series设置(图标类型以及数据样式)
异步数据加载与更新
一般会设置载入数据前后的opt(showLoading与hideLoading)
图表联动
联动是指多个表格呈现统一数据时,数据在一张表格上触发的效果同时会在其他表格上触发 - 图标中加入交互组件
dataZoom控制同一个数轴的组件,会自动联动
- 事件与行为
事件分两种
点击或hover图表上的数据
事件顺序
鼠标经过表格数据:move over out
点击后立刻松开:down up click (dbclick) move
点击后按住再松开:Down move up click move
可交互组件上的行为 - 基础图表使用场景
柱状图
二维数据,但只需要比较一个维度(xAxis为定值),所以series中data接收一维数组,数据差异一目了然,适用于中小规模数据。
注:通常用户习惯认为x轴为时间,因此当x轴不为时间时考虑为不同数据使用不同颜色标记
饼状图
面积差异不如柱状图明显,因此一般用来观察数据所占比例
折线图
适用于二维大数据集,常用于观察数据趋势以及多个二维数据集比较