先介绍echart:

     官网： http://echarts.baidu.com  看名字就知道是百度出品的。

      ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。具体不说了，可以看官网的介绍。

    demo如下：

　　1.

  　　  

    如图：直接引入echart.js就可以开发了。现在地址： http://echarts.baidu.com/download.html

 　2.写一个盛放图表的div

　　 

   3.复制官方提供的api代码，自己可以修改：    

效果如图：

 

我们看代码：这个图表需要传入的数据就是 我们的data数组，所以我们在实际开发的时候就需要传入需要的data；下面是另一组数据，来自模拟数据放入指定的数组中：

1.大体的结构：

这里是我们模拟的需要取数据的html结构：

下面的是js部分：

效果图这样：

做这个demo很简单,主要是框架api给的好，这里主要记录两点：

 一.js取dom的数据时，两种数据，一次循环取出，放在不同的数组中，js如下：　

　　var categorie = $(".data_items ul li");
         　　var categories = [],price =[];
         　　for(var i = 0;i < categorie.length;i++){
           　　　　//categorie[i]==>

• ....
• js 对象 转化为 jq对象
  
•            　　　　categories.push($(categorie[i]).find("span").html());
  
•            　　　　price.push($(categorie[i]).find("b").html());
  
•          　　}

    categories和price是一个数组，是为下面需要的数据接口，定义的数据；需要注意的是。循环出来的 categorie[i] （每个Li）是js对象，需要用后面的jq 的find方法，需要用$("xxx")转化一下，push方法就不多啰嗦了，向数组压进数据，每循环一次，就压进一个。

二．在模拟的异步请求数据，用的是setTimeout函数，具体的函数调用看下面具体的代码

　　function fetchData(cb) {

             　　　　// 通过 setTimeout 模拟异步加载
             　　　　setTimeout(function () {
                 　　　　　　cb({
                     　　　　　　　　categories: categories,//纯属组
                     　　　　　　　　data: price// 纯属组
                 　　　　　　});
             　　　　}, 1000);
         　　}

ｌｏｗ　Ｂ　的所有代码如下：

   ｃｏｄｅ：