vue echarts 广东省热力图

oom乄

已于 2022-01-20 16:07:50 修改

阅读量886

点赞数

文章标签： vue echarts

于 2022-01-20 16:02:21 首次发布

本文链接：https://blog.csdn.net/m0_50251353/article/details/122122856

版权

----------------------笔记--------------------------

效果图

代码

<template>
  <div id="mapContainer"></div>
</template>
<script>
import * as echarts from "echarts";
import "echarts/map/js/province/guangdong"; // 必须要导入
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("mapContainer")); // 初始化
      var option = {
        backgroundColor: "#ffffff", // 背景色
        visualMap: {
          type: "continuous", // 左下角提示色彩显示
          min: 0,
          max: 660,
          calculable: true,
          realtime: false,
          splitNumber: 5,
          inRange: {
            // color: COLORS // 取值范围的颜色
            color: ["#00bfff", "blue", "green", "yellow", "red"]
          },
          orient: "horizontal", // 方向  vertical1
          left: "left", // 位置
          top: "bottom", // 位置
          show: true // 图注
        },
        geo: {
          map: "广东",
          // show: true,
          // roam: false, // 不开启缩放和平移
          roam: true,
          // zoom: 1.2, // 视角缩放比例
          label: {
            normal: {
              show: false,
              fontSize: "12",
              color: "rgba(0,0,0,0.7)"
            },
            emphasis: {
              show: false,
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#eee",
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "#eee", // 鼠标选择区域颜色
              borderColor: "rgba(0, 0, 0, 0.2)"
            }
          }
        },
        series: [
          {
            name: "热力图",
            type: "heatmap",
            coordinateSystem: "geo",
            geoIndex: 0,
            pointSize: 10,
            blurSize: 8,
            // minOpacity: 1,
            data: [
              [113.02833, 23.00779, 123],
              [113.02833, 23.10779, 33],
              [113.02833, 23.20779, 163],
              [113.02833, 23.30779, 83],
              [113.02833, 23.40779, 103],
              [113.02833, 23.50779, 183],
              [113.02833, 23.60779, 123],
              [113.02833, 23.70779, 13],
              [113.02833, 23.80779, 73],
              [113.02833, 23.90779, 53],

              [113.01833, 23.00779, 13],
              [113.01833, 23.10779, 13],
              [113.01833, 23.20779, 53],
              [113.01833, 23.30779, 193],
              [113.01833, 23.40779, 93],
              [113.01833, 23.50779, 103],
              [113.01833, 23.60779, 123],
              [113.01833, 23.70779, 13],
              [113.01833, 23.80779, 23],
              [113.01833, 23.90779, 73],

              [113.00833, 23.00779, 13],
              [113.00833, 23.10779, 13],
              [113.00833, 23.20779, 19],
              [113.00833, 23.30779, 33],
              [113.00833, 23.40779, 83],
              [113.00833, 23.50779, 103],
              [113.00833, 23.60779, 53],
              [113.00833, 23.70779, 63],
              [113.00833, 23.80779, 53],
              [113.00833, 23.90779, 23],

              [113.03833, 23.00779, 13],
              [113.03833, 23.10779, 73],
              [113.03833, 23.20779, 13],
              [113.03833, 23.30779, 33],
              [113.03833, 23.40779, 83],
              [113.03833, 23.50779, 10],
              [113.03833, 23.60779, 53],
              [113.03833, 23.70779, 63],
              [113.03833, 23.80779, 53],
              [113.03833, 23.90779, 23],

              [113.04833, 23.00779, 13],
              [113.04833, 23.10779, 53],
              [113.04833, 23.20779, 63],
              [113.04833, 23.30779, 33],
              [113.04833, 23.40779, 83],
              [113.04833, 23.50779, 83],
              [113.04833, 23.60779, 53],
              [113.04833, 23.70779, 63],
              [113.04833, 23.80779, 88],
              [113.04833, 23.90779, 67],

              [113.05833, 23.00779, 13],
              [113.05833, 23.10779, 83],
              [113.05833, 23.20779, 93],
              [113.05833, 23.30779, 33],
              [113.05833, 23.40779, 83],
              [113.05833, 23.50779, 42],
              [113.05833, 23.60779, 53],
              [113.05833, 23.70779, 63],
              [113.05833, 23.80779, 36],
              [113.05833, 23.90779, 56]
            ]
          }
        ]
      };

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

<style lang="less" scoped>
#mapContainer {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
</style>