基于ECharts可视化库的图表制作

 

制作全国主要城市房价情况，并用涟漪图标标出前5名房价城市。要求如下：

1. 数据采用http://www.askci.com/news/data/2015/02/02/906hksj_all.shtml链接中的数据，value为房价，取前20个城市。每个城市的坐标可以通过腾讯地图坐标拾取器http://lbs.qq.com/tool/getpoint/index.html获取。
2. 图表中标题组件，工具栏组件，提示组件，图例组件以及视觉组件都必须有，视觉组件最小值为15000，最大值为30000，房价小于15000为蓝色，大于30000为红色，在15000到30000之间渐变色为蓝色->黄色->红色。
3. 提交报告时，在报告中需要有房价前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

鼠标悬浮一个坐标点