1. 程式人生 > >數據輸入——生成你需要的echart圖(世界地圖,氣泡圖)

數據輸入——生成你需要的echart圖(世界地圖,氣泡圖)

世界 examples www cti scatter 輸入 symbol ada rgb

上一篇文章介紹了:堆積柱狀圖、扇形圖、嵌套環形圖,現在來介紹一下:世界地圖和氣泡圖

1.世界地圖

http://echarts.baidu.com/examples/editor.html?c=map-world-dataRange

技術分享圖片

這個就不多做介紹了,大家看圖就可以了,顏色越深表示value越大,白色表示data中沒有這個國家。

2.氣泡圖

技術分享圖片

按照這張圖的意思來解釋圖中的1 2 3 4 5

1.[x軸數據(無需定義範圍),y軸數據(無需定義範圍),氣泡大小,對應的國家(鼠標放上去才會顯示),年份]

2.年份有哪幾個,對應的下面就有幾個serie來定義

3.1990年對應的是第一行,即data[0],這裏不是以上面1中的第5個元素來確定屬於那一年的

4.這裏的data[2]是指1中的data,註意看函數哦,這裏是數字太大進行縮減。

5.對屬於1990氣泡顏色的定義

這張圖可以改成這樣:

技術分享圖片

需要做的如下:

改變X軸 Y軸數據類型,添加對應的值,代碼如下

app.title = ‘氣泡圖‘;

var data = [
    [[‘澳大利亞1‘,7.7,150,‘Australia‘,1990],[‘澳大利亞2‘,7.7,270,‘Canada‘,1990]],
    [[‘加拿大1‘,8.1,230,‘Australia‘,2015],[‘加拿大2‘,8.1,350,‘Canada‘,2015]]
];

option = {
    backgroundColor: 
new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{ offset: 0, color: ‘#f7f8fa‘ }, { offset: 1, color: ‘#cdd0d5‘ }]), title: { text: ‘1990 與 2015 年各國家人均壽命與 GDP‘ }, legend: { right: 10, data: [‘1990‘, ‘2015‘] }, xAxis: { type :
‘category‘, data: [‘澳大利亞1‘,‘加拿大1‘,‘澳大利亞2‘,‘加拿大2‘] }, yAxis: { type:‘value‘ }, series: [{ name: ‘1990‘, data: data[0], type: ‘scatter‘, symbolSize: function (data) { return Math.sqrt(data[2]); }, label: { emphasis: { show: true, formatter: function (param) { return param.data[3]; }, position: ‘top‘ } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: ‘rgba(120, 36, 50, 0.5)‘, shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: ‘rgb(251, 118, 123)‘ }, { offset: 1, color: ‘rgb(204, 46, 72)‘ }]) } } }, { name: ‘2015‘, data: data[1], type: ‘scatter‘, symbolSize: function (data) { return Math.sqrt(data[2]); }, label: { emphasis: { show: true, formatter: function (param) { return param.data[3]; }, position: ‘top‘ } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: ‘rgba(25, 100, 150, 0.5)‘, shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: ‘rgb(129, 227, 238)‘ }, { offset: 1, color: ‘rgb(25, 183, 207)‘ }]) } } }] };

數據輸入——生成你需要的echart圖(世界地圖,氣泡圖)