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,7 +109,7 @@ export default {
       chart.geodata = getGeoData(storageKey.iso36112WorldLow)
       chart.projection = new am4Maps.projections.Miller()
       this.myChart = chart
-
+      setTimeout(() => {
         this.polygonSeries = this.polygonSeriesFactory()
 
         if (this.isMapPoint) {
@@ -169,6 +169,7 @@ export default {
             })
           })
         }
+      })
     },
     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'