數據輸入——生成你需要的echart圖(堆積柱狀圖、扇形圖、嵌套環形圖)
阿新 • • 發佈:2018-02-28
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圖(堆積柱狀圖、扇形圖、嵌套環形圖)