数据输入——生成你需要的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)‘
                }])
            }
        }
    }]
};

原文地址：https://www.cnblogs.com/ybf-yyj/p/8485887.html