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

河南省三门峡百度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>