jpcj-pc/src/views/about/index.vue

<template>
  <div class="W-full pr30 pl30 pt30">
    <canvas width="500" height="400" id="fuzhou"></canvas>
  </div>
</template>
  
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import api from '@/api'
import router from "@/router";
import fuzhouJson from '@/assets/json/福州市v2.json'
import echarts from 'echarts'
// import echarts from 'echarts'
const logOut = () => {
  api.login.logout().then(res => {
    router.push('/login')
  })
}
const renderMap = () => {
echarts.registerMap("fz",fuzhouJson)
  let Chart = echarts.init(document.getElementById("fuzhou"));
  // 颜色或文字的配置
  let option = {
    geo: {
      type: "map",
      aspectScale: 1, // 横向拉伸
      // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
      map: "fz",
      nameMap:'福州地图',
      label: {
        show: true,
        normal: {
          show: true, // 默认地图文字字号和字体颜色
          fontSize: 10,
          color: "#ffffff",
        },
        emphasis: {
          show: true,
          fontSize: 10, // 选中地图文字字号和字体颜色
          color: "#CFCFCF",
        },
      },
      itemStyle: {
        normal: {
          areaColor: "#efefef", //地图本身的颜色
          borderColor: "#00feda", //省份边框颜色
          borderWidth: 1, // 省份边框宽度
          opacity: 1, //图形透明度
        },
        emphasis: {
          areaColor: "#ff4400", // 高亮时候地图显示的颜色
          borderWidth: 0, // 高亮时的边框宽度
        },
      },
      textFixed: {
        Alaska: [20, -20],
      }
    },
    series: [
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        symbolSize: 12,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            shadowBlur: 10,
            color: "#ff4400",
          },
          emphasis: {
            borderColor: "#fff",
            borderWidth: 1,
          },
        },
      },
    ],
  };
  Chart.setOption(option);
}




export default defineComponent({
  setup() {
    onMounted(() => {
      console.log("123")
      renderMap()
    })
    return {
      logOut,
      renderMap
    };
  },
});
</script>
  
<style scoped>
.bg-primary-yellow {
  background-color: #f9de5b;
}

.select-border1:hover {
  border: 1px solid #f9de5b;
  background-color: #f9de5b;
  cursor: pointer;
}
</style>