最近一直在看ECharts相关的内容,进展却不怎么理想,特认真总结如下基础知识:
1)
ECharts总体框架和其中各个部分:图类、组件、接口、基础库的具有应用方法和应该把握的细节,并通过实际的例子熟悉和掌握各个控件。只有打牢基础才能真正的为下步的工作做好准备,熟练的属性代码的编程技巧,才能做出更好的专题界面。
Echarts底层是基于ZRender(一个全新的轻量级canvas类库),创建了坐标 系,图例,提示,工具 箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现。
2)
重点总结:要求:了解ECharts特性中列举的每一项特性,并能找到实例中的例子,并且在实例中操作。
a.) ECharts一种支持多少种图表?有多少个组件?列举出中英文名称。
共11类图表:折线图(line)、柱状图(bar)、散点图(scatter)、k线图(k)、饼图(pie)、雷达图(radar)、和炫图(chord)、力导向布局图(force)、地图(map)、仪表盘(gauge)、漏斗图(funnel)。
7种组件:标题(title)、详情气泡(tooltip)、图例(legend)、值域(dataRange)、数据区域(datazoom)、时间轴(timeline)、工具箱(toolbox)。
更加具体组件:Axis(坐标轴)、Grid(网格)、Polar(极坐标)、Title(标题)、Tooltip(提示)、 Legend(图例)、DataZoom(数据区域缩放)、DataRange(值域漫游)、Toolbox(工具箱)、Timeline(时间轴)。
官网上如下图所示:
详细划分后如下图:
b.) 哪些特性可以让用户修改图表中的数据?哪些特性帮助用户进行信息筛选(专注)?哪些特性帮助实现了用不同的方式解读同样的数据?
答:改图表中的数据:拖拽重计算、数据视图 信息筛选:图例开关、数据区域缩放功能、值域漫游
帮助了解不同的方式:动态类型切换、多图联动、多维度堆积、混搭
c.) 怎么引入ECharts?有几种方式?有什么不同?这里重点讲述其中的不同
第一种方法是packet引入,这是开发时最好的做法,不管是开发echarts还是用echarts都是,因为文件未被合并压缩,所有的错误能立马定位到出错的地方从而让你
快速知道可能问题会出在哪。但这并不适合直接上线,原因就是上面说的,文件太大,加载太慢,这样上网会被骂死的,因为传送将会花费大量的时间,用户肯定忍受不了。
require.config({
packages:[{
name:'echarts',
location:'../js/echarts',
main:'echarts'
},{
name:'zrender',
location:'../js/zrender',//zrender与echarts在同一级目录
main:'zrender'
}
]
});
第二种方法是模块化单文件引入,真正上线时如果你是模块化的项目,应该用连接压缩好的单文件,也就是第二种。
但问题可能就来了,如果我只用到一个图表,如果直接用第二种方式上线可是把所有图表都打包在一起啊,就会造成资源的严重浪费,那么最真实做法是项目打包,用到什么
就打包什么,这种方法效率好。
require.config({
paths: {
echarts: '../js/echarts', //echarts.js所在的路径
'echarts/chart/funnel': '../js/echarts' //把所需图表指向单文件
} });
配置好后可以通过动态加载使用echarts
function(ec){
var mychart=ec.init(domMain);
var option={...}
myChart.setOption(option);
}
第三种方法就是标签式单文件引入,其实还是因为使用方的环境和水平差异较大所来的。其实这个单文件的构建只是我们用一个大闭包把模块加载器和echarts打包在
一起,通过一个全局的命名空间echarts/zrender对外暴露出去而已。内部还是模块化的,只是使用方就当命名空间来用就行,这可以免去很多不熟悉模块化的开发人员在管
理各种调用时序、声明、回调之类的麻烦。
对于模块化问题大家可以多去看看CMD规范、AMD规范。
3)、第三个重点内容总结:
函数参数ec大多数组件都能支持称为“九宫格*布局”的方式,怎么理解?那些组件支持?
这就是九宫格*布局,x支持left、center和right,y 支持right、center和bottom
这样x,y就能把页面划分为9个区域,可以任意定位在一处。x/y除了支持语义文本,还能更加特殊的传入数值做绝对定位比如:{x:100, y:100}。甚至有个别组件还能支持百分比:x:‘10%’代表横向定位在总宽度*10%的位置。
注意:js数据类型没有‘10%’百分比这一说,设置时是字符串,内部逻辑会处理为百分比。
4)Formatter是万金油,可以实现高度个性化的需求,那些地方支持formatter?
首先大家要认识到Formatter是做文本格式化用的。因为不可能内置文本显示能满足所有需求,所以在做个性化定制是formatter显得尤为重要和灵活,不仅是满足格式要求,甚至可用于满足图形化的需求,功能很是强大。
最常见的是tooltip、axisLabel、itemStyle.*.label.formatter
异步回调方式填充tooltip
这就是一个异步回调的模拟,可以把setTimeout理解为一个ajax的回调。当网络请求回来内容时callback调用填充tooltip内容就是一个异步回调填充tooltip的过程。保证了交互的准确性,总之功能很强大,大家慢慢研究挖掘。
重点提示:永远别忘了数据在你自己的手里,option是你传个ec的,如果任何地方的回调变量或数据不能满足你的需求,直接从你自己的option里找。
5)如何利用dataZoom实现按需加载特定区间数据?比如显示一个全年的趋势作为dataZoom,仅加载当前选定的区间数据?dataZoom交互发生区间变化后按需请求特定区间数据并加载?
首先要理解dataZoom的两个关键属性,xAxisIndex、yAxisIndex属性用来指定缩放控制的类目轴,比如湖区全局的抽象数据,用12个月或者365天。并且要注意realtime属性,因为动态请求和交互行为,所有就不能把realtime设置成flase,否则就没法运行了。
未完待续。。。。。。