制作全国主要城市房价情况，并用涟漪图标标出前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
鼠标悬浮一个坐标点
