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

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

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

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

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

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5. </head>
  6. <body>
  7.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8.     <div id="main" style="height:400px"></div>
  9.     <!-- ECharts单文件引入 -->
  10.     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
  11.     <script type="text/javascript">
  12.         // 路径配置（第一段）
  13.         require.config({
  14.             paths: {
  15.                 echarts: 'http://echarts.baidu.com/build/dist'
  16.             }
  17.         });
  18.  
  19.         // 使用（第二段）
  20.         require(
  21.             [
  22.                 'echarts',
  23.                 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
  24.             ],
  25.             function (ec) {
  26.                 // 基于准备好的dom，初始化echarts图表
  27.                 var myChart = ec.init(document.getElementById('main')); 
  28.  
  29.                 var option = {
  30.                     tooltip: {
  31.                         show: true
  32.                     },
  33.                     legend: {
  34.                         data:['销量']
  35.                     },
  36.                     xAxis : [
  37.                         {
  38.                             type : 'category',
  39.                             data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  40.                         }
  41.                     ],
  42.                     yAxis : [
  43.                         {
  44.                             type : 'value'
  45.                         }
  46.                     ],
  47.                     series : [
  48.                         {
  49.                             "name":"销量",
  50.                             "type":"bar",
  51.                             "data":[5, 20, 40, 10, 10, 20]
  52.                         }
  53.                     ]
  54.                 };
  55.  
  56.                 // 为echarts对象加载数据
  57.                 myChart.setOption(option);
  58.             }
  59.         );
  60.     </script>
  61. </body>

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

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

js，更有调理性。

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

我们先来看看第一个require：

  1.         require.config({
  2.             paths: {
  3.                 echarts: 'http://echarts.baidu.com/build/dist'
  4.             }
  5.         });

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

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

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

  1. requirejs.config({
  2.   paths: {
  3.     fruits: 'common/fruits'
  4.   }
  5. });
  6.  
  7. // 加载一堆水果
  8. require(['fruits/apple', 'fruits/orange', 'fruits/grape', 'fruits/pears'], function(Apple, Orange, Grape, Pears){
  9.   // do sth
  10. });

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

  1. requirejs.config({
  2.   baseUrl: 'js',
  3.   paths: {
  4.     fruits: 'common/fruits'
  5.   }
  6. });

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

  1.         require(
  2.             [
  3.                 'echarts',
  4.                 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
  5.             ],
  6.             function (ec){
  7.                         //do sth
  8.             }) ;

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

  1. http://echarts.baidu.com/build/dist/echarts.js(我试了改成'echarts/echarts'也一样，至于为什么加载两遍我觉得是第一遍需要require相关的支持，第二遍就是回调函数里要用到）
  1. http://echarts.baidu.com/build/dist/chart/bar.js
  2.  
  3. 这里的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. iOS 关于MVC和MVVM设计模式的那些事

    一.概述 在 iOS 开发中,MVC(Model View Controller)是构建iOS App的标准模式,是苹果推荐的一个用来组织代码的权威范式.Apple甚至是这么说的.在MVC下,所有的对 ...

  2. LoadRunner脚本增强技巧之检查点

    检查点的设置理解起来非常简单,就是要在服务器返回的页面中检查是否存在关键信息.检查点函数的错误会导致整个脚本运行结果的失败,通过这个功能可以方便地定位脚本运行中的逻辑错误.检查点的设置通常分为两种,一 ...

  3. 第160天：Http协议的详细总结

    一.HTTP协议 超文本传输协议(HyperText Transfer Protocol),缩写HTTP.通过HTTP或者HTTPS协议请求的资源由统一资源标识符(Uniform Resource I ...

  4. resp.getWriter().print的注意点

  5. 3294 [SCOI2016]背单词

    题目描述 Lweb 面对如山的英语单词,陷入了深深的沉思,”我怎么样才能快点学完,然后去玩三国杀呢?“.这时候睿智的凤老师从远处飘来,他送给了 Lweb 一本计划册和一大缸泡椒,他的计划册是长这样的: ...

  6. [COCI2011-2012#5] POPLOCAVANJE 后缀自动机

    题面:洛谷 题解: 其实还可以用AC自动机做,但是没调出来,,,不知道发生了什么... AC自动机做法如下: 观察到如果我们对给定的每个串建AC自动机,那么直接拿大串在上面匹配,如果遇到了一个单词的终 ...

  7. 延长xss的攻击（转）

    XSS 的本质仍是一段脚本.和其他文档元素一样,页面关了一切都销毁.除非能将脚本蔓延到页面以外的地方,那样才能获得更长的生命力. 庆幸的是,从 DOM 诞生的那一天起,就已为我们准备了这个特殊的功能, ...

  8. bzoj2314: 士兵的放置（树形DP）

    0表示被父亲控制,1表示被儿子控制,2表示被自己控制.f表示最少士兵数,g表示方案数. 转移贼难写,写了好久之后写不下去了,看了一眼题解,学习了...原来还可以这么搞 比如求f[i][1]的时候,要在 ...

  9. 【BZOJ 2754 喵星球上的点名】

    Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 2512  Solved: 1092[Submit][Status][Discuss] Descript ...

  10. opencv 获取摄像头图像

    http://www.cnblogs.com/epirus/archive/2012/06/04/2535190.html #include "stdafx.h" #include ...