UA 整理提交

he wei

2024-10-08 96ee251c889b4a7cd65134658ac5c2d4d5fa1798

 src/components/echarts/mapChart.vue

@@ -1,7 +1,6 @@
<script setup>
import * as echarts from "echarts";
import "./theme/custom";

import { onMounted, ref, watchEffect, nextTick, onBeforeUnmount } from "vue";

import { throttle } from "@/assets/js/tools/throttle.js";
@@ -9,6 +8,7 @@
let myChart = null;
const chartContainer = ref(null);
const name = ref("zhongguo");
const $emit = defineEmits(["mapMounted"]);
const props = defineProps({
  roam: {
    type: [String, Boolean],
@@ -16,69 +16,17 @@
    default: true,
  },
});
let geoJson;
let geoJson = {};
async function getGeo() {
  geoJson = (await import(`../../../public/mapJson/${name.value}.json`)).default;
  geoJson = (await import(`../../../public/mapJson/${name.value}.json`))
    .default;
  echarts.registerMap(name.value, geoJson);
}

function getOption(list = []) {
  
  let mapName = name.value;

  let data = [
    {
      name: "节",
      label: "测试机房1",
      value: 8,
      color: "#7668F9",
      points: [118.8062, 31.9208],
    },
    {
      name: "",
      label: "测试机房2",
      value: 100,
      color: "#0081FF",
      points: [127.9688, 45.368],
    },
    {
      name: "",
      label: "测试机房3",
      value: 100,
      color: "#0081FF",
      points: [110.3467, 41.4899],
    },
    {
      name: "节",
      label: "测试机房4",
      value: 50,
      color: "#FF6B6C",
      points: [125.8154, 44.2584],
    },
    {
      name: "",
      value: 8,
      label: "测试机房6",
      color: "#7668F9",
      points: [116.4551, 40.2539],
    },
    {
      name: "节",
      label: "测试机房7",
      value: 8,
      color: "#66F842",
      points: [123.1238, 42.1216],
    },
    {
      name: "节",
      label: "测试机房8",
      value: 100,
      color: "#0081FF",
      points: [114.4995, 38.1006],
    },
  ];
  data = list;
  
  let data = list;

  let areaList = geoJson.features || [];
  let data0 = [];
@@ -94,9 +42,8 @@
    for (let i = 0; i < data.length; i++) {
      let item = data[i];
      res.push({
        name: item.name,
        // name: item.name,
        color: item.color,
        fontColor: item.fontColor,
        value: item.points.concat(data[i].value),
        label: item.label ? item.label : "",
        data: item,
@@ -112,163 +59,120 @@
        return params.data.label;
      },
    },
    visualMap: {
      show: false,
      type: "continuous",
      text: ["", ""],
      showLabel: true,
      left: "50",
      min: 0,
      max: 100,
      inRange: {
        color: ["#025483", "#116493"],
      },
      // seriesIndex: [1],
      // seriesIndex: 1,
      seriesIndex: 0,
    },
    geo: {
      show: true,
      map: mapName,
      label: {
        normal: {
          show: false,
        },
        emphasis: {
          show: false,
        },
      },
      roam: props.roam,
      itemStyle: {
        normal: {
          borderColor: "rgba(147, 235, 248, 1)",
          borderWidth: 1,
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          shadowColor: "rgba(128, 217, 248, 1)",
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10,
        borderColor: "rgba(147, 235, 248, 1)",
        borderWidth: 1,
        areaColor: {
          type: "radial",
          x: 0.5,
          y: 0.5,
          r: 0.8,
          colorStops: [
            {
              offset: 0,
              color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        emphasis: {
        shadowColor: "rgba(128, 217, 248, 1)",
        shadowOffsetX: -2,
        shadowOffsetY: 2,
        shadowBlur: 10,
      },
      emphasis: {
        itemStyle: {
          areaColor: "#1ecee5",
          borderWidth: 0,
          label: {
            show: false,
          },
        },
        label: {
          show: false,
        },
      },
    },
    series: [
      // 图片底色
      // {
      //   name: "",
      //   type: "scatter",
      //   coordinateSystem: "geo",
      //   symbol: "circle",
      //   symbolSize: [24, 24],
      //   label: {
      //     formatter: "{b}",
      //     position: "inside",
      //     show: true,
      //     color: "#FFFFFF",
      //     fontWeight: "bold",
      //   },
      //   itemStyle: {
      //     color(params) {
      //       return params.data.color;
      //     },
      //   },
      //   data: convertData(data),
      //   z: 3,
      // },
      // {
      //   //图片
      //   name: "图片",
      //   type: "scatter",
      //   coordinateSystem: "geo",
      //   symbol: function (value, params) {
      //     let img;
      //     let color = params.data.color;
      //     // let color = "#ff6b6c";
      //     switch (color) {
      //       case "#0081ff": // 浮充
      //         img = HomeChargeImage;
      //         break;
      //       case "#ff6b6c": // 放电
      //         img = HomeDischargeImage;
      //         break;
      //       case "#66f842": // 充电
      //         img = HomeNormalImage;
      //         break;
      //       case "#7668f9": // 停电
      //         img = HomeTingDianImage;
      //         break;
      //       default:
      //         // img = HomeChargeImage;
      //         img = HomeTransImage;
      //         break;
      //     }
      //     // return params.data.name ? "circle" : "image://" + img;
      //     return "circle";
      //   },
      //   symbolSize: [24, 24],
      //   label: {
      //     formatter: "{b}",
      //     position: "inside",
      //     show: true,
      //     color: "#FFFFFF",
      //     fontWeight: "bold",
      //   },
      //   itemStyle: {
      //     color(params) {
      //       return params.data.color;
      //     },
      //   },
      //   data: convertData(data),
      //   showEffectOn: "render",
      //   rippleEffect: {
      //     brushType: "stroke",
      //   },
      //   hoverAnimation: true,
      //   // zlevel: 3
      //   z: 4,
      // },
      // {
      //   name: "波纹",
      //   type: "effectScatter",
      //   coordinateSystem: "geo",
      //   rippleEffect: {
      //     scale: 3,
      //   },
      //   symbolSize: [18, 18],
      //   data: convertData(data),
      //   itemStyle: {
      //     color(params) {
      //       return params.data.color;
      //     },
      //   },
      //   tooltip: {
      //     show: true,
      //   },
      //   // zlevel: 2
      //   z: 2,
      // },
      {
        name: "",
        type: "scatter",
        coordinateSystem: "geo",
        symbol: "circle",
        symbolSize: [24, 24],
        label: {
          formatter: "{b}",
          position: "inside",
          show: true,
          color: "#FFFFFF",
          fontWeight: "bold",
        },
        itemStyle: {
          color(params) {
            return params.data.color;
          },
        },
        data: convertData(data),
        z: 3,
      },
      {
        //图片
        name: "图片",
        type: "scatter",
        coordinateSystem: "geo",
        symbol: function (value, params) {
          return "circle";
        },
        symbolSize: [24, 24],
        label: {
          formatter: "{b}",
          position: "inside",
          show: true,
          color: "#FFFFFF",
          fontWeight: "bold",
        },
        itemStyle: {
          color(params) {
            return params.data.color;
          },
        },
        data: convertData(data),
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        emphasis: {
          scale: true
        },
        // zlevel: 3
        z: 4,
      },
      {
        name: "波纹",
        type: "effectScatter",
        coordinateSystem: "geo",
        rippleEffect: {
          scale: 3,
        },
        symbolSize: [18, 18],
        data: convertData(data),
        itemStyle: {
          color(params) {
            return params.data.color;
          },
        },
        tooltip: {
          show: true,
        },
        // zlevel: 2
        z: 2,
      },
      {
        type: "map",
        map: mapName,
@@ -276,23 +180,21 @@
        aspectScale: 0.75, //长宽比
        showLegendSymbol: false, // 存在legend时显示
        label: {
          normal: {
            show: true,
          },
          emphasis: {
            show: false,
            textStyle: {
              color: "#FF0000",
            },
          show: true,
        },
        emphasis: {
          show: false,
          textStyle: {
            color: "#FF0990",
          },
        },
        itemStyle: {
          areaColor: "#FF0000",
          areaColor: "#FF9900",
        },
        roam: true,
        animation: false,
        // data: data0,
        data: [],
        data: data0,
        // data: [],
        tooltip: {
          show: false,
        },
@@ -311,8 +213,8 @@
    myChart = echarts.init(chartContainer.value, "custom");

    let option = getOption();
    console.log('time 2', Date.now(), option, '=============');
    
    console.log("time 2", Date.now(), option, "=============");

    myChart.setOption(option);

    // 监听窗口变化重新渲染图表
@@ -337,18 +239,25 @@

function updateChart(data) {
  let option = getOption(data);
  myChart.setOption(option);

  myChart?.setOption(option);
}

defineExpose({
  updateChart,
});

onMounted(async () => {
  await getGeo();
  initChart();
  $emit("mapMounted");
});
</script>

<template>
  <div class="chart-wraper">
    <div class="chart" ref="chartContainer"></div>
    <slot name="tools"></slot>
  </div>
</template>