heatMap中国省市地图 中国热力地图 广东省热力地图 广东省地图 地市选择

快速实现前端热力图组件中国热力地图 广东省热力地图 广东省地图，

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

# map数据获取链接： datav.aliyun.com/portal/scho…

效果图如下：

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代码部分

<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: 256 },
              { name: "海南省", value: 34 },

            ],
          },
        ],
      };

      this.myChart.setOption(option);
    },
  },
};
</script>

css代码部分

<style lang="less" scoped>
.map {
  width: 100vw;
  height: 100vw;
}
.map-echart {
  height: 100vw;
  width: 100vw;
}
</style>

阅读全文下载完整组件代码请关注微信公众号： 前端组件开发