add world map

Author: dirkhe1051931999

public/world/jsvectormap.min.css

@@ -24,6 +24,7 @@ export default boot(({ app }) => {
  app.use(vue3PhotoPreview);
  app.use(ElementPlus);
  app.config.globalProperties.$globalMessage = globalMessage;
+ app.config.globalProperties.$window = window;
  app.config.globalProperties.$globalConfirm = globalConfirm;
  app.config.globalProperties.defaultFill = defaultFill;
  app.config.globalProperties.parseTime = (

public/world/jsvectormap.min.js

@@ -8,5 +8,5 @@ declare namespace NodeJS {
  }
 }
 // declare interface Window {
-// THREE: unknown;
+// jsVectorMap: unknown;
 // }

public/world/world-merc.js

@@ -34,6 +34,7 @@ export default {
  colors: 'Colors',
  profile: 'Profile',
  parallax: 'Parallax',
+ world: 'World',
  relationship: 'Relationship',
  map: 'China map',
  province: 'Province map',

src/boot/main.ts

@@ -33,6 +33,7 @@ export default {
  dialog: '弹窗',
  profile: '个人中心',
  parallax: '视差',
+ world: '世界地图标记',
  relationship: '关系图',
  map: '中国地图',
  province: '省份地图',

src/env.d.ts

@@ -36,11 +36,17 @@
  as="font"
  crossorigin
  />
+ <link
+ rel="stylesheet"
+ href="<%= process.env.NODE_ENV !== 'production'?'/':'/v3-admin/'%>world/jsvectormap.min.css"
+ />
  <script src="<%= process.env.NODE_ENV !== 'production'?'/':'/v3-admin/'%>less.min.js"></script>
  <script src="<%= process.env.NODE_ENV !== 'production'?'/':'/v3-admin/'%>map/echarts.min.js"></script>
  <script src="<%= process.env.NODE_ENV !== 'production'?'/':'/v3-admin/'%>map/china.js"></script>
  <script src="<%= process.env.NODE_ENV !== 'production'?'/':'/v3-admin/'%>three/threejs.js"></script>
  <script src="<%= process.env.NODE_ENV !== 'production'?'/':'/v3-admin/'%>three/orbit-controls.js"></script>
+ <script src="<%= process.env.NODE_ENV !== 'production'?'/':'/v3-admin/'%>world/jsvectormap.min.js"></script>
+ <script src="<%= process.env.NODE_ENV !== 'production'?'/':'/v3-admin/'%>world/world-merc.js"></script>
  <style>
  .q-spinner-html {
  vertical-align: middle;

src/i18n/en-US/index.ts

@@ -0,0 +1,124 @@
+<template>
+ <div>
+ <div id="charts-world-map"></div>
+ </div>
+</template>
+
+<script lang="ts">
+import { getCurrentInstance } from 'vue';
+import { Component, Vue } from 'vue-facing-decorator';
+@Component({ name: 'myChartWorldComponent' })
+export default class myChartWorldComponent extends Vue {
+ private globals = getCurrentInstance()!.appContext.config.globalProperties;
+ mounted() {
+ var markers = [
+ { name: 'Egypt', coords: [26.8206, 30.8025] },
+ { name: 'Russia', coords: [61.524, 105.3188] },
+ { name: 'Canada', coords: [56.1304, -106.3468] },
+ { name: 'Greenland', coords: [71.7069, -42.6043] },
+ { name: 'Brazil', coords: [-14.235, -51.9253] },
+ ];
+ const map = new this.globals.$window.jsVectorMap({
+ selector: '#charts-world-map',
+ map: 'world_merc',
+ zoomButtons: true,
+ zoomOnScroll: true,
+ regionStyle: {
+ initial: {
+ fill: '#d1d5db',
+ },
+ },
+ labels: {
+ markers: {
+ render: (marker: any) => {
+ return marker.name;
+ },
+ },
+ },
+ lines: [
+ {
+ from: 'Russia',
+ to: 'Greenland',
+ style: {
+ stroke: '#000',
+ },
+ },
+ ],
+ lineStyle: {
+ stroke: '#676767',
+ strokeWidth: 1.5,
+ fill: '#ff5566',
+ fillOpacity: 1,
+ strokeDasharray: '6 3 6', // OR: [6, 2, 6]
+ animation: true, // Enables animation
+ },
+ visualizeData: {
+ scale: ['#eeeeee', '#999999'],
+ values: {
+ EG: 29,
+ US: 100,
+ CA: 190,
+ BR: 75,
+ // ...
+ },
+ },
+ // focusOn: { 聚焦某国家
+ // regions: ['EG', 'SA'],
+ // animate: true,
+ // },
+ series: {
+ regions: [
+ {
+ attribute: 'fill',
+ legend: {
+ title: 'Some title',
+ },
+ scale: {
+ myScaleOne: '#c79efd',
+ myScaleTwo: '#ffc371',
+ myScaleThree: '#08d191',
+ },
+ values: {
+ // But when dealing with regions's series you should specify the region key.
+ CN: 'myScaleTwo',
+ MX: 'myScaleOne',
+ LY: 'myScaleOne',
+ RU: 'myScaleThree',
+ },
+ },
+ ],
+ },
+ regionsSelectable: false,
+ markersSelectable: true,
+ selectedMarkers: markers.map((marker, index) => {
+ var name = marker.name;
+ if (name === 'Russia' || name === 'Brazil') {
+ return index;
+ }
+ }),
+ markers: markers,
+ markerStyle: {
+ initial: { fill: '#5c5cff' },
+ selected: { fill: '#ff5050' },
+ },
+ markerLabelStyle: {
+ initial: {
+ fontFamily: 'NotoSans-Regular, NotoSansSC-Regular',
+ fontWeight: 400,
+ fontSize: 13,
+ },
+ },
+ });
+ }
+}
+</script>
+
+
+<style lang="scss" scoped>
+#charts-world-map {
+ margin: auto;
+ width: 100%;
+ height: 800px;
+ text-align: center;
+}
+</style>

src/i18n/zh-CN/index.ts

@@ -98,13 +98,25 @@ export const asyncRoutes: RouteRecordRaw[] = [
  icon: 'bar_chart',
  pagePermissionId: [
  'charts',
+ 'charts-world',
  'charts-relationship',
  'charts-map',
  'charts-province',
  'charts-city',
  ],
  },
  children: [
+ {
+ path: 'world',
+ name: 'World',
+ meta: {
+ title: 'world',
+ icon: 'label',
+ pagePermissionId: ['charts-world'],
+ },
+ component: () =>
+ import(/* webpackChunkName: "world" */ 'src/pages/charts/world.vue'),
+ },
  {
  path: 'relationship',
  name: 'Relationship',
@@ -115,7 +127,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
  },
  component: () =>
  import(
- /* webpackChunkName: "line" */ 'src/pages/charts/relationship.vue'
+ /* webpackChunkName: "relationship" */ 'src/pages/charts/relationship.vue'
  ),
  },
  {