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

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

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)'
                }])
            }
        }
    }]
};