echarts初探：了解模块化

时间 2019-11-13

标签 echarts 初探了解模块化繁體版

原文原文链接

什么是echarts？这是官网：http://echarts.baidu.com/javascript

简单的说就是百度提供的一些画图表的库，用它你能够简便的画出一些你想要的图表效果。html

虽然蛮好用的，但对于不知道模块化的新手（好比说我~）感受不是很好入门，我这里大概梳理一下个人认知吧，但愿能帮助到内些想尝试echarts的人。java

咱们就以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。好比你想在一个页面上显示多个图表，柱图，饼图，折线图等等，app

你须要把这些js都加载进来（每种图的js都是独立的）。而加载多个js很费时间，模块化的好处是，当模块部署完毕之后，能够用这个工具将多个模块合并在一个文件中，减小HTTP请求数。并且同一管理echarts

js，更有调理性。dom

其实上面代码中的两个”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用的记得搭服务器，本地的请求是不安全的。