hotline-bs/src/views/judicial/center.map.ts

import { getImageUrl } from "@/utils/tools";

const arrow = new Image();
arrow.src = getImageUrl("home/map_select.png");
export const optionHandle = (regionCode: string, list: object[]) => {
  return {
    backgroundColor: "rgba(0,0,0,0)",
    /*    tooltip: {
      trigger: "item",
      position: function (
        point: any[],
        params: any,
        dom: any,
        rect: any,
        size: any
      ) {
        let x = 0; // x坐标位置
        let y = 0; // y坐标位置
        // 当前鼠标位置
        const pointX = point[0];
        const pointY = point[1];
        // 提示框大小
        const boxWidth = size.contentSize[0];
        const boxHeight = size.contentSize[1];

        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
          x = pointX + 10;
        } else {
          // 左边放的下
          x = pointX - boxWidth - 10;
        }

        // boxHeight > pointY 说明鼠标上边放不下提示框
        if (boxHeight > pointY) {
          y = 5;
        } else {
          // 上边放得下
          y = pointY - boxHeight;
        }
        return [x, y];
      },
      show: true,
      textStyle: {
        fontSize: 14,
        color: "#fff",
      },
      className: "custom-tooltip-box",
      rich: {
        arrow: {
          backgroundColor: {
            image: getImageUrl("home/tool_tip_arrow.png"),
          },
        },
      },
      formatter: function (params: any) {
        let tipHtml = "";
        tipHtml = `
                    <div class="custom-tooltip-style">
                        <div class='custom-tooltip-name'> <span class="custom-tooltip-arrow"></span> ${params.name}</div>
                        <div class='custom-tooltip-style-box'>
                            <div class="custom-tooltip-style-box-text">
                                <div class="custom-tooltip-style-box-text-item"><span class="custom-tooltip-style-box-text-item-title">工单量：</span><span class="custom-tooltip-style-box-text-item-value">${params.data.orderCountNum}</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item"><span class="custom-tooltip-style-box-text-item-title">行政执法工单：</span><span class="custom-tooltip-style-box-text-item-value">${params.data.enforcementOrderNum}</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item"><span class="custom-tooltip-style-box-text-item-title">线索属实工单：</span><span class="custom-tooltip-style-box-text-item-value">${params.data.theClueIsTrueNum}</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item"><span class="custom-tooltip-style-box-text-item-title">线索不属实工单：</span><span class="custom-tooltip-style-box-text-item-value">${params.data.theClueIsNotTrueNum}</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item"><span class="custom-tooltip-style-box-text-item-title">推诿工单：</span><span class="custom-tooltip-style-box-text-item-value">${params.data.passTheBuckOrderNum}</span> <b> 件</b></div>
                            </div>
                        </div>
                    </div>
                `;
        return tipHtml;
      },
    },*/
    geo: [
      {
        layoutCenter: ["50%", "50%"], //位置
        layoutSize: "180%", //大小
        show: true,
        map: regionCode,
        roam: false,
        zoom: 0.65,
        aspectScale: 1,
        label: {
          show: false,
        },
        itemStyle: {
          areaColor: {
            type: "linear",
            x: 1200,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(38,134,132,0.35)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(38,134,132,0.75)", // 50% 处的颜色
              },
            ],
            global: true, // 缺省为 false
          },
          borderColor: "#c0f3fb",
          borderWidth: 1,
          shadowColor: "#8cd3ef",
          shadowOffsetY: 10,
          shadowBlur: 120,
        },
      },
      {
        type: "map",
        map: regionCode,
        aspectScale: 1,
        zoom: 0.65,
        layoutCenter: ["50%", "54%"],
        layoutSize: "180%",
        roam: false,
        silent: true,
        itemStyle: {
          borderWidth: 2,
          borderColor: "rgba( 38,134,132,0.8)",
          shadowColor: "rgba(29, 111, 165,0.8)",
          shadowOffsetY: 10,
          shadowBlur: 2,
          areaColor: "rgba(5,21,35,0.2)",
          borderType: "dashed",
        },
      },
    ],
    geo3D: [
      {
        show: false,
        map: regionCode,
        aspectScale: 1,
      },
    ],
    series: [
      {
        type: "map",
        map: regionCode, // 自定义扩展图表类型
        aspectScale: 1,
        zoom: 0.65,
        showLegendSymbol: true,
        boxDepth: 120, //地图倾斜度
        regionHeight: 3, //地图厚度
        label: {
          show: false,
        },
        itemStyle: {
          color: "rgba( 73,122,105,.3)",
          borderColor: "#3CFFFD",
          borderWidth: 1,
          areaColor: {
            color: "rgba( 73,122,105,.3)",
          },
        },
        emphasis: {
          // 选中的样式
          label: {
            formatter: ["{b|}"].join("\n"),
            rich: {
              b: {
                backgroundColor: {
                  image: arrow,
                },
                height: 60,
              },
            },
          },
          itemStyle: {
            /*            borderColor: "rgba( 62, 254, 254,.3)",
            borderWidth: 2,
            areaColor: "rgba( 62, 254, 254,.3)",*/
          },
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: "180%",
        data: list,
        selectedMode: "single", // 只允许单选
      },
    ],
  };
};