zfire-newmall-admin/src/views/bigViews/dataView1/components/mapdata.vue

<template>
  <moduleEnclosure>
    <zj-page-container>
      <map-data-statistics />
      <zj-page-fill>
        <div style="
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
          ">
          <div id="chart_7" class="chart t_btn9" style="width: 100%; height: 100%"></div>
          <div class="leixingxianshi">
            <div class="viewfilediv">
              <div class="zfx c1"></div>
              <span>新增安装</span>
            </div>
            <div class="viewfilediv">
              <div class="zfx c2"></div>
              <span>安装设备</span>
            </div>
            <div class="viewfilediv">
              <div class="zfx c3"></div>
              <span>新增维修</span>
            </div>
            <div class="viewfilediv">
              <div class="zfx c9"></div>
              <span>新增清洗</span>
            </div>
            <div class="viewfilediv">
              <div class="zfx c4"></div>
              <span>安装未完工</span>
            </div>
            <div class="viewfilediv">
              <div class="zfx c5"></div>
              <span>维修未完工</span>
            </div>
          </div>
        </div>
      </zj-page-fill>
    </zj-page-container>
  </moduleEnclosure>
</template>

<script>
import zhejiang from './js/zhejiang.js';
import moduleEnclosure from '@/components/moduleEnclosure.vue';
import mapDataStatistics from './mapDataStatistics.vue';
import * as echarts from 'echarts';
import { bigGetRegion, bigGetLarge9 } from '@/api/common.js';
// 计算 GeoJSON 数据的边界框
function calculateBoundingBox(geoJsonData) {
  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
  geoJsonData.features.forEach((feature) => {
    const coordinates = feature.geometry.coordinates;
    const type = feature.geometry.type;
    if (type === 'Polygon') {
      coordinates.forEach((polygon) => {
        polygon.forEach((coord) => {
          minX = Math.min(minX, coord[0]);
          minY = Math.min(minY, coord[1]);
          maxX = Math.max(maxX, coord[0]);
          maxY = Math.max(maxY, coord[1]);
        });
      });
    } else if (type === 'MultiPolygon') {
      coordinates.forEach((multiPolygon) => {
        multiPolygon.forEach((polygon) => {
          polygon.forEach((coord) => {
            minX = Math.min(minX, coord[0]);
            minY = Math.min(minY, coord[1]);
            maxX = Math.max(maxX, coord[0]);
            maxY = Math.max(maxY, coord[1]);
          });
        });
      });
    }
  });
  return { minX, minY, maxX, maxY };
}
export default {
  components: {
    moduleEnclosure,
    mapDataStatistics,
  },
  data() {
    return {
      list: [],
      geoCoordMap: zhejiang.features.map(function (item) {
        return {
          name: item.properties.name,
          value: item.properties.center,
        };
      }),
      data: zhejiang.features.map(function (item) {
        return {
          name: item.properties.name,
        };
      }),
      cIndex: 0,
      oldcIndex: 0,
      myChart: null,
      getLarge9: []
    };
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem('greemall_user'))
    },
  },
  watch:{
    "userInfo.type":{
      handler(newVal, oldVal) {
        if(this.userInfo){
          if (this.userInfo.type == 2){
            this.getbigGetLarge9({ country: 100000 });
          }else{
            this.getbigGetLarge9({ province:this.userInfo.province, city: this.userInfo.city });
          }
        }
      },
      deep: true,
      immediate: true,
    }
  },
  mounted() {
    this.getbigGetLarge9();
  },
  methods: {
    getbigGetLarge9(pam) {
      bigGetLarge9().then(res => {
        this.getLarge9 = res.data
        this.echart_7(pam);
      })
    },
    echart_7(pam) {
      var that = this;
      if (that.myChart) {
        that.myChart.dispose();
      }
      bigGetRegion(pam).then(res => {
        // 初始化 ECharts 实例
        that.myChart = echarts.init(document.getElementById('chart_7'));
        const geoJsonData = JSON.parse(res.data);
        // 计算边界框
        const boundingBox = calculateBoundingBox(geoJsonData);
        // 计算中心点
        const center = [
          (boundingBox.minX + boundingBox.maxX) / 2,
          (boundingBox.minY + boundingBox.maxY) / 2
        ];
        echarts.registerMap('china', geoJsonData);
        // 指定城市和颜色
        var cityColors = {};
        this.getLarge9.map(name => {
          cityColors[name] = "#009eff";
        });
        // 构建 series 数据
        var seriesData = Object.keys(cityColors).map(function (city) {
          return {
            name: city,
            itemStyle: {
              normal: {
                areaColor: cityColors[city],
                borderColor: 'none'
              },
              emphasis: {
                areaColor: cityColors[city],
                borderColor: 'none'
              }
            },
          };
        });
        var mapcon = {
          itemStyle: {
            normal: {
              borderColor: 'rgba(0,144,255, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.4,
                y: 0.5,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0,144,255, 0)', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,144,255, .1)', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,144,255, 1)', // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: 'rgba(0,144,255, 1)',
              shadowOffsetX: -1,
              shadowOffsetY: 1,
              shadowBlur: 10,
            },
            emphasis: {
              areaColor: '#0082ff',
              borderWidth: 0,
            },
          },
          select: {
            // 地图选中区域样式
            label: {
              // 选中区域的label(文字)样式
              color: '#fff',
            },
            itemStyle: {
              // 选中区域的默认样式
              areaColor: '#7024fb',
            },
          },
          animation: false,
        };
        // 配置项
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}'
          },
          geo: {
            map: 'china',
            roam: true,
            zoom: pam.country ? 1.3 : pam.city ? 4.5 : pam.province ? 1.7 : 2, // 设置缩放比例
            center: center,
            ...mapcon,
            regions: [
              ...seriesData,
              {
                name: "南海诸岛",
                itemStyle: {
                  normal: {
                    opacity: 0,
                  }
                },
                label: {
                  show: false
                }
              }
            ]
          },
          series: [{
            type: 'map',
            map: 'china',
            ...mapcon,
            geoIndex: 0,
            data: seriesData
          }]
        };
        // 使用配置项生成图表
        that.myChart.setOption(option);
        // 监听点击事件
        that.myChart.on('click', function (params) {
          
        });
      });

    },
  },
};
</script>

<style scoped lang="scss">

.leixingxianshi {
  width: 120px;
  height: auto;
  position: absolute;
  bottom: 0px;
  right: -10px;
}

.viewfilediv {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;

  &:not(:last-child) {
    margin-bottom: 10px;
  }

  span {
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: right;
    color: #8ab1dc;
  }
}

.zfx {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.c1 {
  background: linear-gradient(0deg, #21c8fb 0%, #21c8fb 100%);
}

.c2 {
  background: linear-gradient(0deg, #ffc737 0%, #ffc737 100%);
}

.c3 {
  background: linear-gradient(0deg, #ea539b 0%, #e34691 100%);
}

.c4 {
  background: linear-gradient(0deg, #59cfe6 0%, #59cfe6 100%);
}

.c5 {
  background: linear-gradient(0deg, #8061ff 0%, #8061ff 100%);
}

.c6 {
  color: #e15960 !important;
}

.c7 {
  color: #ffffff !important;
}

.c8 {
  color: #ff9900 !important;
}

.c9 {
  background: linear-gradient(0deg, #3ce783 0%, #3ce783 100%);
}

</style>