ECharts学习总结(一)

       最近一直在看ECharts相关的内容,进展却不怎么理想,特认真总结如下:

1)

      ECharts总体框架和其中各个部分:图类、组件、接口、基础库的具有应用方法和应该把握的细节,并通过实际的例子熟悉和掌握各个控件。只有打牢基础才能真正的为下步的工作做好准备,熟练的属性代码的编程技巧,才能做出更好的专题界面。

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都是,因为文件未被合并压 缩,所有 的错误能立马定位到出错的地方从而让你

快速知道可能问题会出在哪。但这并不适合直接上线,原因就是上面说的,这样上网会被骂死的,因为传送将会花费大量的时间,用户肯定忍受不了。

 1 require.config({
 2        packages:[{
 3          name:‘echarts‘,
 4          location:‘../js/echarts‘,
 5          main:‘echarts‘
 6          },{
 7          name:‘zrender‘,
 8          location:‘../js/zrender‘,//zrender与echarts在同一级目录
 9          main:‘zrender‘
10         }
11      ]
12      });

   第二种方法是模块化单文件引入,真正上线时如果你是模块化的项目,应该用连接压缩好的单文件,也就是第二种。

但问题可能就来了,如果我只用到一个图表,如果直接用第二种方式上线可是把所有图表都打包在一起啊,就会造成资源的严重浪费,那么最真实做法是项目打包,用到什么

就打包什么,这种方法效率好。

 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,否则就没法运行了。

 

未完待续。。。。。。

 

文章来自:http://www.cnblogs.com/whsa/p/4361285.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案:鲁ICP备09046678号-3