什么是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用的记得搭服务器，本地的请求是不安全的。

echarts初探：了解模块化的更多相关文章

  1. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  2. 关于echarts的使用----模块化单文件引入（推荐） 与标签式单文件引入

    官网:http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts3 关于模块化单文件引入(推荐) 与标签式单文件引入

  3. echarts初探

    最近经常看到echarts,觉得很有意思,并且这个库是百度开发的,目前来说使用的也很广泛,包括百度.阿里.腾讯.网易.小米.新浪.华为.联想.美团等一大批一线互联网公司在使用,且github上的sta ...

  4. webpack echarts配置实例

    简单介绍 本例介绍怎样在webpack中构建依赖echats的项目,echarts有好几种方式引入项目: 标签单文件引入:自1.3.5開始,ECharts提供标签式引入.假设项目本身并非基于模块化开发 ...

  5. react之引用echarts

    react之引用echarts npm: npm install echarts --save 代码: import React, { Component } from 'react'; // 引入 ...

  6. ECharts模块化使用5分钟上手

    什么是EChats? 一句话: 一个数据可视化(图表)Javascript框架,详细?移步这里,类似(推荐)的有 HighCharts,其他? 嗯,先看看吧-- 快速上手: 模块化单文件引入(推荐). ...

  7. 【webpack学习笔记(一)】流行的前端模块化工具webpack初探

    从开发文件到生产文件   有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...

  8. Dojo初探之1：AMD规范，编写符合AMD规范（异步模块加载机制）的模块化JS(其中dojo采用1.11.2版本)

    一.AMD规范探索 1.AMD规范(即异步模块加载机制) 我们在接触js的时候,一般都是通过各种function来定义一些方法,让它们帮我们做一些事情,一个js可以包含很多个js,而这些functio ...

  9. Prism for WPF初探（构建简单的模块化开发框架）

    先简单的介绍一下Prism框架,引用微软官方的解释: Prism provides guidance to help you more easily design and build, flexibl ...

随机推荐

  1. Windows配置java运行环境的步骤

    jdk不同版本下载地址:http://www.oracle.com/technetwork/java/javase/archive-139210.html 1.下载你适合你电脑的jdk版本,链接如上, ...

  2. Maven学习——1、安装与修改Maven的本地仓库路径

    1.1.下载 官网 http://maven.apache.org/download.cgi 1.2.安装配置 apache-maven-3.3.3-bin.zip 解压下载的压缩包 1.3.配置环境 ...

  3. 转---Android Audio System 之一：AudioTrack如何与AudioFlinger交换音频数据

    引子 Android Framework的音频子系统中,每一个音频流对应着一个AudioTrack类的一个实例,每个AudioTrack会在创建时注册到 AudioFlinger中,由AudioFli ...

  4. C++函数中的那些坑

    平时写程序时,我们可能或多或少对一些用法感到朦胧,下面我对一些易困惑大家,或者易用错的地方作点介绍. 一.函数的一些注意点 1.函数返回类型不能是数组类型或函数类型,但可以是指向数组或函数的指针. 2 ...

  5. Probability|Given UVA - 11181（条件概率）

    题目大意:n个人去购物,要求只有r个人买东西.给你n个人每个人买东西的概率,然后要你求出这n个人中有r个人购物并且其中一个人是ni的概率pi. 类似于5个人中 抽出三个人  其中甲是这三个人中的一个的 ...

  6. 【刷题】洛谷 P3676 小清新数据结构题

    题目背景 本题时限2s,内存限制256M 题目描述 在很久很久以前,有一棵n个点的树,每个点有一个点权. 现在有q次操作,每次操作是修改一个点的点权或指定一个点,询问以这个点为根时每棵子树点权和的平方 ...

  7. [HEOI2014]人人尽说江南好 博弈论

    题面 题面 题解 感觉这题挺神仙的,根据一些奇奇怪怪的证明可以得到: 最后的终止状态一定是\(m, m, m, m, .... n \% m\). 因此我们可以O(1)计算到终止状态所需步数,然后根据 ...

  8. BZOJ5315 [JSOI2018]防御网络 【仙人掌 + dp】

    题目链接 BZOJ5315 题解 题目好吓人= =点仙人掌 + 斯坦纳树 我们只需求出对于所有选点的方案的斯坦纳树边长总和 \(n\)那么大当然不能状压,但是考虑一下如果这是一棵树,一个方案的贡献就是 ...

  9. 【贪心】【P5078】Tweetuzki 爱军训

    Description Tweetuzki 所在的班级有 \(n\) 名学生,座号从 \(1\) 到 \(n\).有一次,教官命令班上的 \(n\) 名学生按照座号顺序从左到右排成一排站好军姿,其中 ...

  10. 《剑指offer》— JavaScript（2）替换空格

    替换空格 题目描述 请实现一个函数,将一个字符串中的空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 实现 ...