广东省热力图

最新推荐文章于 2024-05-05 21:39:10 发布

学海无涯卒

最新推荐文章于 2024-05-05 21:39:10 发布

阅读量583

点赞数

分类专栏：功能集结文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_61204947/article/details/128289815

版权

功能集结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<template>
  <div class="map">
    <div id="myEchart" class="map-echart"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    this.getMapData();
  },
  props: {},
  data() {
    return {
      searchForm: {
        ip: "",
        moduleType: 0,
        moduleName: "",
      },
      myChart: null,
    };
  },
  methods: {
    getMapData() {
      this.loadMap();
    },
    loadMap() {
      this.myChart = echarts.init(document.getElementById("myEchart")); // 初始化
      const uploadedDataURL = require(`../assets/json/guangdong.json`);
      echarts.registerMap("广东", uploadedDataURL);

      var option = {
        title: {
          text: "桩数",//表头
          x: "center",
        },
        dataRange: {
          min: 0,
          max: 1000,
          text: ["高", "低"],
          realtime: true,
          calculable: true,
          color: ["orangered", "yellow", "green"],//颜色
        },
        series: [
          {
            name: "桩数",
            type: "map",
            map: "广东",
            mapLocation: {
              y: 60,
            },
            itemSytle: {
              emphasis: { label: { show: false } },
            },
            data: [
              { name: "深圳市", value: 700 },
              { name: "广州市", value: 600 },
              { name: "珠海市", value: 500 },
              { name: "东莞市", value: 400 },
              { name: "佛山市", value: 300 },
              { name: "中山市", value: 300 },
              { name: "惠州市", value: 300 },
              { name: "汕头市", value: 300 },
              { name: "江门市", value: 300 },
              { name: "湛江市", value: 300 },
              { name: "肇庆市", value: 300 },
              { name: "梅州市", value: 300 },
              { name: "茂名市", value: 300 },
              { name: "阳江市", value: 300 },
              { name: "清远市", value: 300 },
              { name: "韶关市", value: 300 },
              { name: "揭阳市", value: 300 },
              { name: "汕尾市", value: 300 },
              { name: "潮州市", value: 300 },
              { name: "河源市", value: 300 },
              { name: "云浮市", value: 300 }
            ],
          },
        ],
      };

      this.myChart.setOption(option);
    },
  },
};
</script>
 
<style lang="less" scoped>
.map {
  width: 100%;
  height: 100%;
}
.map-echart {
  height: 600px;
  width: 100%;
}
</style>

全国json格式地图数据