vue画热力地图

最新推荐文章于 2025-01-20 14:42:38 发布

原创最新推荐文章于 2025-01-20 14:42:38 发布 · 714 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何使用DataV.GeoAtlas中的地图数据，并通过echarts库在JavaScript中创建了一个关于‘HK’地图的可视化图表，展示了北京市的藏品区域分布情况，包括地图类型、数据处理和视觉映射设置。

首先下载地图数据,json格式，地址如下：

DataV.GeoAtlas地理小工具系列

然后直接上代码：

 var mapCode = require("./china.json");
 echarts.registerMap('HK', mapCode);


 var datas1 = [{name:'北京市',value:10}];


 var option = {
                        title : {
                            text: '藏品区域分布情况',
                            x: 'center'
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                            dataView: { readOnly: false },
                            restore: {},
                            saveAsImage: {}
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 500,
                            text: ['High', 'Low'],
                            realtime: false,
                            calculable: true,
                            inRange: {
                            color: ['lightskyblue', 'yellow', 'orangered']
                            },
                            left:300,
                            bottom:300
                        },
                        series: [{
                            type: 'map',
                            map: 'HK',
                            aspectScale: 1,
                            label: {
                                normal: {
                                    show: false,
                                    color:'white'
                                },
                                emphasis: {
                                    show: true,
                                    
                                }
                            },
                            itemStyle: {
                            normal: {
                                // areaColor: '#B2CAE0',
                                borderColor: '#fff',
                                borderWidth: 1,
                            },
                            emphasis: {
                                // areaColor: '#FFAE00',
                            }
                            },
                            data: datas1
                        }]
                };

                    
                   

                    shuzicangpinChart6.setOption(option);