渲染 地图

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(() => {