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

    

　　　这就是九宫格自由布局，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，否则就没法运行了。

未完待续。。。。。。