配置Charts地图

2023-12-29 11:50:53 +08:00
parent 9ea3660392
commit 24f193c2c7
46 changed files with 176205 additions and 190 deletions
--- a/src/components/echarts/MyEchart.vue
+++ b/src/components/echarts/MyEchart.vue
@@ -6,14 +6,12 @@
 import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 import echarts from './echarts'
 import 'echarts/lib/component/dataZoom'
+const chartRef = ref<HTMLDivElement>()

 const props = defineProps(['options'])
-const chartRef = ref<HTMLDivElement>()
 let chart: echarts.ECharts | null = null
 const resizeHandler = () => {
-    setTimeout(() => {
        chart?.resize()
-    }, 100)
 }
 const initChart = () => {
    chart?.dispose()
--- a/src/components/echarts/MyEchartMap.vue
+++ b/src/components/echarts/MyEchartMap.vue
@@ -1,217 +1,162 @@
 <!-- 地图组件 -->
 <template>
-  <div class="bars_w" :id="id"></div>
+    <div class="bars_w" ref="chartMap" id="chartMap"></div>
 </template>

-<script setup>
-import { ref, nextTick, onMounted, defineEmits } from 'vue'
+<script setup lang="ts">
+import { onBeforeUnmount, 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 chinaJson from '@/assets/map/zh.json'
+
 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)
-      })
+    datas: {
+        type: Array,
+        required: true
    }
-  }
-  return res
-}
+})

-const GetEchar = () => { 
-  nextTick(() => {
-    let chartDom = document.getElementById(props.id)
+const myCharts = ref()
+
+const mapJson = ref()
+
+const fetchConfig = async (name: string) => {
+    const res = await import(`../../assets/map/${name}.json`)
+    return res.default
+    // GetEchar(res.default)
+}
+// fetchConfig()
+
+const emit = defineEmits(['getRegionByRegionId'])
+onMounted(() => {
+    GetEchar()
+})
+
+const GetEchar = async () => {
+    let chartDom = document.getElementById('chartMap')
    myCharts.value = echarts.init(chartDom)

-    axios.get(`./zg.json`).then((res) => {
-      echarts.registerMap('china', res.data)
-
-      let option = {
-        backgroundColor: '#001540',
+    echarts.registerMap('china', await fetchConfig('中国')) //注册可用的地图
+    var option = {
        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'
-                }
-              }
-            },
+            zoom: 1,
            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
-              }
+                normal: {
+                    show: true,
+                    fontSize: '14',
+                    color: 'rgba(0,0,0,0.7)'
+                }
            },
-            itemStyle: {
-              normal: {
-                shadowBlur: 10
-              }
-            },
-            zlevel: 1
-          }
-        ]
-      }
-      myCharts.value.setOption(option)
-    })

-    window.addEventListener('resize', function () {
-      myCharts.value.resize()
-    })
+            itemStyle: {
+                normal: {
+                    color: 'rgba(51, 69, 129, .8)', //地图背景色
+                    borderColor: '#999999',
+                    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, 135, 148, .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: '#ccc',
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 0,
+                    borderWidth: 0
+                }
+            },
+            regions: [
+                {
+                    name: '南海诸岛',
+                    itemStyle: {
+                        // 隐藏地图
+                        normal: {
+                            opacity: 0 // 为 0 时不绘制该图形
+                        }
+                    },
+                    label: {
+                        show: false // 隐藏文字
+                    }
+                }
+            ]
+        }
+    }
+
+    myCharts.value.setOption(option)
+    window.addEventListener('resize', resizeHandler)

    //设置默认选中高亮部分
    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
-      })
    })
-  })
+
+    // 点击事件
+    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
+        })
+    })
 }
+const resizeHandler = () => {
+    myCharts.value?.resize()
+}
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeHandler)
+    myCharts.value?.dispose()
+})
 </script>

 <style lang="scss" scoped>
 .bars_w {
-  width: 100%;
-  height: 500px;
+    width: 100%;
+    height: 100%;
 }
 </style>