CN-322 fix: 修复地图加载问题

src/views/Temp.vue

@@ -23,12 +23,16 @@
       <div id="pieCanvas4" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
       <div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">入占比</div>
       <div id="pieCanvas5" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>-->
+      <div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">入</div>
+      <div id="sunCanvas1" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
+      <div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">出</div>
+      <div id="sunCanvas2" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
     </div>
   </div>
 </template>
 
 <script>
-import { lineData, lineOption } from './testData'
+import { lineData, lineOption, sunData1, sunData2, sunOption } from './testData'
 import * as echarts from 'echarts'
 import { getMillisecond } from '@/utils/date-util'
 import unitConvert from '@/utils/unit-convert'
@@ -80,6 +84,16 @@ export default {
         lineChart.setOption(option)
       })
     },
+    initSunChart (index) {
+      const option = this.$_.cloneDeep(sunOption)
+      const data = index === 1 ? sunData1 : sunData2
+      option.series.data = data
+      const dom = document.getElementById('sunCanvas' + index)
+      const lineChart = echarts.init(dom)
+      this.$nextTick(() => {
+        lineChart.setOption(option)
+      })
+    }
     /* initPie (index) {
       const data = pieData[index].map(p => {
         return {
@@ -102,6 +116,8 @@ export default {
     this.initLine(lineData2, 3)
     this.initLine(lineData3, 6)*/
     this.initLineChart()
