渲染地图

2023-12-29 16:25:26 +08:00
parent f8768b5f33
commit 2ba7cf7dce
3 changed files with 203 additions and 74 deletions
--- a/src/components/echarts/MyEchart.vue
+++ b/src/components/echarts/MyEchart.vue
@@ -19,15 +19,14 @@ const initChart = () => {
    chart = echarts.init(chartRef.value as HTMLDivElement)
    chart.setOption({
        title: {
-            ...props.options.title,
            left: 'center',
            textStyle: {
                color: '#000',
                fontSize: 18
-            }
+            },
+            ...props.options.title
        },
        tooltip: {
-            ...(props.options.tooltip || null),
            trigger: 'axis',

            axisPointer: {
@@ -44,10 +43,10 @@ const initChart = () => {
                fontSize: 14
            },
            backgroundColor: 'rgba(0,0,0,0.35)',
-            borderWidth: 0
+            borderWidth: 0,
+            ...(props.options.tooltip || null)
        },
        legend: {
-            ...(props.options.xAxis.legend || null),
            right: 20,
            top: 0,
            itemGap: 10,
@@ -57,7 +56,8 @@ const initChart = () => {
                padding: [2, 0, 0, 0] //[上、右、下、左]
            },
            itemWidth: 15,
-            itemHeight: 10
+            itemHeight: 10,
+            ...(props.options.legend || null)
        },

        grid: {
@@ -65,12 +65,10 @@ const initChart = () => {
            left: '10px',
            right: '40px',
            bottom: '40px',
-
            containLabel: true
        },
        xAxis: [
            {
-                ...(props.options.xAxis || null),
                type: 'category',
                axisTick: { show: false },
                axisLine: {
@@ -84,12 +82,13 @@ const initChart = () => {
                        color: '#000',
                        fontSize: '12'
                    }
-                }
+                },
+                ...(props.options.xAxis || null)
            }
        ],
        yAxis: [
            {
-                ...(props.options.yAxis || null),
+               
                type: 'value',

                nameTextStyle: {
@@ -113,7 +112,8 @@ const initChart = () => {
                        type: 'dashed',
                        opacity: 0.5
                    }
-                }
+                },
+                ...(props.options.yAxis || null),
            }
        ],
        dataZoom: [
--- a/src/components/echarts/MyEchartMap.vue
+++ b/src/components/echarts/MyEchartMap.vue
@@ -1,25 +1,18 @@
 <!-- 地图组件 -->
 <template>
+    <div style="position: relative">
        <div class="bars_w" ref="chartMap" id="chartMap"></div>
+        <span @click="circle" v-show="showCircle" class="iconfont icon-back" style="color: #003078"></span>
+    </div>
 </template>

 <script setup lang="ts">
-import { onBeforeUnmount, ref, nextTick, onMounted, defineEmits } from 'vue'
+import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
 import * as echarts from 'echarts'

-import chinaJson from '@/assets/map/zh.json'
-
-import axios from 'axios'
-const props = defineProps({
-    datas: {
-        type: Array,
-        required: true
-    }
-})
-
+const props = defineProps(['options'])
 const myCharts = ref()
-
-const mapJson = ref()
+const showCircle = ref(false)

 const fetchConfig = async (name: string) => {
    const res = await import(`../../assets/map/${name}.json`)
@@ -29,19 +22,63 @@ const fetchConfig = async (name: string) => {
 // fetchConfig()

 const emit = defineEmits(['getRegionByRegionId'])
-onMounted(() => {
-    GetEchar('中国')
-})
+onMounted(() => {})

-const GetEchar = async (name:string) => {
+const GetEchar = async (name: string) => {
    let chartDom = document.getElementById('chartMap')
+    myCharts.value?.resize()
    myCharts.value = echarts.init(chartDom)
-
    echarts.registerMap('china', await fetchConfig(name)) //注册可用的地图
-    var option = {
+    let option = {
+        title: {
+            left: 'center',
+            top: '3%',
+            ...props.options.title
+        },
+        tooltip: {
+            trigger: 'item',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.35)',
+            ...(props.options.tooltip || null)
+        },
+        legend: {
+            orient: 'vertical',
+            left: 26,
+            bottom: 40,
+            itemWidth: 16,
+            itemHeight: 16,
+
+            ...(props.options.legend || null)
+        },
+        color: [
+            ...(props.options.color || ''),
+            '#07CCCA ',
+            '#00BFF5',
+            '#FFBF00',
+            '#77DA63',
+            '#D5FF6B',
+            '#Ff6600',
+            '#FF9100',
+            '#5B6E96',
+            '#66FFCC',
+            '#B3B3B3'
+        ],
        geo: {
            map: 'china',
            zoom: 1,
+
            roam: true,
            label: {
                normal: {
@@ -100,53 +137,29 @@ const GetEchar = async (name:string) => {
                    }
                }
            ]
-        }
+        },
+        ...props.options.options
    }

    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 => {
-        console.log('🚀 ~ file: MyEchartMap.vue:139 ~ GetEchar ~ e:', e.name)
+    myCharts.value.off('click')
+    myCharts.value.on('click', (e: any) => {
+        if (name == '中国' && e.componentIndex == 0) {
            GetEchar(e.name)
-        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
-            })
+            showCircle.value = true
        }
-        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
-        })
+
+        emit('getRegionByRegionId', e)
    })
 }
+// 返回
+const circle = () => {
+    GetEchar('中国')
+    showCircle.value = false
+}
 const resizeHandler = () => {
    myCharts.value?.resize()
 }
@@ -154,6 +167,13 @@ onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeHandler)
    myCharts.value?.dispose()
 })
