数据大屏数据对接

src/components/Echart/src/charts.vue

@@ -25,6 +25,7 @@ const props = defineProps({
 })
 const elRef = ref<ElRef>()
 let chartRef: Nullable<echarts.ECharts> = null
+let observer:Nullable<ResizeObserver>=null
 
 const initChart = () => {
   echarts.registerMap('yx', YX as any)
@@ -33,6 +34,8 @@ const initChart = () => {
     chartRef.setOption(props.options, true)
   }
 }
+
+
 watch(
   () => props.options,
   (options) => {
@@ -73,7 +76,7 @@ onActivated(() => {
 
 defineExpose({
   getChartRef,
-  resizeHandler
+  resizeHandler,
 })
 </script>
 <template>

src/views/screen/compenonts/map.vue

@@ -5,7 +5,7 @@
     <Numbox class="num-box block-box" />
     <Tabber class="tabber-box" />
     <Norm class="block-box nomr-box" />
-    <section class="map">
+    <section class="map z-2">
       <charts :options="mapOption" ref="mapChartRef" class="mapChart" />
     </section>
   </section>
@@ -17,13 +17,32 @@ import Weather from './weather.vue'
 import Numbox from './numbox.vue'
 import Tabber from './tabber.vue'
 import Norm from './norm.vue'
-
+import * as echarts from 'echarts'
 let observer: Nullable<ResizeObserver> = null
 const mapWrapperRef = ref()
-
+const mapPoint = [
+  { name: '七里河镇', value: ['41.339430', '121.261680'] },
+  { name: '大榆树堡镇', value: ['41.523050', '121.462200'] },
+  { name: '稍户营子镇', value: ['41.745590', '121.571260'] },
+  { name: '九道岭镇', value: ['41.596910', '121.306600'] },
+  { name: '高台子镇', value: ['41.701760', '121.369400'] },
+  { name: '瓦子峪镇', value: ['41.682170', '121.534570'] },
+  { name: '张家堡镇', value: ['41.392910', '121.442170'] },
+  { name: '头道河镇', value: ['41.522750', '121.151930'] },
+  { name: '留龙沟镇', value: ['41.404170', '121.05586'] },
+  { name: '大定堡满族乡', value: ['41.403600', '121.12812'] },
+  { name: '义州街道', value: ['41.535923', '121.238258'] },
+  { name: '城关街道', value: ['41.535923', '121.23825'] },
+  { name: '刘龙台镇', value: ['41.512160', '120.924230'] },
+  { name: '头台镇', value: ['41.640424', '121.202267'] },
+  { name: '前杨镇', value: ['41.506351', '121.222911'] },
+  { name: '聚粮屯镇', value: ['41.512976', '121.318992'] },
+  { name: '地藏寺满族乡', value: ['41.426387', '120.952806'] },
+  { name: '白庙子乡', value: ['41.25', '120.22'] }
+]
 const mapChartRef = ref()
 
-const mapOption = ref({
+const mapOption: any = ref({
   geo: [
     {
       map: 'yx',
@@ -49,7 +68,16 @@ const mapOption = ref({
         },
         borderColor: '#34F6BA'
       },
-      zlevel: 0
+      zLevel: 0,
+      emphasis: {
+        disabled: true
+      },
+      select: {
+        disabled: true
+      },
+      blur: {
+        disabled: true
+      }
     },
     {
       map: 'yx',
@@ -59,6 +87,9 @@ const mapOption = ref({
         areaColor: '#002C1F',
         borderColor: 'transparent'
       },
+      emphasis: {
+        disabled: true
+      },
       zlevel: -1
     },
     {
@@ -69,6 +100,9 @@ const mapOption = ref({
         areaColor: '#078B63',
         borderColor: 'transparent'
       },
+      emphasis: {
+        disabled: true
+      },
       zlevel: -2
     },
     {
@@ -83,20 +117,288 @@ const mapOption = ref({
         shadowOffsetX: 0,
         shadowOffsetY: 0
       },
+      emphasis: {
+        disabled: true
+      },
       zlevel: -3
     }
-  ]
+  ],
+  series: [
+    {
+      type: 'scatter',
+      coordinateSystem: 'geo',
+      geoIndex: 0,
+      symbolSize: 50,
+      label: {
+        show: true,
+        fontWeight: 'bold',
+        fontSize: 14,
+        fontStyle: 'italic',
+        formatter: (v) => {
+          return `AQI 25`
+        }
+      },
+      data: [
+        {
+          name: 'xxx',
+          value: [121.59, 41.68],
+          itemStyle: {
+            color: {
+              type: 'radial',
+              x: 0.5,
+              y: 0.5,
+              r: 0.5,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'rgba(239, 68, 68, .5)'
+                },
+                {
+                  offset: 0.5,
+                  color: 'rgba(239, 68, 68, .3)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(239, 68, 68, 0)'
+                }
+              ]
+            },
+            // color:'#56CA00',
+            shadowBlur: 2,
+            shadowColor: 'rgba(239, 68, 68, .1)',
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            opacity: 0.8
+          },
+          symbolSize: 60,
+          label: {
+            fontSize: 18,
+            color: 'rgba(239, 68, 68, 1)'
+          }
+        },
+        {
+          name: 'xxx',
+          value: [121.310975, 41.5434265],
+          itemStyle: {
+            color: {
+              type: 'radial',
+              x: 0.5,
+              y: 0.5,
+              r: 0.5,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'rgba(86, 202, 0, .5)'
+                },
+                {
+                  offset: 0.5,
+                  color: 'rgba(86, 202, 0, .3)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(86, 202, 0, 0)'
+                }
+              ]
+            },
+            // color:'#56CA00',
+            shadowBlur: 2,
+            shadowColor: 'rgba(86, 202, 0, .1)',
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            opacity: 0.8
+          },
+          label: {
+            color: 'rgba(86, 202, 0, 1)'
+          }
+        },
+        {
+          name: 'xxx',
+          value: [121.00383704808695, 41.5434265],
+          symbolSize: 100,
+          itemStyle: {
+            color: {
+              type: 'radial',
+              x: 0.5,
+              y: 0.5,
+              r: 0.5,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'rgba(22, 177, 255, .5)'
+                },
+                {
+                  offset: 0.5,
+                  color: 'rgba(22, 177, 255, .3)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(22, 177, 255, 0)'
+                }
+              ]
+            },
+            // color:'#56CA00',
+            shadowBlur: 2,
+            shadowColor: 'rgba(22, 177, 255, .1)',
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            opacity: 0.8
+          },
+          label: {
+            fontSize: 30,
+            color: 'rgba(22, 177, 255, 1)'
+          }
+        },
+        {
+          name: 'xxx',
+          value: [121.01, 41.35],
+          itemStyle: {
+            color: {
+              type: 'radial',
+              x: 0.5,
+              y: 0.5,
+              r: 0.5,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'rgba(255, 231, 0, .5)'
+                },
+                {
+                  offset: 0.5,
+                  color: 'rgba(255, 231, 0, .3)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 231, 0, 0)'
+                }
+              ]
+            },
+            // color:'#56CA00',
+            shadowBlur: 2,
+            shadowColor: 'rgba(255, 231, 0, .1)',
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            opacity: 0.8
+          },
+          label: {
+            color: 'rgba(255, 231, 0, 1)'
+          }
+        }
+      ],
+      zLevel: 1
+    }
+  ],
+  xAxis: [],
+  yAxis: [],
+  grid: []
 })
 
 const handlerResize = () => {
   unref(mapChartRef).resizeHandler()
 }
 
