vue画热力地图

最新推荐文章于 2024-04-29 13:11:15 发布

wjd1994

最新推荐文章于 2024-04-29 13:11:15 发布

阅读量525

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wjd1994/article/details/136251377

版权

首先下载地图数据,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);