+watch(
+    () => props.options,
+    (newVal, oldVal) => {
+        GetEchar('中国')
+
+    }
+)
 </script>

 <style lang="scss" scoped>
@@ -161,4 +181,12 @@ onBeforeUnmount(() => {
    width: 100%;
    height: 100%;
 }
+.iconfont {
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 2;
+    font-size: 20px;
+}
 </style>
--- a/src/views/Event-boot/Region/distribution.vue
+++ b/src/views/Event-boot/Region/distribution.vue
@@ -23,7 +23,7 @@
        <div>
            <el-row :gutter="20">
                <el-col :span="12">
-                    <MyEchartMap class="map" :datas="[]" />
+                    <MyEchartMap :options="echartList" class="map" />
                </el-col>
                <el-col :span="12">1231</el-col>
            </el-row>
@@ -36,7 +36,9 @@ import { useDictData } from '@/stores/dictData'
 import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
 import { ref, reactive, onMounted, provide } from 'vue'
 const options = ref<object[]>([])
+const echartList = ref({})
 const deptIndex = ref<string>('')
+
 const DictData = useDictData()
 const formInline = reactive({
    deptIndex: '5699e5916a18a6381e1ac92da5bd2628',
@@ -51,9 +53,108 @@ const info = () => {
 }

 const onSubmit = () => {
-    getAreaLineDetail(formInline)
-        .then(res => {})
-        .catch(err => {})
+    getAreaLineDetail(formInline).then(res => {
+        echartList.value = {
+            title: {
+                text: '监测网分布' //+ "(" + _this.titles + ")",
+            },
+            tooltip: {
+                formatter: function (params: any) {
+                    //console.log(params)
+                    var tips = ''
+                    if (params.value == 0) {
+                        tips = "<font style='color: #000'>暂无数据</font><br/>"
+                    } else {
+                        tips +=
+                            "<font style='color: #000'> " +
+                            params.name +
+                            '</font><br/>区域暂降评估' +
+                            "<font style='color: #000'>:" +
+                            params.value +
+                            '</font><br/>'
+                    }
+                    return tips
+                }
+            },
+            color: ['green', 'red'],
+            legend: {
+                data: [
+                    {
+                        name: '正常'
+                    },
+                    {
+                        name: '中断'
+                    }
+                ]
+            },
+            options: {
+                series: []
+            }
+        }
+        let mapList = [[], [], []]
+        if (res.data.substationDetailVOList != null) {
+            res.data.substationDetailVOList.forEach((item: any) => {
+                if (item.color == 'green') {
+                    mapList[0].push(item)
+                } else if (item.color == 'red') {
+                    mapList[1].push(item)
+                }
+            })
+        }
+        mapList.forEach((item, ind) => {
+            echartList.value.options.series.push({
+                type: 'scatter',
+                mapName: 'china',
+                name: ind == 0 ? '正常' : ind == 1 ? '中断' : '变电站',
+                coordinateSystem: 'geo',
+                geoIndex: 0,
+                animation: false, //坐标点是否显示动画
+                roam: true,
+                symbol: 'pin',
+                symbolSize: function () {
+                    //坐标点大小
+                    return 30
+                },
+                label: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: false
+                    }
+                },
+                data: item.map(function (itemOpt: any) {
+                    // console.log(itemOpt);
+                    return {
+                        name: itemOpt.srbName,
+                        value: [
+                            parseFloat(itemOpt.coordY), //经度
+                            parseFloat(itemOpt.coordX) //维度
+                        ],
+
+                        itemStyle: {
+                            //地图区域的多边形
+                            normal: {
+                                color: itemOpt.color, //坐标点颜色
+                                shadowBlur: 0, // 图形阴影的模糊大小
+                                shadowOffsetX: 0 // 阴影水平方向上的偏移距离。
+                            }
+                        },
+                        tooltip: {
+                            //仅在 options中最外层的 tooltip.trigger 为 'item'时有效
+                            position: 'bottom', //提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效
+                            formatter: function (params: any, ticket: any, callback: any) {
+                                var strHtml = '<div>变电站:' + itemOpt.subName + '<br/>' + '监测点:' + itemOpt.srbName
+
+                                strHtml += '</div>'
+                                return strHtml
+                            }
+                        }
+                    }
+                })
+            })
+        })
+    })
 }

 onMounted(() => {