看板页面的地图需要展示

package.json

@@ -39,6 +39,7 @@
     "dicom-parser": "^1.8.9",
     "dicomedit": "^0.1.0",
     "echarts": "^6.0.0",
+    "echarts-map": "^3.0.1",
     "element-ui": "^2.15.14",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",

src/views/dashboard/components/distribution-map.vue

@@ -3,8 +3,9 @@
 </template>
 <script>
 import * as echarts from 'echarts'
-// import 'modules/echarts/map/js/world.js'
+import worldMap from 'echarts-map/json/world.json';
 import { fontSize } from 'utils/fontsize'
+echarts.registerMap('world', worldMap);
 export default {
   props: {
     area: { type: String, default: '' },
@@ -76,68 +77,68 @@ export default {
         }
         return res
       }
-      var series = []
+      var series = [];
-        ;[['Shanghai', BJData]].forEach(function (item, i) {
+      [['Shanghai', BJData]].forEach(function (item, i) {
-          series.push(
+        series.push(
-            {
+          {
-              type: 'lines',
+            type: 'lines',
-              zlevel: 1,
+            zlevel: 1,
-              effect: {
+            effect: {
-                show: true,
+              show: true,
-                color: '#fff',
+              color: '#fff',
-                period: 6,
+              period: 6,
-                trailLength: 0.7,
+              trailLength: 0.7,
-                symbolSize: fontSize(0.05)
+              symbolSize: fontSize(0.05)
-              },
+            },
-              lineStyle: {
+            lineStyle: {
-                normal: {
+              normal: {
-                  width: fontSize(0.03),
+                width: fontSize(0.03),
-                  color: '#9ae5fc',
+                color: '#9ae5fc',
-                  opacity: 0.02,
+                opacity: 0.02,
-                  curveness: -0.2
+                curveness: -0.2
-                }
+              }
-              },
-
-              data: convertData(item[1])
             },
 
-            {
+            data: convertData(item[1])
-              type: 'effectScatter',
+          },
-              coordinateSystem: 'geo',
-              zlevel: 3,
-              rippleEffect: {
-                // 涟漪特效
-                period: 5, // 动画时间，值越小速度越快
-                brushType: 'fill', // 波纹绘制方式 stroke, fill
-                scale: 5 // 波纹圆环最大限制，值越大波纹越大
-              },
-              label: {
-                normal: {
-                  show: true,
-                  color: '#fce630',
-                  position: 'right', // 显示位置
-                  offset: [10, 0], // 偏移设置
-                  fontSize: fontSize(0.16),
-                  formatter: '{b}' // 圆环显示文字
-                },
-                emphasis: {
-                  show: true
-                }
-              },
-              symbol: 'circle',
-              symbolSize: function (val) {
-                return fontSize(0.08) // 圆环大小
-              },
 
-              data: item[1].map(function (dataItem) {
+          {
-                return {
+            type: 'effectScatter',
-                  name: dataItem[0].name,
+            coordinateSystem: 'geo',
-                  value: geoCoordMap[dataItem[0].name]
+            zlevel: 3,
-                }
+            rippleEffect: {
-              })
+              // 涟漪特效
-            }
+              period: 5, // 动画时间，值越小速度越快
-          )
+              brushType: 'fill', // 波纹绘制方式 stroke, fill
-        })
+              scale: 5 // 波纹圆环最大限制，值越大波纹越大
+            },
+            label: {
+              normal: {
+                show: true,
+                color: '#fce630',
+                position: 'right', // 显示位置
+                offset: [10, 0], // 偏移设置
+                fontSize: fontSize(0.16),
+                formatter: '{b}' // 圆环显示文字
+              },
+              emphasis: {
+                show: true
+              }
+            },
+            symbol: 'circle',
+            symbolSize: function (val) {
+              return fontSize(0.08) // 圆环大小
+            },
+
+            data: item[1].map(function (dataItem) {
+              return {
+                name: dataItem[0].name,
+                value: geoCoordMap[dataItem[0].name]
+              }
+            })
+          }
+        )
+      })
       var option = {
         // backgroundColor: '#fff',
         title: {