CN-653 feat: 地图初始化

src/assets/css/components/index.scss

@@ -53,4 +53,5 @@
 @import './views/charts2/npmNetworkQuantity';
 @import './views/charts2/networkOverviewApps';
 @import './views/charts2/npmTabs';
+@import './views/charts2/npmMap';
 //@import '../chart';

src/assets/css/components/views/charts2/npmMap.scss

@@ -0,0 +1,12 @@
+.cn-chart__map {
+  height: 100%;
+  width: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+
+  .map-canvas {
+    height: 100%;
+    width: 100%;
+    background-color: #CAD2D3;
+  }
+}

src/views/charts/charts/ChartMap.vue

@@ -39,7 +39,6 @@ export default {
   data () {
     return {
       unitTypes,
-      mapPictureUrl: '/Tiles/{z}/{x}/{y}.png',
       showMapBackButton: false,
       polygonSeries: null, // 世界地图series
       countrySeries: null, // 下钻国家series
@@ -247,7 +246,7 @@ export default {
     },
     imageSeriesFactory (dataField) {
       const vm = this
-      // emcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
+      // amcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
       const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
       // 指定接口数据中哪个字段名代表数值
       imageSeries.dataFields.value = dataField || 'count'

src/views/charts/charts/IpBasicInfo.vue

@@ -29,7 +29,6 @@ export default {
   data () {
     return {
       myChart: null,
-      mapPictureUrl: '/Tiles/{z}/{x}/{y}.png',
       entityDetectionsIpUrl: api.entityDetectionsIp,
       detectionsData: {}
     }

src/views/charts2/Chart.vue

@@ -38,6 +38,10 @@
         v-else-if="chart.type === typeMapping.npm.npmMap"
         :chart="chart"
     ></npm-map>
+    <npm-line
+        v-else-if="chart.type === typeMapping.npm.npmLine"
+        :chart="chart"
+    ></npm-line>
   </div>
 </template>
 
@@ -54,9 +58,11 @@ import NpmTabs from '@/views/charts2/charts/NpmTabs'
 import NpmNetworkQuantity from '@/views/charts2/charts/NpmNetworkQuantity'
 import NpmAppCategoryScore from '@/views/charts2/charts/NpmAppCategoryScore'
 import NpmMap from '@/views/charts2/charts/NpmMap'
+import NpmLine from '@/views/charts2/charts/NpmLine'
 export default {
   name: 'Chart',
   components: {
+    NpmLine,
     NpmMap,
     NpmAppCategoryScore,
     Loading,

src/views/charts2/chart-tools.js

@@ -8,6 +8,7 @@ export const typeMapping = {
   },
   npm: {
     npmMap: 1,
+    npmLine: 101,
     npmAppCategoryScore: 702,
     npmTabs: 704,
     npmNetworkQuantity: 703

src/views/charts2/charts/NpmLine.vue

@@ -0,0 +1,9 @@
+<template>
+  <div style="height: 100%;width: 100%;border: 1px solid #f0f0f0"></div>
+</template>
+
+<script>
+export default {
+  name: 'NpmLine'
+}
+</script>

src/views/charts2/charts/NpmMap.vue

@@ -1,9 +1,104 @@
 <template>
-  <div style="height: 100%;width: 100%;border: 1px solid #f0f0f0"></div>
+  <div class="cn-chart__map">
+    <div class="map-canvas" id="npmMap"></div>
+  </div>
 </template>
 
 <script>
+import mapTestData from '@/views/charts2/charts/mapTestData'
+import { shallowRef } from 'vue'
+import * as am4Core from '@amcharts/amcharts4/core'
+import * as am4Maps from '@amcharts/amcharts4/maps'
+import { getGeoData } from '@/utils/tools'
+import { storageKey } from '@/utils/constants'
+
 export default {
-  name: 'NpmMap'
+  name: 'NpmMap',
+  data () {
+    return {
+      mapTestData,
+      myChart: null,
+      polygonSeries: null
+    }
+  },
+  methods: {
+    initMap () {
+      // 初始化插件
+      const chart = am4Core.create('npmMap', am4Maps.MapChart)
+      chart.geodata = getGeoData(storageKey.iso36112WorldLow)
+      chart.projection = new am4Maps.projections.Miller()
+      chart.homeZoomLevel = 2
+      chart.homeGeoPoint = {
+        latitude: 21,
+        longitude: 0
+      }
+      this.myChart = shallowRef(chart)
+      this.polygonSeries = shallowRef(this.polygonSeriesFactory())
+    },
+    polygonSeriesFactory () {
+      const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())
+      polygonSeries.useGeodata = true
+      polygonSeries.exclude = ['AQ'] // 排除南极洲
+      polygonSeries.tooltip.getFillFromObject = false
+      polygonSeries.tooltip.background.fill = am4Core.color('#41495D')
+      polygonSeries.tooltip.background.filters.clear()
+      polygonSeries.tooltip.background.stroke = '#41495D'
+      const polygonTemplate = polygonSeries.mapPolygons.template
+      polygonTemplate.nonScalingStroke = true
+      polygonTemplate.strokeWidth = 0.5
+      polygonTemplate.stroke = am4Core.color('#CAD2D3')
+      polygonTemplate.fill = am4Core.color('#EFEFEF')
+      return polygonSeries
+    },
+    imageSeriesFactory (dataField) {
+      const vm = this
+      // amcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
+      const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
+      // 指定接口数据中哪个字段名代表数值
+      imageSeries.dataFields.value = dataField || 'count'
+      // 取出图案的默认模板，用来接下来做自定义更改
+      const imageTemplate = imageSeries.mapImages.template
+      imageTemplate.nonScaling = true
+      // 通过地区ID来获取经纬度，设置后无需自己提供经纬度
+      imageTemplate.adapter.add('latitude', function (latitude, target) {
+        const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
+        if (polygon) {
+          return polygon.visualLatitude
+        }
+        return latitude
+      })
+      imageTemplate.adapter.add('longitude', function (longitude, target) {
+        const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
+        if (polygon) {
+          return polygon.visualLongitude
+        }
+        return longitude
+      })
+
+      // 设置图案样式
+      const circle = imageTemplate.createChild(am4Core.Circle)
+      circle.propertyFields.fill = 'color'
+      circle.propertyFields.stroke = 'border'
+      circle.strokeWidth = 1
+      circle.tooltipHTML = this.generatePolygonTooltipHTML()
+      imageSeries.tooltip.getFillFromObject = false
+      imageSeries.tooltip.background.fill = am4Core.color('#41495D')
+      imageSeries.tooltip.background.filters.clear()
+      imageSeries.tooltip.background.stroke = '#41495D'
+
+      imageSeries.heatRules.push({
+        target: circle,
+        property: 'radius',
+        min: 6,
+        max: 25,
+        dataField: 'value'
+      })
+
+      return imageSeries
+    }
+  },
+  mounted () {
+    this.initMap()
+  }
 }
 </script>

src/views/charts2/charts/mapTestData.js

@@ -0,0 +1,630 @@
+export default {
+  "msg": "OK",
+  "code": 200,
+  "data": {
+    "result": [
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "Paraguay",
+        "serverId": "PY",
+        "packets": "1",
+        "bytes": "106",
+        "sentBytes": "106"
+      },
+      {
+        "receivedBytes": "27435",
+        "sessions": "119",
+        "serverCountry": "Sweden",
+        "serverId": "SE",
+        "packets": "339",
+        "bytes": "53044",
+        "sentBytes": "25609"
+      },
+      {
+        "receivedBytes": "40925",
+        "sessions": "60",
+        "serverCountry": "Malaysia",
+        "serverId": "MY",
+        "packets": "888",
+        "bytes": "77424",
+        "sentBytes": "36499"
+      },
+      {
+        "receivedBytes": "25755",
+        "sessions": "52",
+        "serverCountry": "Russia",
+        "serverId": "",
+        "packets": "305",
+        "bytes": "50811",
+        "sentBytes": "25056"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "Nigeria",
+        "serverId": "NG",
+        "packets": "1",
+        "bytes": "106",
+        "sentBytes": "106"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "11",
+        "serverCountry": "Romania",
+        "serverId": "RO",
+        "packets": "11",
+        "bytes": "898",
+        "sentBytes": "898"
+      },
+      {
+        "receivedBytes": "3840",
+        "sessions": "2",
+        "serverCountry": "Bahrain",
+        "serverId": "BH",
+        "packets": "180",
+        "bytes": "11040",
+        "sentBytes": "7200"
+      },
+      {
+        "receivedBytes": "8006",
+        "sessions": "7",
+        "serverCountry": "Chile",
+        "serverId": "CL",
+        "packets": "35",
+        "bytes": "11307",
+        "sentBytes": "3301"
+      },
+      {
+        "receivedBytes": "1313470",
+        "sessions": "229",
+        "serverCountry": "Japan",
+        "serverId": "JP",
+        "packets": "3391",
+        "bytes": "1505018",
+        "sentBytes": "191548"
+      },
+      {
+        "receivedBytes": "504",
+        "sessions": "11",
+        "serverCountry": "Turkey",
+        "serverId": "TR",
+        "packets": "19",
+        "bytes": "2016",
+        "sentBytes": "1512"
+      },
+      {
+        "receivedBytes": "1086",
+        "sessions": "11",
+        "serverCountry": "Finland",
+        "serverId": "FI",
+        "packets": "31",
+        "bytes": "2495",
+        "sentBytes": "1409"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "3",
+        "serverCountry": "Mongolia",
+        "serverId": "MN",
+        "packets": "3",
+        "bytes": "318",
+        "sentBytes": "318"
+      },
+      {
+        "receivedBytes": "1064",
+        "sessions": "8",
+        "serverCountry": "Hungary",
+        "serverId": "HU",
+        "packets": "27",
+        "bytes": "2331",
+        "sentBytes": "1267"
+      },
+      {
+        "receivedBytes": "17568",
+        "sessions": "101",
+        "serverCountry": "Brazil",
+        "serverId": "BR",
+        "packets": "240",
+        "bytes": "40517",
+        "sentBytes": "22949"
+      },
+      {
+        "receivedBytes": "4564",
+        "sessions": "3",
+        "serverCountry": "Kuwait",
+        "serverId": "KW",
+        "packets": "46",
+        "bytes": "7100",
+        "sentBytes": "2536"
+      },
+      {
+        "receivedBytes": "46123",
+        "sessions": "95",
+        "serverCountry": "Viet Nam",
+        "serverId": "VN",
+        "packets": "387",
+        "bytes": "72673",
+        "sentBytes": "26550"
+      },
+      {
+        "receivedBytes": "126",
+        "sessions": "3",
+        "serverCountry": "Belgium",
+        "serverId": "BE",
+        "packets": "4",
+        "bytes": "394",
+        "sentBytes": "268"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "2",
+        "serverCountry": "Ecuador",
+        "serverId": "EC",
+        "packets": "2",
+        "bytes": "212",
+        "sentBytes": "212"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "Morocco",
+        "serverId": "MA",
+        "packets": "1",
+        "bytes": "106",
+        "sentBytes": "106"
+      },
+      {
+        "receivedBytes": "70985",
+        "sessions": "140",
+        "serverCountry": "India",
+        "serverId": "IN",
+        "packets": "558",
+        "bytes": "123995",
+        "sentBytes": "53010"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "2",
+        "serverCountry": "Israel",
+        "serverId": "IL",
+        "packets": "2",
+        "bytes": "212",
+        "sentBytes": "212"
+      },
+      {
+        "receivedBytes": "279",
+        "sessions": "3",
+        "serverCountry": "Norway",
+        "serverId": "NO",
+        "packets": "12",
+        "bytes": "1054",
+        "sentBytes": "775"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "3",
+        "serverCountry": "Peru",
+        "serverId": "PE",
+        "packets": "3",
+        "bytes": "318",
+        "sentBytes": "318"
+      },
+      {
+        "receivedBytes": "61410",
+        "sessions": "42",
+        "serverCountry": "Thailand",
+        "serverId": "TH",
+        "packets": "404",
+        "bytes": "90757",
+        "sentBytes": "29347"
+      },
+      {
+        "receivedBytes": "2683",
+        "sessions": "9",
+        "serverCountry": "Ireland",
+        "serverId": "IE",
+        "packets": "31",
+        "bytes": "5553",
+        "sentBytes": "2870"
+      },
+      {
+        "receivedBytes": "49653235083",
+        "sessions": "103792",
+        "serverCountry": "China",
+        "serverId": "CN",
+        "packets": "49636392",
+        "bytes": "51157081522",
+        "sentBytes": "1503846439"
+      },
+      {
+        "receivedBytes": "773",
+        "sessions": "18",
+        "serverCountry": "Portugal",
+        "serverId": "PT",
+        "packets": "29",
+        "bytes": "2614",
+        "sentBytes": "1841"
+      },
+      {
+        "receivedBytes": "12687",
+        "sessions": "29",
+        "serverCountry": "Canada",
+        "serverId": "CA",
+        "packets": "249",
+        "bytes": "35918",
+        "sentBytes": "23231"
+      },
+      {
+        "receivedBytes": "18779",
+        "sessions": "79",
+        "serverCountry": "France",
+        "serverId": "FR",
+        "packets": "296",
+        "bytes": "40830",
+        "sentBytes": "22051"
+      },
+      {
+        "receivedBytes": "3660",
+        "sessions": "5",
+        "serverCountry": "Poland",
+        "serverId": "PL",
+        "packets": "44",
+        "bytes": "7635",
+        "sentBytes": "3975"
+      },
+      {
+        "receivedBytes": "18177",
+        "sessions": "51",
+        "serverCountry": "Italy",
+        "serverId": "IT",
+        "packets": "218",
+        "bytes": "41307",
+        "sentBytes": "23130"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "Greece",
+        "serverId": "GR",
+        "packets": "1",
+        "bytes": "159",
+        "sentBytes": "159"
+      },
+      {
+        "receivedBytes": "9896",
+        "sessions": "8",
+        "serverCountry": "Cambodia",
+        "serverId": "KH",
+        "packets": "59",
+        "bytes": "13885",
+        "sentBytes": "3989"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "Iraq",
+        "serverId": "IQ",
+        "packets": "1",
+        "bytes": "106",
+        "sentBytes": "106"
+      },
+      {
+        "receivedBytes": "5802",
+        "sessions": "1",
+        "serverCountry": "Iran",
+        "serverId": "",
+        "packets": "21",
+        "bytes": "6814",
+        "sentBytes": "1012"
+      },
+      {
+        "receivedBytes": "15514",
+        "sessions": "37",
+        "serverCountry": "Spain",
+        "serverId": "ES",
+        "packets": "133",
+        "bytes": "30255",
+        "sentBytes": "14741"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "2",
+        "serverCountry": "Colombia",
+        "serverId": "CO",
+        "packets": "2",
+        "bytes": "212",
+        "sentBytes": "212"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "27",
+        "serverCountry": "Mexico",
+        "serverId": "MX",
+        "packets": "27",
+        "bytes": "2580",
+        "sentBytes": "2580"
+      },
+      {
+        "receivedBytes": "247",
+        "sessions": "2",
+        "serverCountry": "Myanmar",
+        "serverId": "MM",
+        "packets": "28",
+        "bytes": "2216",
+        "sentBytes": "1969"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "8",
+        "serverCountry": "Slovakia",
+        "serverId": "SK",
+        "packets": "8",
+        "bytes": "620",
+        "sentBytes": "620"
+      },
+      {
+        "receivedBytes": "1171",
+        "sessions": "20",
+        "serverCountry": "Austria",
+        "serverId": "AT",
+        "packets": "23",
+        "bytes": "2757",
+        "sentBytes": "1586"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "Algeria",
+        "serverId": "DZ",
+        "packets": "1",
+        "bytes": "106",
+        "sentBytes": "106"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "Oman",
+        "serverId": "OM",
+        "packets": "1",
+        "bytes": "148",
+        "sentBytes": "148"
+      },
+      {
+        "receivedBytes": "91671",
+        "sessions": "187",
+        "serverCountry": "Germany",
+        "serverId": "DE",
+        "packets": "1321",
+        "bytes": "147323",
+        "sentBytes": "55652"
+      },
+      {
+        "receivedBytes": "335",
+        "sessions": "2",
+        "serverCountry": "Bulgaria",
+        "serverId": "BG",
+        "packets": "3",
+        "bytes": "615",
+        "sentBytes": "280"
+      },
+      {
+        "receivedBytes": "498",
+        "sessions": "1",
+        "serverCountry": "Laos",
+        "serverId": "",
+        "packets": "9",
+        "bytes": "919",
+        "sentBytes": "421"
+      },
+      {
+        "receivedBytes": "90",
+        "sessions": "1",
+        "serverCountry": "Denmark",
+        "serverId": "DK",
+        "packets": "2",
+        "bytes": "180",
+        "sentBytes": "90"
+      },
+      {
+        "receivedBytes": "19981",
+        "sessions": "58",
+        "serverCountry": "United Kingdom",
+        "serverId": "",
+        "packets": "214",
+        "bytes": "45834",
+        "sentBytes": "25853"
+      },
+      {
+        "receivedBytes": "998",
+        "sessions": "4",
+        "serverCountry": "Venezuela",
+        "serverId": "",
+        "packets": "8",
+        "bytes": "1311",
+        "sentBytes": "313"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "6",
+        "serverCountry": "Argentina",
+        "serverId": "AR",
+        "packets": "6",
+        "bytes": "553",
+        "sentBytes": "553"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "Luxembourg",
+        "serverId": "LU",
+        "packets": "1",
+        "bytes": "106",
+        "sentBytes": "106"
+      },
+      {
+        "receivedBytes": "7188",
+        "sessions": "189",
+        "serverCountry": "Switzerland",
+        "serverId": "CH",
+        "packets": "243",
+        "bytes": "23417",
+        "sentBytes": "16229"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "3",
+        "serverCountry": "Sri Lanka",
+        "serverId": "LK",
+        "packets": "3",
+        "bytes": "318",
+        "sentBytes": "318"
+      },
+      {
+        "receivedBytes": "8672",
+        "sessions": "38",
+        "serverCountry": "Philippines",
+        "serverId": "PH",
+        "packets": "339",
+        "bytes": "23214",
+        "sentBytes": "14542"
+      },
+      {
+        "receivedBytes": "48638",
+        "sessions": "66",
+        "serverCountry": "Indonesia",
+        "serverId": "ID",
+        "packets": "448",
+        "bytes": "86156",
+        "sentBytes": "37518"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "Bangladesh",
+        "serverId": "BD",
+        "packets": "1",
+        "bytes": "106",
+        "sentBytes": "106"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "Lithuania",
+        "serverId": "LT",
+        "packets": "15",
+        "bytes": "1950",
+        "sentBytes": "1950"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "Guatemala",
+        "serverId": "GT",
+        "packets": "1",
+        "bytes": "106",
+        "sentBytes": "106"
+      },
+      {
+        "receivedBytes": "40098",
+        "sessions": "173",
+        "serverCountry": "South Korea",
+        "serverId": "",
+        "packets": "628",
+        "bytes": "88407",
+        "sentBytes": "48309"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "New Zealand",
+        "serverId": "NZ",
+        "packets": "1",
+        "bytes": "106",
+        "sentBytes": "106"
+      },
+      {
+        "receivedBytes": "32446",
+        "sessions": "29",
+        "serverCountry": "Australia",
+        "serverId": "AU",
+        "packets": "209",
+        "bytes": "51532",
+        "sentBytes": "19086"
+      },
+      {
+        "receivedBytes": "30462468",
+        "sessions": "1150",
+        "serverCountry": "United States",
+        "serverId": "US",
+        "packets": "34301",
+        "bytes": "31632321",
+        "sentBytes": "1169853"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "1",
+        "serverCountry": "Uzbekistan",
+        "serverId": "UZ",
+        "packets": "1",
+        "bytes": "106",
+        "sentBytes": "106"
+      },
+      {
+        "receivedBytes": "2285",
+        "sessions": "6",
+        "serverCountry": "Czech Republic",
+        "serverId": "CZ",
+        "packets": "47",
+        "bytes": "5457",
+        "sentBytes": "3172"
+      },
+      {
+        "receivedBytes": "15064",
+        "sessions": "11",
+        "serverCountry": "South Africa",
+        "serverId": "ZA",
+        "packets": "118",
+        "bytes": "29107",
+        "sentBytes": "14043"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "2",
+        "serverCountry": "Costa Rica",
+        "serverId": "CR",
+        "packets": "2",
+        "bytes": "212",
+        "sentBytes": "212"
+      },
+      {
+        "receivedBytes": "20961",
+        "sessions": "81",
+        "serverCountry": "The Netherlands",
+        "serverId": "",
+        "packets": "231",
+        "bytes": "41709",
+        "sentBytes": "20748"
+      },
+      {
+        "receivedBytes": "663000",
+        "sessions": "355",
+        "serverCountry": "Singapore",
+        "serverId": "SG",
+        "packets": "3065",
+        "bytes": "894750",
+        "sentBytes": "231750"
+      },
+      {
+        "receivedBytes": "0",
+        "sessions": "3",
+        "serverCountry": "United Arab Emirates",
+        "serverId": "AE",
+        "packets": "3",
+        "bytes": "238",
+        "sentBytes": "238"
+      }
+    ],
+    "resultType": "table"
+  }
+}