-
+const initMap = () => {
+  const chartInstance = unref(mapChartRef).getChartRef()
+  echarts.util.each(mapPoint, (dataItem, id) => {
+    //获取对应城市的经纬度
+    const geoCoord = dataItem.value.reverse()
+    //把对应城市的经纬度转换成像素值，好让柱状图展示在对应的城市上
+    const coord = chartInstance.convertToPixel('geo', geoCoord)
+    const value1 = Math.floor(Math.random() * 100)
+    const value2 = Math.floor(Math.random() * 100)
+    const idx = `${id}`
+    mapOption.value.xAxis.push({
+      id: idx,
+      gridId: idx,
+      type: 'category',
+      zLevel: 2,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 10
+      },
+      data: [dataItem.name]
+    })
+    //针对每个城市数据添加y轴
+    mapOption.value.yAxis.push({
+      id: idx,
+      gridId: idx,
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#fff'
+        }
+      },
+      zLevel: 2
+    })
+    mapOption.value.grid.push({
+      id: idx,
+      //下面的宽高最终会体现为柱状图展示的宽高，这个要设置一下，如果不设置，整体的高度会很高而且展示的位置都是错乱的
+      width: 30,
+      height: 63,
+      //通过转换的像素值，最终展示柱状图的位置，按自己需要进行调整即可
+      left: coord[0] - 15,
+      top: coord[1] - 55,
+      zLevel: 0
+    })
+    //下面都是添加柱状图展示的数据
+    mapOption.value.series.push({
+      name: `${dataItem.name}1`,
+      type: 'bar',
+      coordinateSystem: 'cartesian2d',
+      xAxisIndex: idx,
+      yAxisIndex: idx,
+      zLevel: 3,
+      barWidth: 6,
+      itemStyle: {
+        color: '#56ca00'
+      },
+	    label: {
+		    show: true,
+		    position: 'top',
+		    color: '#fff'
+	    },
+      data: [value1]
+    })
+    mapOption.value.series.push({
+      name: `${dataItem.name}2`,
+      type: 'bar',
+      coordinateSystem: 'cartesian2d',
+      xAxisIndex: idx,
+      yAxisIndex: idx,
+      zLevel: 3,
+      barWidth: 6,
+      itemStyle: {
+        color: '#ffe700',
+	      fontSize:10,
+      },
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff'
+      },
+      data: [value2]
+    })
+  })
+}
 
 onMounted(() => {
   observer = new ResizeObserver(handlerResize)
   observer.observe(mapWrapperRef.value)
+  initMap()
 })
 
 onUnmounted(() => {

src/views/screen/compenonts/rightwrapper.vue

@@ -7,18 +7,27 @@
       <Charts :options="row2Options" ref="row2Chart" />
     </TitleBox>
     <TitleBox title="资质许可状态">
-      <section class="height-100% width-100% flex flex-col gap-12px">
-        <section class="flex justify-between font-size-14px" v-for="(row, index) in list" :key="index">
-          <span>{{ row.name }}</span>
-          <section class="color-#56CA00">
-            逾期
-            <count-to
-              :start-val="0"
-              :end-val="row.count"
-              :duration="1000"
-              :options="{ separator: ',', decimal: 0 }"
-            />
-            天
+      <section class="list-container">
+        <section
+          class="position-absolute inset-0 overflow-y-auto flex flex-col gap-12px list"
+          ref="listRef"
+        >
+          <section
+            class="flex justify-between font-size-14px"
+            v-for="(row, index) in list"
+            :key="index"
+          >
+            <span>{{ row.name }}</span>
+            <section class="color-#56CA00">
+              逾期
+              <count-to
+                :start-val="0"
+                :end-val="row.count"
+                :duration="1000"
+                :options="{ separator: ',', decimal: 0 }"
+              />
+              天
+            </section>
           </section>
         </section>
       </section>
@@ -32,9 +41,7 @@
 <script setup lang="ts">
 import TitleBox from './titleBox.vue'
 import { ScreenApi } from '@/api/screen'
-
 const rightWrapperRef = ref()
-
 let observer: Nullable<ResizeObserver> = null
 const row1Options = ref({
   grid: {
@@ -176,7 +183,7 @@ const row1Options = ref({
 })
 const list: any = ref([])
 const color = ['#56CA00', '#FFE700', '#16B1FF']
-const row2Options = ref({
+const row2Options:any = ref({
   series: [
     {
       type: 'pie',
@@ -407,11 +414,12 @@ const row3Options = ref({
 const row1Chart = ref()
 const row2Chart = ref()
 const row3Chart = ref()
+
 const initChart = () => {}
 
 const queryParams: any = ref()
 
-//右一数据
+//右一
 const rightFirst = async () => {
   const data: any = await ScreenApi.getRightFirst(queryParams.value)
   row1Options.value.xAxis.data = data.map((i) => i.name)
@@ -419,7 +427,7 @@ const rightFirst = async () => {
   row1Options.value.series[1].data = data.map((i) => i.taskValue)
 }
 
-//右二数据
+//右二
 const rightSecond = async () => {
   const data = await ScreenApi.getRightSecond(queryParams.value)
   row2Options.value.series[0].data = data.map((i, index) => {
@@ -445,11 +453,12 @@ const rightSecond = async () => {
   }
 }
 
-// 右三数据
+// 右三
 const rightThird = async () => {
-	list.value = await ScreenApi.getRightThird(queryParams.value)
+  list.value = await ScreenApi.getRightThird(queryParams.value)
 }
-// 右四数据
+
+// 右四
 const rightFourth = async () => {
   const data = await ScreenApi.getRightFourth(queryParams.value)
   row3Options.value.xAxis.data = data.map((i) => i.name)
@@ -487,5 +496,17 @@ onUnmounted(() => {
   grid-template-rows: 1.5fr 1fr 1.3fr 1.5fr;
   grid-template-columns: 1fr;
   grid-gap: 20px;
+  .list-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    scroll-behavior: smooth;
+    .list {
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
 }
 </style>

src/views/screen/compenonts/tabber.vue

@@ -51,14 +51,14 @@ const curTab = ref(0)
   gap: 8px;
   width: fit-content;
   .item {
-    font-size: 12px;
-    padding: 6px;
+	  font-size: 1rem;
+	  padding: 6px;
     white-space: nowrap;
     border: 1px solid rgba(255, 255, 255, 0.15);
 	  transition: .2s all;
   }
 	.type-item{
-		font-size: 12px;
+		font-size: 1rem;
 		padding: 8px;
 		white-space: nowrap;
 		border: 1px solid rgba(255, 255, 255, 0.15);