ECharts学习总结（三）-----基本概念分析

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近一直在看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大多数组件都能支持称为“九宫格自由布局”的方式，怎么理解？那些组件支持？