1. 程式人生 > >數據輸入——生成你需要的echart圖(堆積柱狀圖、扇形圖、嵌套環形圖)

數據輸入——生成你需要的echart圖(堆積柱狀圖、扇形圖、嵌套環形圖)

wid html 矩形 lan class nes bar target AC

最近論文需要一些比較直觀的圖表, 發現echart做出來的圖還是比較美觀的,這裏介紹如何修改數據生成你需要的echart圖。

1.堆積柱狀圖:

http://echarts.baidu.com/examples/editor.html?c=bar-stack

技術分享圖片

以上的類型的顏色是自動分配的,stack屬性可以將同一類型的數據放在一個矩形圖中。

2.扇形圖

http://echarts.baidu.com/examples/editor.html?c=pie-legend

技術分享圖片

1---->隨機生成扇形圖中的

2---->隨機生成對應名字的數量

3---->顯示幾個名字在圖形中

function代碼可以改為下面代碼樣式,來傳入自己的數據:

function genData(count) {
    var nameList = [
        ‘兒童‘, ‘無標記‘, ‘災難‘, ‘戲曲‘, ‘傳記‘, ‘戰爭‘, ‘家庭‘, ‘歷史‘, ‘科幻‘, ‘懸疑‘, ‘武俠‘, ‘冒險‘, ‘古裝‘, ‘鬼怪‘, ‘愛情‘, ‘動作‘, ‘動畫‘, ‘奇幻‘, ‘劇情‘, ‘驚悚‘, ‘犯罪‘, ‘運動‘, ‘短片‘, ‘喜劇‘,‘同性‘,‘恐怖‘
    ];
    var legendData = [];
    var seriesData = [];
    var list_1=[4,20,2,2,2,14,16,23,11,39,17,15 ,64,2,137,22,8,36,231,9,12,1,14,18,1,1]
    
var selected = {}; for (var i = 0; i < 26; i++) { name =nameList[i]; legendData.push(name); seriesData.push({ name: name, value: list_1[i] }); selected[name] = i <27; } return { legendData: legendData, seriesData: seriesData, selected: selected }; }

3.嵌套環形圖

http://echarts.baidu.com/examples/editor.html?c=pie-nest

技術分享圖片

selected表示哪一個被選中,上面的data表示內圓,是外面環的總和,從上到下要按順序排列即可(見上圖),當然你也可以不這樣排列,但是這樣就得不到對應的效果圖。

數據輸入——生成你需要的echart圖(堆積柱狀圖、扇形圖、嵌套環形圖)