+    this.initSunChart(1)
+    this.initSunChart(2)
     /* this.initPie(0)
     this.initPie(1)
     this.initPie(2)

src/views/charts/charts/ChartMap.vue

@@ -32,13 +32,13 @@ import { HeatLegend } from '@/components/amcharts/heatLegend'
 import { getData } from '@/utils/api'
 import chartMixin from './chart-mixin'
 import _ from 'lodash'
+import { shallowRef } from 'vue'
 
 export default {
   name: 'ChartMap',
   data () {
     return {
       unitTypes,
-      myChart: null,
       mapPictureUrl: '/Tiles/{z}/{x}/{y}.png',
       showMapBackButton: false,
       polygonSeries: null, // 世界地图series
@@ -109,66 +109,67 @@ export default {
       chart.geodata = getGeoData(storageKey.iso36112WorldLow)
       chart.projection = new am4Maps.projections.Miller()
       this.myChart = chart
+      setTimeout(() => {
+        this.polygonSeries = this.polygonSeriesFactory()
 
-      this.polygonSeries = this.polygonSeriesFactory()
+        if (this.isMapPoint) {
+          this.worldImageSeries = this.imageSeriesFactory()
+        }
 
-      if (this.isMapPoint) {
+        this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
-        this.worldImageSeries = this.imageSeriesFactory()
-      }
 
-      this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
+        // 地图点击事件
-
+        if (this.isMapBlock) {
-      // 地图点击事件
+          this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
-      if (this.isMapBlock) {
+            const countryId = ev.target.dataItem.dataContext.id
-        this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
+            if (countryId) {
-          const countryId = ev.target.dataItem.dataContext.id
+              ev.target.series.chart.zoomToMapObject(ev.target)
-          if (countryId) {
+              ev.target.isHover = false
-            ev.target.series.chart.zoomToMapObject(ev.target)
+              const geoData = getGeoData(countryId)
+              if (geoData) {
+                this.countrySeries = this.polygonSeriesFactory()
+                this.countrySeries.geodata = geoData
+                this.polygonSeries.hide()
+                const country = ev.target.dataItem.dataContext.serverCountry
+                const queryParams = { ...this.queryParams, country }
+                const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
+                this.loadAm4ChartMap(this.countrySeries, null, country, chartData)
+              }
+            }
+          })
+        } else if (this.isMapPoint) {
+          this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
+            const countryId = ev.target.dataItem.dataContext.id
             ev.target.isHover = false
-            const geoData = getGeoData(countryId)
+            if (countryId) {
-            if (geoData) {
+              const targetMapObject = this.polygonSeries.getPolygonById(countryId)
-              this.countrySeries = this.polygonSeriesFactory()
+              targetMapObject.series.chart.zoomToMapObject(targetMapObject)
-              this.countrySeries.geodata = geoData
+              const geoData = getGeoData(countryId)
-              this.polygonSeries.hide()
+              if (geoData) {
-              const country = ev.target.dataItem.dataContext.serverCountry
+                this.countrySeries = this.polygonSeriesFactory()
-              const queryParams = { ...this.queryParams, country }
+                this.countrySeries.geodata = geoData
-              const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
+                this.countryImageSeries = this.imageSeriesFactory()
-              this.loadAm4ChartMap(this.countrySeries, null, country, chartData)
+                this.polygonSeries.hide()
+                this.worldImageSeries.hide()
+                const country = ev.target.dataItem.dataContext.location
+                const queryParams = { ...this.queryParams, ipLocationCountry: country }
+                const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
+                this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
+              }
             }
-          }
+          })
-        })
+        }
-      } else if (this.isMapPoint) {
+        // dns地图legend上的数据
-        this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
+        if (!_.isEmpty(this.chartInfo.params.legendUrl)) {
-          const countryId = ev.target.dataItem.dataContext.id
+          setTimeout(() => {
-          ev.target.isHover = false
+            this.chartInfo.params.legendUrl.forEach((url, i) => {
-          if (countryId) {
+              getData(url).then(data => {
-            const targetMapObject = this.polygonSeries.getPolygonById(countryId)
+                this.legends[i].value = data
-            targetMapObject.series.chart.zoomToMapObject(targetMapObject)
+              })
-            const geoData = getGeoData(countryId)
-            if (geoData) {
-              this.countrySeries = this.polygonSeriesFactory()
-              this.countrySeries.geodata = geoData
-              this.countryImageSeries = this.imageSeriesFactory()
-              this.polygonSeries.hide()
-              this.worldImageSeries.hide()
-              const country = ev.target.dataItem.dataContext.location
-              const queryParams = { ...this.queryParams, ipLocationCountry: country }
-              const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
-              this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
-            }
-          }
-        })
-      }
-      // dns地图legend上的数据
-      if (!_.isEmpty(this.chartInfo.params.legendUrl)) {
-        setTimeout(() => {
-          this.chartInfo.params.legendUrl.forEach((url, i) => {
-            getData(url).then(data => {
-              this.legends[i].value = data
             })
           })
-        })
+        }
-      }
+      })
     },
     polygonSeriesFactory () {
       const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())
@@ -442,6 +443,7 @@ export default {
       border: '#BF49DF'
     }
     return {
+      myChart: shallowRef(null),
       circleColor,
       isMapBlock: isMapBlock(props.chartInfo.type),
       isMapPoint: isMapPoint(props.chartInfo.type)

src/views/testData.js

@@ -295,6 +295,126 @@ export const lineData = [
 ]
 export const lineData2 = []
 export const lineData3 = []
+export const sunData1 = [
+  {
+    name: '西安\n29.60%',
+    children: [
+      {
+        name: '257\n14.34%',
+        value: 323703329611
+      },
+      {
+        name: '1281\n13.59%',
+        value: 306756738292
+      },
+      {
+        name: '2817\n1.68%',
+        value: 37855258599
+      }
+    ]
+  },
+  {
+    name: '太原\n56.35%',
+    children: [
+      {
+        name: '513\n11.42%',
+        value: 257854520910
+      },
+      {
+        name: '769\n1.44%',
+        value: 32505330352
+      },
+      {
+        name: '1537\n15.18%',
+        value: 342760056836
+      },
+      {
+        name: '2049\n15.30%',
+        value: 345397981930
+      },
+      {
+        name: '2305\n13.01%',
+        value: 293586032267
+      }
+    ]
+  },
+  {
+    name: '西宁\n14.04%',
+    children: [
+      {
+        name: '1025\n14.04%',
+        value: 317022957702
+      }
+    ]
+  }
+]
+export const sunData2 = [
+  {
+    name: '西安\n57.32%',
+    children: [
+      {
+        name: '256\n14.58%',
+        value: 167621458351
+      },
+      {
+        name: '1280\n14.51%',
+        value: 166817230697
+      },
+      {
+        name: '2816\n28.24%',
+        value: 324792075239
+      }
+    ]
+  },
+  {
+    name: '太原\n41.78%',
+    children: [
+      {
+        name: '512\n3.17%',
+        value: 36512384529
+      },
+      {
+        name: '768\n21.67%',
+        value: 249173998609
+      },
+      {
+        name: '1536\n3.92%',
+        value: 45084239753
+      },
+      {
+        name: '1792\n3.24%',
+        value: 37293491619
+      },
+      {
+        name: '2048\n4.01%',
+        value: 46098857586
+      },
+      {
+        name: '2304\n5.77%',
+        value: 66314220417
+      }
+    ]
+  },
+  {
+    name: '西宁\n0.90%',
+    children: [
+      {
+        name: '1024\n0.90%',
+        value: 10309648628
+      }
+    ]
+  }
+]
+export const sunOption = {
+  silent: true,
+  series: {
+    type: 'sunburst',
+    radius: [0, '90%'],
+    label: {
+      rotate: 'radial'
+    }
+  }
+}
 export const lineOption = {
   tooltip: {
     trigger: 'axis'