echarts制作迁徙图

小灰灰 2022-06-04 02:46 954阅读 0赞

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

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

![Image 1][]![Center][]

代码示例：

// 路径配置
        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][http_download.csdn.net_download_ardo_pass_10141785]

[http_www.ourd3js.com_wordpress_638_more-638]: http://www.ourd3js.com/wordpress/638/#more-638
[Image 1]: 
[Center]: /images/20220604/310912eb100447088a97589cfda27294.png
[http_download.csdn.net_download_ardo_pass_10141785]: http://download.csdn.net/download/ardo_pass/10141785