全国热力图ECharts Gallery

20:11:45图表已生成
代码
/**
  描述:
  
  使用高德api获取地图行政区geoJson,再用echarts去加载这个地图
  
  vue渲染地图热力图、块状图，实现方法: https://juejin.im/post/5db6a8ab5188251d5e755cdf
  
  阿里云geoJson全国所有市县下载地址：
  
  http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4
  
  实现前提：你要先去高德api上去申请key值，免费的，然后引入进来
  
**/





getGeoJson(100000)

/**
 *  利用高德api获取行政区边界geoJson   
 *   adcode 行政区code 编号
 **/

function getGeoJson(adcode) {
    var map = new AMap.Map('map', {
        resizeEnable: true,
        center: [116.30946, 39.937629],
        zoom: 3
    })
    AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
        var districtExplorer = (window.districtExplorer = new DistrictExplorer({
            eventSupport: true, //打开事件支持
            map: map
        }))
        districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
            if (error) {
                console.error(error);
                return;
            }
            let Json = areaNode.getSubFeatures()

            //去获取数据
            getMapData(Json)
        });
    })
}

//获取数据，这里我们用随机数模拟数据

function getMapData(Json) {
    let mapData = Json.map(item => {
        return ({
            name: item.properties.name,
            value: [item.properties.center[0], item.properties.center[1], 40],
        })
    })
    let mapJson = {}
    //geoJson必须这种格式
    mapJson.features = Json

    //去渲染echarts
    initEcharts(mapData, mapJson)
}

function initEcharts(mapData, mapJson) {
    //注册
    echarts.registerMap('Map', mapJson);

    //这里加true是为了让地图重新绘制，不然如果你有筛选的时候地图会飞出去
    myChart.setOption({
        backgroundColor: '#050038',
        tooltip: {
            trigger: "item",
        },
        title: {
            text: "全国热力图",
            left: 25,
            top: 25,
            textStyle: {
                fontWeight: 'normal',
                fontSize: 17,
                color: 'rgb(97, 142, 205)'
            }
        },
        //这里可以添加echarts内置的，例如下载图片等
        toolbox: {
            feature: {
                dataView: {
                    show: false,
                },
                magicType: {
                    show: false,
                },
                restore: {
                    show: false
                },
                saveAsImage: {
                    show: true,
                    name: "全国热力图",
                    pixelRatio: 2
                }
            },
            iconStyle: {
                normal: {
                    borderColor: "#41A7DE"
                }
            },
            itemSize: 15,
            top: 20,
            right: 22
        },
        visualMap: {
            show: true,
            left: '2%',
            bottom: '1%',
            min: 0,
            max: 40,
            text: ['40', '0'],
            inRange: {
                color: ['#41A7DE', '#eac736', '#fffc00', '#ff2600']
            },
            textStyle: {
                color: '#0fccff',
                fontSize: 12
            }
        },
        geo: {
            show: true,
            map: 'Map', //使用
            roam: true,
            itemStyle: {
                normal: {
                    show: true,
                    areaColor: 'rgba(0,0,0,0)',
                    borderColor: 'rgb(15, 163, 227)',
                    borderWidth: '1',
                    shadowColor: 'rgba(63, 218, 255, 0.5)',
                    shadowBlur: 20
                },
                //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                emphasis: {
                    show: true,
                    areaColor: '#050038',
                    borderColor: '#83BAFF'
                }
            },
            label: {
                normal: {
                    show: false //显示省份标签
                },
                emphasis: {
                    //对应的鼠标悬浮效果
                    show: false
                }
            },
            zoom: 1.1
        },
        series: [{
            name: "地图",
            type: "heatmap",
            data: mapData,
            coordinateSystem: 'geo',
            pointSize: 13, //修改热力图点的半径
            blurSize: 15 //阴影的大小
        }]

    }, true)
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
