echarts 大屏可视化地图根据用户登录的IP地址动态展示

最新推荐文章于 2024-05-14 19:30:07 发布

yiyiziupupup

最新推荐文章于 2024-05-14 19:30:07 发布

阅读量461

点赞数

分类专栏： echarts 文章标签： vue 前端 javascript echarts Powered by 金山文档

本文链接：https://blog.csdn.net/yiyiziupupup/article/details/129005380

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用场景：根据ip地址展示地图

实现方式：

获取用户登录时的IP地址

echarts配置好地图的json数据

根据IP城市展示对应的echarts地图

代码：

<template>
  <div ref="mapData" class="mapData"> </div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue';
import * as echarts from 'echarts';
// 引入地图
import { chengduMap } from '/@/assets/map/chengduMap';
import { chongqingMap } from '/@/assets/map/chongqingMap'
import { xiamenMap } from '/@/assets/map/xiamenMap'
import { hangzhouMap } from '/@/assets/map/hangzhouMap'

// 引入仓库
import { useMapStore } from '/@/store/modules/map';
import axios from 'axios';
const store = useMapStore();

let dataSource = ref();
let mapSource = ref();
let data = ref();
const mapData = ref();
onMounted(() => {
  axios.get('https://************（获取ip地址的接口）').then(async (res) => {
    switch (res.data.city) {
      case 'Chongqing':
        mapSource.value = chongqingMap;
        break;
      case 'Chengdu':
        mapSource.value = chengduMap;
        break;
      case 'Xiamen':
        mapSource.value = xiamenMap;
        break;
      case 'Hangzhou':
        mapSource.value = hangzhouMap;
        break;
    }
    await getCdMapData()
    await init();
  })

  //先获取ip地址，再进行后面的获取数据赋值和初始化地图  要让他们有个先后执行的顺序，先获值再初始化地图
});

const getCdMapData = async () => {
  await store.getCdMapData();
  data.value = store.dataSource;
};

const transformFontSize = (fontsize) => {
  // 获取屏幕可视区宽度
  const width = document.body.clientWidth;
  const ratio = width / 1920;

  // 取下整
  return fontsize * ratio;
};

const init = () => {
  var myChart = echarts.init(mapData.value);
  echarts.registerMap('chengduMap', mapSource.value);
  let option = {
    // 提示框，鼠标移入
    tooltip: {
      show: true, //鼠标移入是否触发数据
      trigger: 'item', //出发方式
      formatter: '{b}-{c}',
    },

    series: [
      {
        name: '成都',
        type: 'map',
        map: 'chengduMap',
        data: data.value,
        itemStyle: {
          normal: {
            areaColor: 'rgba(128, 128, 128, 0)', //rgba设置透明度0
            borderColor: '#007bf1', //省份边框颜色
            borderWidth: transformFontSize(1.5), //省份边框
          },
          emphasis: {
            //高亮状态下的样试
            // areaColor: '#26a2db',
            label: {
              // show: true,
              // areaColor: '#26a2db'
            },
          },
        },
        zoom: 1.2, //放大缩小,
        label: {
          //图形上的文本标签，可用于说明图形的一些数据信息
          // show: true,
          fontSize: transformFontSize(12),
        },
      },
    ],
    visualMap: {
      show: false,
      min: 0,
      max: 200,
      text: ['高', '低'],
      // textColor: '#fff',
      // realtime: true, //是否可以拖拽
      // calculable: true,  //滑动效果
      inRange: {
        // show: false,
        // color: ['lightskyblue', 'yellow', 'orangered']//变更颜色，low蓝色height橙色
        color: ['#4cb0dd', '#2d79ad', '#265da0', 'rgb(4, 36, 65)'], //变更颜色，low蓝色height橙色
      },
    },
  };
  window.onresize = function () {
    myChart.resize();
  };
  myChart.setOption(option);
};
</script>