U 苏州地铁首页

he wei

2025-05-08 84ff051d5c6bbf10e71f6f8d1d57740c26619d9e

 src/components/myCharts/MapChart.vue

@@ -1,19 +1,137 @@
<script>
import echarts from "echarts";
import BaseChart from "./BaseChart";
import common from "@/components/diagram/js/common";
import { getAllMapOutlineAction } from "@/views/home/js/api";
const { throttle } = common;
import HomeNormal from "@/assets/images/home.png";
// let mapHomeImage = new Image();
// mapHomeImage.src = HomeNormal;
// 正常的图标
import HomeNormalImage from "@/assets/images/home-normal.png";
// let homeNormalImage = new Image();
// homeNormalImage.src = HomeNormalImage;
// 充电的图标
import HomeChargeImage from "@/assets/images/home-charge.png";
// let homeChargeImage = new Image();
// homeChargeImage.src = HomeChargeImage;
// 告警图标
import HomeWarnImage from "@/assets/images/home-warn.png";
// let homeWarnImage = new Image();
// homeWarnImage.src = HomeWarnImage;
// 放电图标
import HomeDischargeImage from "@/assets/images/home-discharge.png";
// let homeDischargeImage = new Image();
// homeDischargeImage.src = HomeDischargeImage;
// 停电放电图标
import HomeTingDianImage from "@/assets/images/home-tingdian.png";
// let homeTingDianImage = new Image();
// homeTingDianImage.src = HomeTingDianImage;

// 透明背景图标
import HomeTransImage from "@/assets/images/home-trans.png";
// let homeTransImage = new Image();
// homeTransImage.src = HomeTransImage;

const subwayLines = [
    {
        name: '地铁 1 号线',
        coords: [
            [114.287177, 30.598208],
            [114.293133, 30.594368],
            // 更多站点经纬度...
        ]
    },
];

const colorList = ['#f00', '#00ff6c', '#ff00f0', '#f5f500', '#f1bb4c', '#ff5a06', '#9b00ff', '#00faaf', '#e5741c'];

// 生成随机颜色的函数
function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// [1,2,3,4] => [1,2] [2,3], [3,4]
function transformArray(arr, label) {
    const result = [];
    for (let i = 0, j = arr.length -1; i < j; i++) {
        result.push({coords: [arr[i], arr[i + 1]], label});
    }
    return result;
}

