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

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

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

    未完待续。。。。。。

     

  • 相关阅读:
    第四章 基础命令的学习
    7-7命令总结
    第三章 虚拟机的简单使用及其xshell远程工具的使用
    第二章 虚拟机的软件及其安装
    在VMware中安装CentOS系统步骤
    Pytest02-用法和调用
    Pytest01-从官方文档开始学习
    浅谈mock技术
    C/C++ malloc、calloc、realloc和alloca
    Go 知识汇总
  • 原文地址:https://www.cnblogs.com/whsa/p/4361285.html
Copyright © 2011-2022 走看看