echart 2 ,模擬資料匯入篇

2021-09-20 07:37:36 字數 1481 閱讀 6999

先上圖,就是介樣子的:

所模擬的效果就是講左下角的li裡面的資料取出來,然後用環形圖的展示出資料。

看**截圖:

1.總的框架圖:

2.迴圈取資料的js**:

3.echart提供額官方api的**

先來說一下for迴圈取出的資料吧:

1

var categorie = $(".data_items ul li");

2var categories =;

3for(var i = 0;i < categorie.length;i++);

5 obj.name = $(categorie[i]).find("span").html();

6 obj.value = $(categorie[i]).find("b").html();

7categories.push(obj);

8 }

用jq的方法取出dom樹上的資料,categorie是乙個陣列,迴圈這個陣列,取資料。在for迴圈外面宣告乙個空陣列, categories = ,裡面宣告乙個物件(一定在裡面宣告),在外面宣告的物件,在將obj壓進陣列的時候,會一直儲存迴圈的最後乙個值。然後給obj新增屬性作為echart的資料介面。最後,categories.push(obj),obj壓進陣列。這個還是比較簡單的。categories這個陣列將是我們往下面的框架中新增的資料介面的陣列。就是上面圖示的位置。

下面一段是api的**,沒啥好說的,有興趣的可以研究這個框架的資料結構,設計模式,看看它為什麼這麼設計這段**:

1

//指定圖表的配置項和資料

2 option =

: (%)"6},

7legend: ,

12series: [13,

23emphasis: 29}

30},

31labelline:

35},

36data:categories37}

38]39};

4041

//使用剛指定的配置項和資料顯示圖表。

42 mychart.setoption(option);

結束:

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

PI模擬資料配置

數值模擬範圍 zero 起始值 span 結束值 location1 按照cdt158配置 location2 模擬值每次變動的幅度值為span 0.1 千分之一 位置2的值 location3 按照cdt158配置 location4 c program files pipc inte ces r...

Json模擬資料Mockjs

npm install mockjs2.自己設計json結構data.json 3.在相同的路徑下建立mockserver.js 使用mockjs提供mock資料介面 import mock from mockjs import data from data.json 返回goods的介面 mock...

mockjs模擬資料請求

一般專案的方法 vue cli專案中 在src目錄裡面建立乙個utils mock.js 相關.vue檔案引用 import utils mock.js import axios from axios 另main.js引入import axios from axios 注意這點,使用 vue.pro...