gin-vue-admin/web/src/view/healthy/map/index.vue

<template>
  <div class="echarts">
    <div id="main" style="width:100%; height:500px"></div>
    <div :style="{height:'400px',width:'100%'}" ref="myEchart"></div>
    
  </div>
</template>
<script>
import "../map/shandong.js";
import obj from "../map/shandong.json";
  import echarts from "echarts";
  //   import '../../node_modules/echarts/map/js/world.js'
  import '../../../utils/map/js/china' // 引入中国地图数据
  export default {
    name: "echarts",
    props: ["userJson"],
    data() {
      return {
        listArr: [], //城市json
        max: "", //最大value值
        min: "" ,// 最小value值
        chart: null
      };
    },
    created() {
        this.getData();
        },
    mounted() {
      this.DrawMap();
      this.chinaConfigure();
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      chinaConfigure() {
        console.log(this.userJson)
        let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置    
        window.onresize = myChart.resize;
        myChart.setOption({ // 进行相关配置
          backgroundColor: "#02AFDB",
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: false,
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow', 'lightskyblue']
          },
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: true,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '启动次数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: [{
                "name": "北京",
                "value": 599
              }, {
                "name": "上海",
                "value": 142
              }, {
                "name": "黑龙江",
                "value": 44
              }, {
                "name": "深圳",
                "value": 92
              }, {
                "name": "湖北",
                "value": 810
              }, {
                "name": "四川",
                "value": 453
              }]
            }
          ]
        })
      },
      getData() {
     // 获取城市名称数据
     console.log("取到的山东省的json数据", obj);
     if (obj) {
       let arr = obj.features;
       // 循环取出 城市名称和value值
       for (var j = 0; j < arr.length; j++) {
         this.max = arr[0].id;
         this.min = arr[0].id;
         if (arr[j].id > this.max) {
           this.max = arr[j].id;
         }
         if (arr[j].id < this.min) {
           this.min = arr[j].id;
         }
         this.listArr.push({
           name: arr[j].properties.name,
           value: arr[j].id
         });
       }
     }
   },
   DrawMap() {
     let _this = this;
     let myChart8 = this.$echarts.init(document.getElementById("main"));
     console.log(
       "最大value值",
       this.max,
       "\n",
       "最小value值",
       this.min,
       "\n",
       "城市数据",
       this.listArr
     );
     myChart8.setOption({
       visualMap: {
         min: _this.min,
         max: _this.max,
         show: false,
         inRange: {
        //    color: ["lightskyblue", "yellow", "orangered"]
        color: ["white"]
         }
       },
       series: [
         {
           type: "map",
           map: "山东",
           itemStyle: {
             normal: { label: { show: true } },
             emphasis: { label: { show: true } },
             emphasis: {
               areaColor: "#67C23A" //鼠标进入时的颜色
             }
           },
           data: _this.listArr
         }
       ]
     });
   },
    }
  }
</script>
<style scoped lang="scss">
    .o-echarts {
        min-width: 30px;
        min-height: 30px;
        width: 100%;
        height: 100%;
    }
</style>