先上图，就是介样子的：

                   

　　所模拟的效果就是讲左下角的li里面的数据取出来，然后用环形图的展示出数据。

　　看代码截图：

　　　　1.总的框架图：

　　

　　　2.循环取数据的js代码：

　　

　　3.echart提供额官方api的代码

     

　　先来说一下for循环取出的数据吧：

1  var categorie = $(".data_items ul li");
2  var categories = [];            
3      for(var i = 0;i < categorie.length;i++){
4          obj = {};
5          obj.name = $(categorie[i]).find("span").html();
6          obj.value = $(categorie[i]).find("b").html();
7          categories.push(obj);            
8       }

　　用jq的方法取出dom树上的数据，categorie是一个数组，循环这个数组，取数据。在for循环外面声明一个空数组， categories = []，里面声明一个对象（一定在里面声明），在外面声明的对象，在将obj压进数组的时候，会一直保存循环的最后一个值。然后给obj添加属性作为echart的数据接口。最后，categories.push(obj)，obj压进数组。这个还是比较简单的。categories这个数组将是我们往下面的框架中添加的数据接口的数组。就是上面图示的位置。

　下面一段是api的代码，没啥好说的，有兴趣的可以研究这个框架的数据结构，设计模式，看看它为什么这么设计这段代码：

　　

 1 // 指定图表的配置项和数据
 2         option = {
 3             tooltip: {
 4                 trigger: 'item',
 5                 formatter: "{a} <br/>{b}: {c} ({d}%)"
 6             },
 7             legend: {
 8                 orient: 'vertical',
 9                 x: 'left',
10                 data:categories
11             },
12             series: [
13                 {
14                     name:'访问来源',
15                     type:'pie',
16                     radius: ['50%', '70%'],
17                     avoidLabelOverlap: false,
18                     label: {
19                         normal: {
20                             show: false,
21                             position: 'center'
22                         },
23                         emphasis: {
24                             show: true,
25                             textStyle: {
26                                 fontSize: '30',
27                                 fontWeight: 'bold'
28                             }
29                         }
30                     },
31                     labelLine: {
32                         normal: {
33                             show: false
34                         }
35                     },
36                     data:categories
37                 }
38             ]
39         };
40 
41  // 使用刚指定的配置项和数据显示图表。
42   myChart.setOption(option);

　　结束：

　　echart还是很容易上手的，图表丰富，接口简单。很适合像我这样的小白学习。