添加

src/components/echarts/MyEchartMap.vue

@@ -0,0 +1,217 @@
+<!-- 地图组件 -->
+<template>
+  <div class="bars_w" :id="id"></div>
+</template>
+
+<script setup>
+import { ref, nextTick, onMounted, defineEmits } from 'vue'
+import * as echarts from 'echarts'
+// import cqMap from '../../views/ECharts/zg.json'
+import 'echarts/map/js/china.js'
+import axios from 'axios'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  datas: {
+    type: Array,
+    required: true
+  }
+  // cqMap: {
+  //   // type: String,
+  //   // required: true
+  // }
+})
+const myCharts = ref()
+const emit = defineEmits(['getRegionByRegionId'])
+
+onMounted(() => {
+  GetEchar()
+})
+const convertData = function (data) {
+  var res = []
+  for (var i = 0; i < data.length; i++) {
+    var geoCoord = geoCoordMap[data[i].name]
+    if (geoCoord) {
+      res.push({
+        name: data[i].name,
+        value: geoCoord.concat(data[i].value)
+      })
+    }
+  }
+  return res
+}
+
+const GetEchar = () => { 
+  nextTick(() => {
+    let chartDom = document.getElementById(props.id)
+    myCharts.value = echarts.init(chartDom)
+
+    axios.get(`./zg.json`).then((res) => {
+      echarts.registerMap('china', res.data)
+
+      let option = {
+        backgroundColor: '#001540',
+        geo: {
+          show: true,
+          map: 'china',
+          roam: true,
+          top: 0,
+          left: 0,
+          zoom: 1,
+          label: {
+            emphasis: {
+              show: false
+            }
+          },
+          itemStyle: {
+            normal: {
+              borderColor: 'rgba(147, 235, 248, 1)',
+              borderWidth: 1,
+              areaColor: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 0.8,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+                  }
+                ],
+                globalCoord: false // 缺省为 false
+              },
+              shadowColor: 'rgba(128, 217, 248, 1)',
+              // shadowColor: 'rgba(255, 255, 255, 1)',
+              shadowOffsetX: -2,
+              shadowOffsetY: 2,
+              shadowBlur: 10
+            },
+            emphasis: {
+              areaColor: '#389BB7',
+              borderWidth: 0
+            }
+          }
+        },
+        series: [
+          //地图？
+          {
+            type: 'map',
+            map: 'china',
+            geoIndex: 0,
+            aspectScale: 0.75, //长宽比
+            showLegendSymbol: false, // 存在legend时显示
+            label: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: '#fff'
+                }
+              }
+            },
+            roam: true,
+            itemStyle: {
+              normal: {
+                areaColor: '#031525',
+                borderColor: '#FFFFFF'
+              },
+              emphasis: {
+                areaColor: '#2B91B7'
+              }
+            },
+            animation: false
+          },
+          //地图点的动画效果
+          {
+            //  name: 'Top 5',
+            type: 'effectScatter',
+            coordinateSystem: 'geo',
+
+            symbolSize: function (val) {
+              return val[2] / 10
+            },
+            showEffectOn: 'render',
+            rippleEffect: {
+              brushType: 'stroke'
+            },
+            hoverAnimation: true,
+            label: {
+              normal: {
+                formatter: '{b}',
+                position: 'right',
+                show: true
+              }
+            },
+            itemStyle: {
+              normal: {
+                shadowBlur: 10
+              }
+            },
+            zlevel: 1
+          }
+        ]
+      }
+      myCharts.value.setOption(option)
+    })
+
+    window.addEventListener('resize', function () {
+      myCharts.value.resize()
+    })
+
+    //设置默认选中高亮部分
+    let index = 11
+    myCharts.value.dispatchAction({
+      type: 'highlight',
+      seriesIndex: 0,
+      dataIndex: index
+    })
+
+    // 点击事件
+    myCharts.value.on('click', (e) => {
+      emit('getRegionByRegionId', e.data)
+      myCharts.value.dispatchAction({
+        type: 'downplay',
+        seriesIndex: 0,
+        dataIndex: 0
+      })
+      if (e.dataIndex != index) {
+        myCharts.value.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: index
+        })
+      }
+      myCharts.value.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 0,
+        dataIndex: e.dataIndex
+      })
+      index = e.dataIndex
+    })
+    // 当鼠标离开时
+    myCharts.value.on('mouseout', function (e) {
+      myCharts.value.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 0,
+        dataIndex: index
+      })
+    })
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.bars_w {
+  width: 100%;
+  height: 500px;
+}
+</style>