制作全国主要城市房价情况,并用涟漪图标标出前5名房价城市。要求如下:
- 数据采用http://www.askci.com/news/data/2015/02/02/906hksj_all.shtml链接中的数据,value为房价,取前20个城市。每个城市的坐标可以通过腾讯地图坐标拾取器http://lbs.qq.com/tool/getpoint/index.html获取。
- 图表中标题组件,工具栏组件,提示组件,图例组件以及视觉组件都必须有,视觉组件最小值为15000,最大值为30000,房价小于15000为蓝色,大于30000为红色,在15000到30000之间渐变色为蓝色->黄色->红色。
- 提交报告时,在报告中需要有房价前20城市的坐标,房价的数据,可以放在附录部分。
其他不做更多的要求,尽量制作精美。
var data = [
{name: '北京', value: 34724},
{name: '上海', value: 29286},
{name: '深圳', value: 26901},
{name: '厦门', value: 22879},
{name: '广州', value: 18857},
{name: '南京', value: 17248},
{name: '三亚', value: 17202},
{name: '温州', value: 16366},
{name: '杭州', value: 16268},
{name: '天津', value: 14239},
{name: '福州', value: 13421},
{name: '丽水', value: 12992},
{name: '宁波', value: 11707},
{name: '珠海', value: 11491},
{name: '舟山', value: 11307},
{name: '青岛', value: 10658},
{name: '台州', value: 10637},
{name: '金华', value: 10557},
{name: '苏州', value: 10117},
{name: '大连', value: 9716},
];
var geoCoordMap = {
'北京': [116.427048,39.902802],
'上海': [121.455704,31.249601],
'深圳': [114.117209,22.531680],
'厦门': [118.115937,24.467581],
'广州': [113.258340,23.149135],
'南京': [118.797697,32.086866],
'三亚': [109.499543,18.301968],
'温州': [120.691609,27.986039],
'杭州': [120.189606,30.249207],
'天津': [117.216853,39.142488],
'福州': [119.326578,26.119785],
'丽水': [119.960468,28.447553],
'宁波': [121.542826,29.867603],
'珠海': [113.555901,22.221111],
'舟山': [122.214707,29.983904],
'青岛': [120.319031,36.07106],
'台州': [121.294765,28.693353],
'金华': [119.641943,29.117714],
'苏州': [120.617116,31.335936],
'大连': [121.639213,38.928328],
};
var convertData = function (data,a1,a2) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
if(data[i].value>=a1){
if(data[i].value<=a2)
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
}
return res;
};
option = {
backgroundColor: '#404a59',
title: {
text: '全国房价城市排行',
subtext: 'data from askci房价',
sublink: 'http://www.askci.com/news/data/2015/02/02/906hksj_all.shtml',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
y: 'bottom',
x:'right',
data:['房价<15000','15000<x<30000','30000<房价'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series : [
{
name: '房价<15000',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data,0,15000),
symbolSize: function (val) {
return val[2] / 2000;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: 'blue'
}
}
},{
name: '15000<x<30000',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data,15000,30000),
symbolSize: function (val) {
return val[2] / 2000;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: 'yellow'
}
}
},{
name: '30000<房价',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data,30000,40000),
symbolSize: function (val) {
return val[2] / 2000;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: 'red'
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 200;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
};
显示全部房价:
显示30000
显示15000<x<30000
显示x<15000
鼠标悬浮一个坐标点