站点地图展示，站点地图、单站监控首页部分接口联调

2025-06-20 02:00:10 +08:00
parent 4218776b77
commit c19d829a87
12 changed files with 356 additions and 83 deletions
--- a/src/views/ems/zddt/MapChart.vue
+++ b/src/views/ems/zddt/MapChart.vue
@ -0,0 +1,100 @@
+
+<template>
+  <div id="zddtChart" style="height: 100%;width:100%"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from '@/mixins/ems/resize'
+import china from '@/data/ems/china.json'//中国地图数据
+import 'echarts/lib/chart/map';
+echarts.registerMap('china', { geoJSON: china }); //注册可用地图
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      // ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
+      this.chart = echarts.init(document.querySelector('#zddtChart'))
+      this.setOption([])
+    },
+    setOption(data) {
+      this.chart.setOption({
+        color:['#FFBD00'],
+        backgroundColor: 'transparent', //背景色
+        // tooltip: {
+        //   trigger: 'item',
+        //   show: true,
+        // },
+        geo: { //地理坐标系组件   地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制
+          map: 'china', //地图类型  这儿展示的是中国地图
+          aspectScale: 0.85,
+          selectedMode: "single",// 开启单选
+          label: {
+            show: true, //是否显示标签  此处指是否显示地图上的地区名字
+            color: '#ffffff',
+            fontSize: 12
+          },
+          roam: true, //是否开启鼠标缩放和平移漫游
+          itemStyle: {
+            areaColor: "#03365b",
+            borderColor: "#4bf3f9",
+            shadowColor: '#03365b', //阴影颜色
+            shadowOffsetX: 0, //阴影偏移量
+            shadowOffsetY: 10, //阴影偏移量
+          },
+          emphasis: {
+            label: {
+              show: true,
+              color: '#ffffff',
+            },
+            itemStyle: {
+              areaColor: "#0f5d9d",
+            }
+          }
+        },
+        series: [
+          {
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            showEffectOn: "render",
+            data,
+            rippleEffect: {
+              brushType: "stroke",
+              scale: 5,
+              period: 2, // 秒数
+            },
+            symbolSize: 12,
+            clickable: false,
+            zlevel: 1,
+            label: {
+              formatter: "{b}",
+              position: "right",
+              show: true,
+            },
+          }
+        ]
+      })
+    }
+  }
+}
+
+
+</script>