前端热力图组件heatMapGD中国地图 中国热力地图 广东省热力地图 广东省地图 地市选择

快速实现前端中国热力地图 广东省热力地图 广东省地图， 请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=12407

# china 广东省热力地图使用方法

# map数据获取链接： http://datav.aliyun.com/portal/school/atlas/area_selector

效果图如下：

 

#### HTML代码部分

```html

<template>

<view>

<div class="map">

<div id="myEchart" class="map-echart"></div>

</div>

<div class="map">

<div id="myEchartChina" class="map-echart"></div>

</div>

</view>

</template>

```

#### JS代码 （引入组件 填充数据）

```javascript

<script>

import echarts from '../../static/h5/echarts.min.js'

export default {

mounted() {

this.getMapData();

},

props: {},

data() {

return {

searchForm: {

ip: "",

moduleType: 0,

moduleName: "",

},

myChart: null,

};

},

methods: {

getMapData() {

this.loadMap();

this.loadMapChina();

},

loadMap() {

this.myChart = echarts.init(document.getElementById("myEchart")); // 初始化

// 热力图数据地址 http://datav.aliyun.com/portal/school/atlas/area_selector

const uploadedDataURL = require(`../../static/guangdong.json`);

echarts.registerMap("广东", uploadedDataURL);

var option = {

title: {

text: "广东热力图",//表头

x: "center",

},

dataRange: {

min: 0,

max: 1000,

text: ["高", "低"],

realtime: true,

calculable: true,

color: ["darkred" , "red", "orangered", "yellow"],//颜色

},

series: [

{

name: "热力图",

type: "map",

map: "广东",

mapLocation: {

y: 0,

},

itemSytle: {

emphasis: { label: { show: false } },

},

data: [

{ name: "深圳市", value: 700 },

{ name: "广州市", value: 600 },

{ name: "珠海市", value: 500 },

{ name: "东莞市", value: 256 },

{ name: "佛山市", value: 434 },

{ name: "中山市", value: 343 },

{ name: "惠州市", value: 100 },

{ name: "汕头市", value: 460 },

{ name: "江门市", value: 40 },

{ name: "湛江市", value: 30 },

{ name: "肇庆市", value: 250 },

{ name: "梅州市", value: 350 },

{ name: "茂名市", value: 230 },

{ name: "阳江市", value: 330 },

{ name: "清远市", value: 450 },

{ name: "韶关市", value: 120 },

{ name: "揭阳市", value: 3560 },

{ name: "汕尾市", value: 390 },

{ name: "潮州市", value: 210 },

{ name: "河源市", value: 560 },

{ name: "云浮市", value: 240 }

],

},

],

};

this.myChart.setOption(option);

}

,

loadMapChina() {

this.myChart = echarts.init(document.getElementById("myEchartChina")); // 初始化

const uploadedDataURL = require(`../../static/china.json`);

echarts.registerMap("中国", uploadedDataURL);

var option = {

title: {

text: "中国热力图",//表头

x: "center",

},

dataRange: {

min: 0,

max: 3000,

text: ["高", "低"],

realtime: true,

calculable: true,

color: ["darkred" , "red", "orangered", "yellow"],//颜色

},

series: [

{

name: "中国热力图",

type: "map",

map: "中国",

mapLocation: {

y: 0,

},

itemSytle: {

emphasis: { label: { show: false } },

},

data: [

{ name: "湖南省", value: 700 },

{ name: "广东省", value: 1600 },

{ name: "湖北省", value: 500 },

{ name: "海南省", value: 34 },

],

},

],

};

this.myChart.setOption(option);

},

},

};

</script>

```

#### CSS

```CSS

<style lang="less" scoped>

.map {

width: 100vw;

height: 100vw;

}

.map-echart {

height: 100vw;

width: 100vw;

}

</style>

```