echart(2),模擬數據導入篇

先上圖，就是介樣子的：

                   

　　所模擬的效果就是講左下角的li里面的數據取出來，然后用環形圖的展示出數據。

　　看代碼截圖：

　　　　1.總的框架圖：

　　

　　　2.循環取數據的js代碼：

　　

　　3.echart提供額官方api的代碼

     

　　先來說一下for循環取出的數據吧：

 var categorie = $(".data_items ul li");
 var categories = [];            
     for(var i = 0;i < categorie.length;i++){
         obj = {};
         obj.name = $(categorie[i]).find("span").html();
         obj.value = $(categorie[i]).find("b").html();
         categories.push(obj);            
      }

　　用jq的方法取出dom樹上的數據，categorie是一個數組，循環這個數組，取數據。在for循環外面聲明一個空數組， categories = []，里面聲明一個對象（一定在里面聲明），在外面聲明的對象，在將obj壓進數組的時候，會一直保存循環的最后一個值。然后給obj添加屬性作為echart的數據接口。最后，categories.push(obj)，obj壓進數組。這個還是比較簡單的。categories這個數組將是我們往下面的框架中添加的數據接口的數組。就是上面圖示的位置。

　下面一段是api的代碼，沒啥好說的，有興趣的可以研究這個框架的數據結構，設計模式，看看它為什么這么設計這段代碼：

　　

// 指定圖表的配置項和數據
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:categories
            },
            series: [
                {
                    name:'訪問來源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:categories
                }
            ]
        };

 // 使用剛指定的配置項和數據顯示圖表。
  myChart.setOption(option);

　　結束：

　　echart還是很容易上手的，圖表豐富，接口簡單。很適合像我這樣的小白學習。