你的位置:首页 > Java教程

[Java教程]echarts初探:了解模块化


什么是echarts?这是官网:http://echarts.baidu.com/

简单的说就是百度提供的一些画图表的库,用它你可以简便的画出一些你想要的图表效果。

虽然蛮好用的,但对于不知道模块化的新手(比如说我~)感觉不是很好入门,我这里大概梳理一下我的认知吧,希望能帮助到内些想尝试echarts的人。

我们就以echarts首页的教程为例(其实人家已经写的很好了):http://echarts.baidu.com/doc/start.html

我直接粘一段里面的代码:

<!DOCTYPE html><head>  <meta charset="utf-8">  <title>ECharts</title></head><body>  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->  <div id="main" style="height:400px"></div>  <!-- ECharts单文件引入 -->  <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>  <script type="text/javascript">    // 路径配置(第一段)    require.config({      paths: {        echarts: 'http://echarts.baidu.com/build/dist'      }    });        // 使用(第二段)    require(      [        'echarts',        'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载      ],      function (ec) {        // 基于准备好的dom,初始化echarts图表        var myChart = ec.init(document.getElementById('main'));                 var option = {          tooltip: {            show: true          },          legend: {            data:['销量']          },          xAxis : [            {              type : 'category',              data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]            }          ],          yAxis : [            {              type : 'value'            }          ],          series : [            {              "name":"销量",              "type":"bar",              "data":[5, 20, 40, 10, 10, 20]            }          ]        };            // 为echarts对象加载数据         myChart.setOption(option);       }    );  </script></body>

大家可以看到路径配置和使用里面都有”require“,这就是模块化的东西。echarts为啥要用模块化?因为你可能在一个js里用到多个js。比如你想在一个页面上显示多个图表,柱图,饼图,折线图等等,

你需要把这些js都加载进来(每种图的js都是独立的)。而加载多个js很费时间,模块化的好处是,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数。而且同一管理

js,更有调理性。

其实上面代码中的两个”require“是干啥的已经注释的很清楚了。其实就是先总体上配一下路径,然后再根据配的路径加载需要的js进行使用。

我们先来看看第一个require:

    require.config({      paths: {        echarts: 'http://echarts.baidu.com/build/dist'      }    });

首先看这句路径的设置,你可以理解为把那一长串路径用一个变量”echarts“代表了。设置路径有利于简化之后的加载,如果你不设置路径可能是这样的:

// 加载一堆水果require(['common/fruits/apple', 'common/fruits/orange', 'common/fruits/grape', 'common/fruits/pears'], function(Apple, Orange, Grape, Pears){ // do sth});

你设置路径之后就是这样的:

requirejs.config({ paths: {  fruits: 'common/fruits' }});// 加载一堆水果require(['fruits/apple', 'fruits/orange', 'fruits/grape', 'fruits/pears'], function(Apple, Orange, Grape, Pears){ // do sth});

你还可以设置一个baseUrl来限定这些路径的先前路径(比如你这些js都放在一个叫”js“的文件夹下面)

requirejs.config({ baseUrl: 'js', paths: {  fruits: 'common/fruits' }});

明白了路径的设置以后我们再来看第二段,我简写一下:

    require(      [        'echarts',        'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载      ],      function (ec){            //do sth      }) ;

这段代码就是加载js,然后在回调函数中使用它们。由于我们刚才已经设置了路径,所以这里加载的两个js的路径其实是:

http://echarts.baidu.com/build/dist/echarts.js(我试了改成'echarts/echarts'也一样,至于为什么加载两遍我觉得是第一遍需要require相关的支持,第二遍就是回调函数里要用到)
http://echarts.baidu.com/build/dist/chart/bar.js

这里的js后缀是会帮你自动补上的,你自己加了反而会出错,它会以为你不想使用设置的路径,之后的回调函数的参数就是你加载的js模块。

回调函数中 var myChart = ec.init(document.getElementById('main')); 这句就是对echarts对象的实例化。
option你可以理解为为加载的图表设置参数,最后用 myChart.setOption(option); 将实例化的对象和设置的参数绑定。

其实echarts一些简单的使用就是一下这么个流程:

1.echarts单文件引入

2.用require.config配置路径

3.用require加载你要用的js(按需加载)

在回调函数中:

  4.实例化echarts对象

  5.依照自己的数据给option设置参数

  6.将echarts对象和option绑定,加载数据

大功告成。但其实模块不是光有require的,require只是使用,还需要define来定义模块才行,你可以看一下echarts的那些图表库源码,都是用define包裹住的。

想要了解更多模块化可以看 requireJS官网:http://www.requirejs.cn/

还有就是要想下载echarts用的记得搭服务器,本地的请求是不安全的。