echarts制作迁徙图

使用echarts制作迁徙图，以天津市为例，先上图

其中全国各省地图边界经纬度坐标下载地址：http://www.ourd3js.com/wordpress/638/#more-638

代码示例：

// 路径配置
    require.config({
        paths: {
            echarts: 'build/dist'
        }
    });

    // 使用
    require(
            [
                'echarts',
                'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                require('echarts/util/mapData/params').params.tianjin = {

                    getGeoJson: function (callback) {
                        $.getJSON('build/tjfgs.json', function (data) {
                            // 压缩后的地图数据必须使用 decode 函数转换
                            callback(require('echarts/util/mapData/params').decode(data));
                        });
                    }
                };

                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));

                var option = {
                    backgroundColor: '',
                    color: ['gold', 'aqua', 'lime'],
                    tooltip : {
                        trigger: 'item',
                        formatter: '{b}'
                    },
                    legend: {
                        show :false,
                        orient: 'vertical',
                        x: '30',
                        data: ['南开红桥', '和平河西', '河北河东'],
                        selectedMode: 'single',
                        selected: {
                            '和平河西': false,
                            '河北河东': false
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    dataRange: {
                        show:false,
                        min: 0,
                        max: 100,
                        x: '760',
                        y: '5',
                        orient: 'horizontal',
                        calculable: true,
                        color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    //通用图形配置
                    series: [
                        {
                            name: '南开红桥',
                            type: 'map',
                            hoverable: false,
                            mapType: 'tianjin',
                            roam: false,

                            itemStyle: {
                                normal:{
                                    label:{
                                        show:true,
                                        textStyle:{
                                            color:'#07d40d'
                                        }
                                    },
                                    borderColor:'rgba(255,255,255,1)',
                                    borderWidth:0.5,
                                    areaStyle:{
                                        color: '#CCCCFF'
                                    }
                                },
                                emphasis:{label:{show:true}}
                            },

                            data: [],
                            //                          数据表现内容
                    markLine: {
                                smooth: true,
                                effect : {
                                    show: true,
                                    scaleSize: 1,
                                    period: 30,
                                    color: '#fff',
                                    shadowBlur: 10
                                },
                                itemStyle : {
                                    normal: {
                                        borderWidth:1,
                                        lineStyle: {
                                            type: 'solid',
                                            shadowBlur: 10
                                        }
                                    }
                                },
                                data: [
                                    [{name:'南开红桥'},{name:'宝坻区'}],
                                    [{name:'南开红桥'},{name:'北辰区'}],
                                    [{name:'南开红桥'},{name:'东丽区'}],
                                    [{name:'南开红桥'},{name:'和平河西'}],
                                    [{name:'南开红桥'},{name:'河北河东'}],
                                    [{name:'南开红桥'},{name:'津南区'}],
                                    [{name:'南开红桥'},{name:'武清区'}],
                                ],
                            },
                            geoCoord: {
                                '宝坻区': [117.310682,39.730124],
                                '北辰区': [117.139545,39.23218],
                                '东丽区': [117.323722,39.091136],
                                '和平河西': [117.21766,39.116725],
                                '河北河东': [117.236416,39.149329],
                                '津南区': [117.335891,38.946767],
                                '武清区':[117.03002,39.405758],
                                '南开红桥':[117.146565,39.154897],
                            },
                markPoint: {
                                symbol: 'emptyCircle',
                                //symbolSize:5,
                                effect : {
                                    show: true,
                                    shadowBlur : 0
                                },
                                itemStyle:{
                                    normal:{
                                        label:{show:true}
                                    },
                                    emphasis: {
                                        label:{position:'top'}
                                    }
                                },
                                data: [
                                    {name:'宝坻区',value:95},
                                    {name:'北辰区',value:90},
                                    {name:'东丽区',value:85},
                                    {name:'和平河西',value:75},
                                    {name:'河北河东',value:65},
                                    {name:'津南区',value:55},
                                    {name:'武清区',value:100}

                                ]
                            }
                        }
                    ]
                };

                // 为echarts对象加载数据
                myChart.setOption(option);
            }
    );

示例代码下载地址： http://download.csdn.net/download/ardo_pass/10141785