先上图，就是介样子的：
所模拟的效果就是讲左下角的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还是很容易上手的，图表丰富，接口简单。很适合像我这样的小白学习。
