青岛维护

WXL

4 天以前 4c9fdc87987140e8b2c3f0dfc2f6608cdb6be774

 src/views/home/components/MapChart/index.vue

@@ -37,6 +37,33 @@
      type: String,
      default: "map",
    },
    zoom: {
      type: Number,
      default: 1.2,
    },
    left: {
      type: String,
      default: "8%",
    },
    top: {
      type: String,
      default: "10%",
    },
    // 区县标签：full=名称+数值（默认，浅色页用）/ name=仅名称（深色大屏用，置于区县内部避免重叠）/ none=不显示
    labelMode: {
      type: String,
      default: "full",
    },
    // 是否允许拖拽缩放地图
    roam: {
      type: Boolean,
      default: false,
    },
    // 深色大屏配色（连续渐变 + 深色描边），浅色页默认关闭
    dark: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
@@ -64,40 +91,24 @@
    },

    resetOption(newData) {
      const nameMode = this.labelMode === "name";
      const showLabel = this.labelMode !== "none";
      const dark = this.dark;
      let seriesData = [
        {
          name: "杭州市",
        },
        {
          name: "宁波市",
        },
        {
          name: "温州市",
        },
        {
          name: "嘉兴市",
        },
        {
          name: "湖州市",
        },
        {
          name: "绍兴市",
        },
        {
          name: "金华市",
        },
        {
          name: "衢州市",
        },
        {
          name: "舟山市",
        },
        {
          name: "台州市",
        },
        {
          name: "丽水市",
        },
        { name: "市南区" },
        { name: "市北区" },
        { name: "黄岛区" },
        { name: "崂山区" },
        { name: "李沧区" },
        { name: "城阳区" },
        { name: "即墨区" },
        { name: "胶州市" },
        { name: "平度市" },
        { name: "莱西市" },
        { name: "东港区" },
        { name: "岚山区" },
        { name: "五莲县" },
        { name: "莒县" },
      ];
      if (this.chartType == "map") {
        let maxValue = 2;
@@ -127,17 +138,20 @@
        }
        // 设置点的位置(经纬度)
        const geoCoordMap = {
          杭州市: [120.19, 30.26, 20],
          宁波市: [121.56, 29.86, 20],
          温州市: [120.65, 28.01, 20],
          嘉兴市: [120.76, 30.77, 20],
          湖州市: [120.1, 30.86, 20],
          绍兴市: [120.58, 30.01, 20],
          金华市: [119.64, 29.12, 20],
          衢州市: [118.88, 28.97, 20],
          舟山市: [122.11, 30.07, 20],
          台州市: [121.03, 29.15, 20],
          丽水市: [119.92, 28.45, 20],
          市南区: [120.364533, 36.065674, 20],
          市北区: [120.366891, 36.111867, 20],
          黄岛区: [119.883281, 35.859051, 20],
          崂山区: [120.580013, 36.189115, 20],
          李沧区: [120.421969, 36.185575, 20],
          城阳区: [120.32982, 36.274819, 20],
          即墨区: [120.524774, 36.482445, 20],
          胶州市: [119.953343, 36.24043, 20],
          平度市: [119.944487, 36.782164, 20],
          莱西市: [120.435764, 36.858461, 20],
          东港区: [119.374789, 35.451344, 20],
          岚山区: [119.19844, 35.284019, 20],
          五莲县: [119.243496, 35.737456, 20],
          莒县: [118.880292, 35.667313, 20],
        };

        let convertData = function (data) {
@@ -177,11 +191,30 @@
              }`;
            },
          },
          visualMap: {
          visualMap: dark
            ? {
                type: "continuous",
                min: 0,
                max: maxValue,
                seriesIndex: 0,
                calculable: true,
                show: true,
                left: "3%",
                bottom: "5%",
                orient: "vertical",
                text: ["高", "低"],
                textStyle: { color: "#c3cde4", fontSize: 12 },
                inRange: {
                  color: ["#16325c", "#2f6fb5", "#38a5f8", "#22d3ee"],
                },
                itemWidth: 12,
                itemHeight: 90,
              }
            : {
            min: 0,
            max: 1,
            show: false,
            right:'20%',
                right: "20%",
            seriesIndex: 0,
            text: ["最高", "低"],
            textStyle: {
@@ -203,17 +236,17 @@
              { value: maxValue, color: "rgba(255, 69, 0,.9)" },
            ],
            show: true,
            backgroundColor:"rgba(255, 255, 255, 0.19)"
                backgroundColor: "rgba(255, 255, 255, 0.19)",
          },
          // 底部背景
          geo: {
            show: true,
            aspectScale: 0.85, //长宽比
            zoom: 1.2,
            top: "10%",
            left: "8%",
            map: "浙江",
            roam: false,
            zoom: this.zoom,
            top: this.top,
            left: this.left,
            map: "青岛日照",
            roam: this.roam,
            itemStyle: {
              normal: {
                areaColor: "rgba(0,0,0,0)",
@@ -231,12 +264,25 @@
            {
              name: "相关指数",
              type: "map",
              aspectScale: 0.85, //长宽比
              zoom: 1.2,
              mapType: "浙江", // 自定义扩展图表类型
              top: "10%",
              left: "8%",
              itemStyle: {
              geoIndex: 0,
              itemStyle: dark
                ? {
                    normal: {
                      areaColor: "#16325c",
                      borderColor: "rgba(56,165,248,.55)",
                      borderWidth: 1,
                      shadowBlur: 8,
                      shadowColor: "rgba(56,165,248,.5)",
                    },
                    emphasis: {
                      areaColor: "rgba(56,165,248,.6)",
                      borderColor: "#22d3ee",
                      borderWidth: 2,
                      shadowBlur: 12,
                      shadowColor: "#22d3ee",
                    },
                  }
                : {
                normal: {
                  color: "red",
                  areaColor: "rgba(19,54,162, .5)",
@@ -254,17 +300,21 @@
                },
              },
              label: {
                show: true,
                formatter: (params) =>
                  `${params.name},${params.value},${
                show: showLabel,
                formatter: (params) => {
                  if (nameMode) return params.name;
                  return `${params.name},${params.value},${
                    params.data.elseData ? params.data.elseData.value2 : ""
                  },${params.data.elseData ? params.data.elseData.value3 : ""}`,

                position: "right",
                distance: 20,
                  },${params.data.elseData ? params.data.elseData.value3 : ""}`;
                },
                position: nameMode ? "inside" : "right",
                distance: nameMode ? 0 : 20,
                textStyle: {
                  fontSize: 14,
                  color: "#606266",
                  fontSize: nameMode ? 14 : 14,
                  color: nameMode ? "#ffffff" : "#606266",
                  fontWeight: nameMode ? 600 : 400,
                  textBorderColor: nameMode ? "rgba(6,16,34,0.85)" : "transparent",
                  textBorderWidth: nameMode ? 2 : 0,
                },
                emphasis: {
                  textStyle: {
@@ -272,9 +322,11 @@
                  },
                },
                padding: [4, 4, 4, 4],
                backgroundColor: "rgba(255,255,255,0.6)",
                backgroundColor: nameMode
                  ? "rgba(0,0,0,0)"
                  : "rgba(255,255,255,0.6)",
                borderRadius: 3,
                borderColor: "#DCDFE6",
                borderColor: nameMode ? "rgba(0,0,0,0)" : "#DCDFE6",
              },
              data: newData,
              universalTransition: true,
@@ -411,7 +463,7 @@
    },
    // 重新随机选中地图区域
    reSelectMapRandomArea() {
      const length = 9;
      const length = 14;
      this.$nextTick(() => {
        const map = this.$refs.mapChart.chart;
        let index = Math.floor(Math.random() * length);