河南省三门峡百度echarts地图，大数据迁徙地图

Posted 2021-02-19 前端分享交流

河南省三门峡百度echarts地图，大数据迁徙地图

<script type="text/javascript">
        // 地图代码
        var smx_maps = echarts.init(document.getElementById(‘smx_maps‘));
        var uploadedDataURL = "411200.json";//这里引用阿里云地图选择器数据包
        smx_maps.showLoading();
        $.getJSON(uploadedDataURL, function(geoJson) {
            echarts.registerMap(‘henansheng‘, geoJson);
            smx_maps.hideLoading();
            var geoCoordMap = {
                ‘湖滨区‘: [111.19487, 34.77812],
                ‘陕州区‘: [111.103851, 34.720244],
                ‘渑池县‘: [111.762992, 34.763487],
                ‘卢氏县‘: [111.052649, 34.053995],
                ‘义马市‘: [111.869417, 34.746868],
                ‘灵宝市‘: [110.88577, 34.521264]
            }
            var data = [
                {name:‘湖滨区‘, value: 199},
                {name:‘陕州区‘, value: 39},
                {name:‘渑池县‘, value: 152},
                {name:‘卢氏县‘, value: 299},
                {name:‘义马市‘, value: 89},
                {name:‘灵宝市‘, value: 52}
            ];
            var max = 480, min = 9; // todo 
            var maxSize4Pin = 100, minSize4Pin = 20;
        
          var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };
        
        
            option = {
                title: {
                    text: ‘“大数据” - 三门峡市‘,
                    subtext: ‘‘,
                    x: ‘center‘,
                    textStyle: {
                        color: ‘#ccc‘
                    }
                },
                tooltip: {
                    trigger: ‘item‘,
                    formatter: function (params) {
                      if(typeof(params.value)[2] == "undefined"){
                          return params.name + ‘ : ‘ + params.value;
                      }else{
                          return params.name + ‘ : ‘ + params.value[2];
                      }
                    }
                },
                legend: {
                    orient: ‘vertical‘,
                    y: ‘bottom‘,
                    x: ‘right‘,
                    data: [‘credit_pm2.5‘],
                    textStyle: {
                        color: ‘#fff‘
                    }
                },
                visualMap: {
                    show: false,
                    min: 0,
                    max: 500,
                    left: ‘left‘,
                    top: ‘bottom‘,
                    text: [‘高‘, ‘低‘], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {
                                    color: [‘#0f0c29‘, ‘#302b63‘, ‘#24243e‘] // 黑紫黑
                                
                    }
                },
                // toolbox: {
                //     show: true,
                //     orient: ‘vertical‘,
                //     left: ‘right‘,
                //     top: ‘center‘,
                //     feature: {
                //             dataView: {readOnly: false},
                //             restore: {},
                //             saveAsImage: {}
                //             }
                // },
                geo: {
                    show: true,
                    map: ‘henansheng‘,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: ‘#031525‘,
                            borderColor: ‘#3B5077‘,
                        },
                        emphasis: {
                            areaColor: ‘#2B91B7‘,
                        }
                    }
                },
                series : [
              {
                    name: ‘credit_pm2.5‘,
                    type: ‘scatter‘,
                    coordinateSystem: ‘geo‘,
                    data: convertData(data),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        normal: {
                            formatter: ‘{b}‘,
                            position: ‘right‘,
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: ‘#05C3F9‘
                        }
                    }
                },
                 {
                    type: ‘map‘,
                    map: ‘henansheng‘,
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: ‘#fff‘
                            }
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: ‘#031525‘,
                            borderColor: ‘#3B5077‘,
                        },
                        emphasis: {
                            areaColor: ‘#2B91B7‘
                        }
                    },
                    animation: false,
                    data: data
                },
                {
                    name: ‘点‘,
                    type: ‘scatter‘,
                    coordinateSystem: ‘geo‘,
                    symbol: ‘pin‘,
                    symbolSize: function (val) {
                        var a = (maxSize4Pin - minSize4Pin) / (max - min);
                        var b = minSize4Pin - a*min;
                        b = maxSize4Pin - a*max;
                        return a*val[2]+b;
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: ‘#fff‘,
                                fontSize: 9,
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: ‘#F62157‘, //标志颜色
                        }
                    },
                    zlevel: 6,
                    data: convertData(data),
                },
                {
                    name: ‘Top 5‘,
                    type: ‘effectScatter‘,
                    coordinateSystem: ‘geo‘,
                    data: convertData(data.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 5)),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: ‘render‘,
                    rippleEffect: {
                        brushType: ‘stroke‘
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: ‘{b}‘,
                            position: ‘right‘,
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: ‘#05C3F9‘,
                            shadowBlur: 10,
                            shadowColor: ‘#05C3F9‘
                        }
                    },
                    zlevel: 1
                },
                 
            ]
            };
            smx_maps.setOption(option);
        });

        </script>