export default {
  name: "MapChart",
  extends: BaseChart,
  props: {
    name: {
    roam: {
      type: [String, Boolean],
      validator: (v) => [true, false, "scale", "move"].includes(v),
      default: true,
    },
    subway: {
      type: String,
      default: "zhongguo"
      default: ''
    }
  },
  data() {
    return {}
    return {
      name: "zhongguo",
      subWaySeries: [],
    };
  },
  methods: {
    async getSubWayData() {
      let subwayData = await require(`../../../public/mapJson/subway/${this.subway}.json`);
      // console.log('sub', subwayData, '=============');
      // format 数据
      try {
        this.subWaySeries = subwayData.l.map((item, index) => {
          let points = item.st.map(v => v.sl.split(',').map(vv => vv*1));
          return {
            type: 'lines',
            coordinateSystem: 'geo',
            name: item.ln,
            data: transformArray(points, item.ln),
            lineStyle: {
              color: colorList[index % colorList.length],
              width: 2
            },
            z: 3
          }
        })
      } catch (error) {
        this.subWaySeries = [];
        console.log('error', error, '=============');
      }
      // console.log('subwayseries', JSON.stringify(this.subWaySeries), '=============');
      
    },
    setMapName() {
      //查询激活轮廓图
      getAllMapOutlineAction()
        .then((res) => {
          let rs = res.data;
          if (rs.code == 1) {
            let data = rs.data;
            data.map((item, index) => {
              if (item.status == 1) {
                this.name = item.name;
              }
            });
          }
          this.setData([]);
        })
        .catch((err) => {
          this.setData([]);
          console.log(err);
        });
    },
    setData(data) {
      let option = this.getOption(data);
      this.setOption(option);
@@ -23,27 +141,55 @@
      let data = [
        {
          name: "节",
          value: 100,
          color: "#0081FF",
          fontColor: "#FFFFFF",
          points: [121.4648,31.2891],
          label: "测试机房1",
          value: 8,
          color: "#7668F9",
          points: [120.548762, 31.293819],
        },
        {
          name: "",
          value: 50,
          color: "#FF6B6C",
          fontColor: "#FFFFFF",
          points: [117.7831, 40.0204]
          label: "测试机房2",
          value: 100,
          color: "#0081FF",
          points: [120.614052, 31.30514],
        },
        {
          name: "节",
          value: 8,
          color: "#66F842",
          fontColor: "#000000",
          points: [117.3065, 39.0887]
        },
        // {
        //   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;
      data = list;
      let geoJson = require(`../../../public/mapJson/${mapName}.json`);
      echarts.registerMap(mapName, geoJson);

@@ -52,11 +198,11 @@
      areaList.forEach((v) => {
        data0.push({
          name: v.properties.name,
          value: Math.floor(Math.random() * 3) * 50
          value: Math.floor(Math.random() * 2) * 100,
        });
      });

      let convertData = function(data) {
      let convertData = function (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let item = data[i];
@@ -65,7 +211,8 @@
            color: item.color,
            fontColor: item.fontColor,
            value: item.points.concat(data[i].value),
            data: item
            label: item.label ? item.label : "",
            data: item,
          });
        }
        return res;
@@ -73,8 +220,13 @@
      return {
        tooltip: {
          show: true,
          formatter(params) {
            // console.log(params);
            return params.data.label;
          },
        },
        visualMap: {
        visualMap: 
        {
          show: false,
          type: "continuous",
          text: ["", ""],
@@ -83,22 +235,23 @@
          min: 0,
          max: 100,
          inRange: {
            color: ['#025483', '#116493', '#3A8EBE']
            color: ["#025483", "#116493"],
          },
          seriesIndex: [1]
          // seriesIndex: [1],
          seriesIndex: 1,
        },
        geo: {
          show: true,
          map: mapName,
          label: {
            normal: {
              show: false
              show: false,
            },
            emphasis: {
              show: false,
            }
            },
          },
          roam: true,
          roam: this.roam,
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
@@ -132,35 +285,106 @@
                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;
          //   },
          //   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: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              scale: 3,
            },
            symbolSize: 20,
            data: convertData(data),
            label:{
              formatter: '{b}',
              position: 'inside',
              show: true,
              color: "#FFFFFF",
              fontWeight: "bold"
            },
            itemStyle: {
              color(params) {
               return params.data.color;
              }
            },
            zlevel: 7
          },
          {
            type: 'map',
            type: "map",
            map: mapName,
            show: false,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
@@ -171,34 +395,50 @@
              emphasis: {
                show: false,
                textStyle: {
                  color: '#FF0000'
                }
              }
                  color: "#FF0000",
                },
              },
            },
            itemStyle: {
              areaColor: "#FF0000"
              areaColor: "#FF0000",
            },
            roam: true,
            animation: false,
            data: data0
            data: data0,
            tooltip: {
              show: false,
            },
          },
        ]
          ...this.subWaySeries
        ],
      };
    },
    handleClick(params) {
      if(params.seriesIndex == 0) {
      if (params.seriesIndex == 0) {
        let data = params.data;
        this.$emit('handleClick', data.data);
        this.$emit("handleClick", data.data);
      }

    }
    },
  },
  mounted() {
    this.setData([]);
    this.$options.chart.off("click"); //防止chart点击触发多次
    this.$options.chart.on('click', params=>{
  async mounted() {
    let chart = this.$options.chart;
    if (this.subway) {
      // 如果需要显示地铁 则先加载地铁数据
      await this.getSubWayData();
    }
    this.setMapName();
    chart.off("click"); //防止chart点击触发多次
    chart.on("click", (params) => {
      this.handleClick(params);
    });
  }
}
    chart.off("georoam");
    chart.on(
      "georoam",
      throttle(() => {
        let option = chart.getOption();
        chart.setOption(option);
      }, 100)
    );
  },
};
</script>