From b7a7ec5e867c4055586bb5070ca23159d06fca78 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 26 Jul 2022 22:07:53 +0800
Subject: [PATCH] =?UTF-8?q?CN-653=20feat:=20=E5=9C=B0=E5=9B=BE=E5=88=9D?=
=?UTF-8?q?=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/css/components/index.scss | 1 +
.../css/components/views/charts2/npmMap.scss | 12 +
src/views/charts/charts/ChartMap.vue | 3 +-
src/views/charts/charts/IpBasicInfo.vue | 1 -
src/views/charts2/Chart.vue | 6 +
src/views/charts2/chart-tools.js | 1 +
src/views/charts2/charts/NpmLine.vue | 9 +
src/views/charts2/charts/NpmMap.vue | 99 ++-
src/views/charts2/charts/mapTestData.js | 630 ++++++++++++++++++
9 files changed, 757 insertions(+), 5 deletions(-)
create mode 100644 src/assets/css/components/views/charts2/npmMap.scss
create mode 100644 src/views/charts2/charts/NpmLine.vue
create mode 100644 src/views/charts2/charts/mapTestData.js
diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index dd4fddee..f5fb116b 100644
--- a/src/assets/css/components/index.scss
+++ b/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';
diff --git a/src/assets/css/components/views/charts2/npmMap.scss b/src/assets/css/components/views/charts2/npmMap.scss
new file mode 100644
index 00000000..735f0eea
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/views/charts/charts/ChartMap.vue b/src/views/charts/charts/ChartMap.vue
index e12f1bc9..9eec98df 100644
--- a/src/views/charts/charts/ChartMap.vue
+++ b/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'
diff --git a/src/views/charts/charts/IpBasicInfo.vue b/src/views/charts/charts/IpBasicInfo.vue
index c81f1227..ba38933c 100644
--- a/src/views/charts/charts/IpBasicInfo.vue
+++ b/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: {}
}
diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue
index 7e59ec5e..1d0e660b 100644
--- a/src/views/charts2/Chart.vue
+++ b/src/views/charts2/Chart.vue
@@ -38,6 +38,10 @@
v-else-if="chart.type === typeMapping.npm.npmMap"
:chart="chart"
>
+
@@ -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,
diff --git a/src/views/charts2/chart-tools.js b/src/views/charts2/chart-tools.js
index f74ac794..d460b226 100644
--- a/src/views/charts2/chart-tools.js
+++ b/src/views/charts2/chart-tools.js
@@ -8,6 +8,7 @@ export const typeMapping = {
},
npm: {
npmMap: 1,
+ npmLine: 101,
npmAppCategoryScore: 702,
npmTabs: 704,
npmNetworkQuantity: 703
diff --git a/src/views/charts2/charts/NpmLine.vue b/src/views/charts2/charts/NpmLine.vue
new file mode 100644
index 00000000..746024d7
--- /dev/null
+++ b/src/views/charts2/charts/NpmLine.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
diff --git a/src/views/charts2/charts/NpmMap.vue b/src/views/charts2/charts/NpmMap.vue
index eb041a74..c5025969 100644
--- a/src/views/charts2/charts/NpmMap.vue
+++ b/src/views/charts2/charts/NpmMap.vue
@@ -1,9 +1,104 @@
-
+
diff --git a/src/views/charts2/charts/mapTestData.js b/src/views/charts2/charts/mapTestData.js
new file mode 100644
index 00000000..a4343856
--- /dev/null
+++ b/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"
+ }
+}