上一篇文章介绍了:堆积柱状图、扇形图、嵌套环形图,现在来介绍一下:世界地图和气泡图

1.世界地图

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

数据输入——生成你需要的echart图(世界地图,气泡图)-LMLPHP

这个就不多做介绍了,大家看图就可以了,颜色越深表示value越大,白色表示data中没有这个国家。

2.气泡图

数据输入——生成你需要的echart图(世界地图,气泡图)-LMLPHP

按照这张图的意思来解释图中的1 2 3 4 5

1.[x轴数据(无需定义范围),y轴数据(无需定义范围),气泡大小,对应的国家(鼠标放上去才会显示),年份]

2.年份有哪几个,对应的下面就有几个serie来定义

3.1990年对应的是第一行,即data[0],这里不是以上面1中的第5个元素来确定属于那一年的

4.这里的data[2]是指1中的data,注意看函数哦,这里是数字太大进行缩减。

5.对属于1990气泡颜色的定义

这张图可以改成这样:

数据输入——生成你需要的echart图(世界地图,气泡图)-LMLPHP

需要做的如下:

改变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)'
}])
}
}
}]
};
05-23 04:54