fix: 优化echarts表格展示

package-lock.json

@@ -19,6 +19,7 @@
         "echarts": "^5.3.0",
         "element-ui": "^2.15.6",
         "moment": "^2.29.1",
+        "moment-locales-webpack-plugin": "^1.2.0",
         "postcss": "^7",
         "protobufjs": "6.10.1",
         "qrcode": "^1.5.0",
@@ -10769,6 +10770,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw="
+    },
     "node_modules/lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz",
@@ -11437,6 +11443,18 @@
         "node": "*"
       }
     },
+    "node_modules/moment-locales-webpack-plugin": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/moment-locales-webpack-plugin/-/moment-locales-webpack-plugin-1.2.0.tgz",
+      "integrity": "sha512-QAi5v0OlPUP7GXviKMtxnpBAo8WmTHrUNN7iciAhNOEAd9evCOvuN0g1N7ThIg3q11GLCkjY1zQ2saRcf/43nQ==",
+      "dependencies": {
+        "lodash.difference": "^4.5.0"
+      },
+      "peerDependencies": {
+        "moment": "^2.8.0",
+        "webpack": "^1 || ^2 || ^3 || ^4 || ^5"
+      }
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.nlark.com/move-concurrently/download/move-concurrently-1.0.1.tgz",
@@ -25968,6 +25986,11 @@
       "integrity": "sha1-US6b1yHSctlOPTpjZT+hdRZ0HKY=",
       "dev": true
     },
+    "lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw="
+    },
     "lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz",
@@ -26453,6 +26476,14 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
       "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
     },
+    "moment-locales-webpack-plugin": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/moment-locales-webpack-plugin/-/moment-locales-webpack-plugin-1.2.0.tgz",
+      "integrity": "sha512-QAi5v0OlPUP7GXviKMtxnpBAo8WmTHrUNN7iciAhNOEAd9evCOvuN0g1N7ThIg3q11GLCkjY1zQ2saRcf/43nQ==",
+      "requires": {
+        "lodash.difference": "^4.5.0"
+      }
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.nlark.com/move-concurrently/download/move-concurrently-1.0.1.tgz",

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build --report",
     "deploy": "npm run build && bash deploy.sh",
     "lint": "vue-cli-service lint"
   },
@@ -20,6 +20,7 @@
     "echarts": "^5.3.0",
     "element-ui": "^2.15.6",
     "moment": "^2.29.1",
+    "moment-locales-webpack-plugin": "^1.2.0",
     "postcss": "^7",
     "protobufjs": "6.10.1",
     "qrcode": "^1.5.0",

src/components/charts.vue

@@ -5,55 +5,16 @@
 <script lang="ts">
 import Vue from 'vue'
 import * as echarts from 'echarts/core'
-import {
-  BarChart,
-  // 系列类型的定义后缀都为 SeriesOption
-  BarSeriesOption,
-  LineChart,
-  LineSeriesOption,
-} from 'echarts/charts'
-import {
-  TitleComponent,
-  // 组件类型的定义后缀都为 ComponentOption
-  TitleComponentOption,
-  TooltipComponent,
-  TooltipComponentOption,
-  GridComponent,
-  GridComponentOption,
-  // 数据集组件
-  DatasetComponent,
-  DatasetComponentOption,
-  // 内置数据转换器组件 (filter, sort)
-  TransformComponent,
-} from 'echarts/components'
-import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { LineChart, LineSeriesOption } from 'echarts/charts'
+import { TooltipComponent, GridComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
-import { numOfOnChainTx, statSearch } from '@/service/api'
+import { numOfOnChainTx } from '@/service/api'
 import moment from 'moment'
 import { nFormatter } from '@/utils/common'
-// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
-type ECOption = echarts.ComposeOption<
-  | BarSeriesOption
-  | LineSeriesOption
-  | TitleComponentOption
-  | TooltipComponentOption
-  | GridComponentOption
-  | DatasetComponentOption
->
 
-// 注册必须的组件
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  DatasetComponent,
-  TransformComponent,
-  LineChart,
-  BarChart,
-  LabelLayout,
-  UniversalTransition,
-  CanvasRenderer,
-])
+type ECOption = echarts.ComposeOption<LineSeriesOption>
+
+echarts.use([TooltipComponent, GridComponent, LineChart, CanvasRenderer])
 
 export default Vue.extend({
   props: {
@@ -97,9 +58,9 @@ export default Vue.extend({
         return {
           start: moment(i).add(-1, 'weeks').unix(),
           end: moment(i).unix(),
-          format: `${moment(i).add(-1, 'weeks').format('MMM DD')} - ${moment(
+          format: `${moment(i).add(-1, 'weeks').format('MMMDD')} - ${moment(
             i,
-          ).format('MMM DD')}`,
+          ).format('MMMDD')}`,
         }
       })
     },
@@ -218,7 +179,7 @@ export default Vue.extend({
                 },
               ],
               grid: { ...this.grid },
-            })
+            } as ECOption)
           }
         })
     },
@@ -230,6 +191,9 @@ export default Vue.extend({
     scale(v) {
       this.draw()
     },
+    '$route.query.lang'() {
+      this.draw()
+    },
   },
 })
 </script>

src/components/chartsInAddr.vue

@@ -4,40 +4,14 @@
 
 <script lang="ts">
 import * as echarts from 'echarts/core'
-import {
-  BarChart,
-  // 系列类型的定义后缀都为 SeriesOption
-  LineChart,
-} from 'echarts/charts'
-import {
-  TitleComponent,
-  // 组件类型的定义后缀都为 ComponentOption
-  TooltipComponent,
-  GridComponent,
-  // 数据集组件
-  DatasetComponent,
-  // 内置数据转换器组件 (filter, sort)
-  TransformComponent,
-} from 'echarts/components'
-import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { LineSeriesOption, LineChart } from 'echarts/charts'
+import { TitleComponent, GridComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
 import { getAccountRecords } from '@/service/api'
 import moment from 'moment'
-// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = echarts.ComposeOption<LineSeriesOption>
 
-// 注册必须的组件
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  DatasetComponent,
-  TransformComponent,
-  LineChart,
-  BarChart,
-  LabelLayout,
-  UniversalTransition,
-  CanvasRenderer,
-])
+echarts.use([TitleComponent, GridComponent, LineChart, CanvasRenderer])
 
 import chartsMixin from '@/mixin/componentsMixin/charts'
 import VueTypedMixins from 'vue-typed-mixins'
@@ -149,7 +123,7 @@ export default VueTypedMixins(chartsMixin).extend({
                 },
               ],
               grid: this.grid,
-            })
+            } as ECOption)
           }
         })
     },

src/components/iconSelect.vue

@@ -15,6 +15,7 @@
 import locale from 'element-ui/lib/locale'
 import enLocale from "element-ui/lib/locale/lang/en";
 import zhLocale from "element-ui/lib/locale/lang/zh-CN";
+import moment from 'moment';
 
 import Vue from 'vue'
 export default Vue.extend({
@@ -37,6 +38,7 @@ export default Vue.extend({
       this.$emit('hidden', true)
       window.sessionStorage.setItem('language', v)
       this.$i18n.locale = v === 'zh-CN' ? 'zh' : 'en'
+      moment.locale(v === 'zh-CN' ? 'zh-cn' : 'en')
       console.log({...this.$route.query, lang: v})
       this.$router.replace({ path: this.$route.path, query: { ...this.$route.query, lang: v }})
     }

src/layout/MainPage/Header.vue

@@ -232,6 +232,7 @@ import Vue from 'vue'
 import IconSelect from '@/components/iconSelect.vue'
 import Menu from '@/components/mobile/menu.vue'
 import { checkIsMobile } from '@/utils/utils'
+import moment from 'moment'
 export default Vue.extend({
   components: {
     IconSelect,
@@ -270,12 +271,14 @@ export default Vue.extend({
       const scrollY = window.scrollY
       this.isTop = scrollY < 70 ? true : false
     })
+    moment.locale(this.iconType === 'zh-CN' ? 'zh-cn' : 'en')
   },
   watch: {
     $route(n, o) {
       const scrollY = window.scrollY
       this.iconType =
         window.sessionStorage.getItem('language') || n.query.lang || 'zh-CN'
+      moment.locale(this.iconType === 'zh-CN' ? 'zh-cn' : 'en')
       this.isTop = scrollY < 70 ? true : false
       window.addEventListener('scroll', () => {
         const scrollY = window.scrollY

vue.config.js

 const CompressionWebpackPlugin = require("compression-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
+const MomentLocalesPlugin = require("moment-locales-webpack-plugin");
 
 module.exports = {
   outputDir: "dist",
@@ -58,6 +59,9 @@ module.exports = {
         threshold: 10240,
         minRatio: 0.8,
       }),
+      new MomentLocalesPlugin({
+        localesToKeep: ["zh-cn"],
+      }),
     ],
   },
   // chainWebpack: config => {

yarn.lock

@@ -6144,6 +6144,11 @@
   "resolved" "https://registry.nlark.com/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz"
   "version" "4.6.1"
 
+"lodash.difference@^4.5.0":
+  "integrity" "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw="
+  "resolved" "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz"
+  "version" "4.5.0"
+
 "lodash.kebabcase@^4.1.1":
   "integrity" "sha1-hImxyw0p/4gZXM7KRI/21swpXDY="
   "resolved" "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz"
@@ -6530,7 +6535,14 @@
   "resolved" "https://registry.nlark.com/modern-normalize/download/modern-normalize-1.1.0.tgz"
   "version" "1.1.0"
 
-"moment@^2.21.0", "moment@^2.29.1":
+"moment-locales-webpack-plugin@^1.2.0":
+  "integrity" "sha512-QAi5v0OlPUP7GXviKMtxnpBAo8WmTHrUNN7iciAhNOEAd9evCOvuN0g1N7ThIg3q11GLCkjY1zQ2saRcf/43nQ=="
+  "resolved" "https://registry.npmjs.org/moment-locales-webpack-plugin/-/moment-locales-webpack-plugin-1.2.0.tgz"
+  "version" "1.2.0"
+  dependencies:
+    "lodash.difference" "^4.5.0"
+
+"moment@^2.21.0", "moment@^2.29.1", "moment@^2.8.0":
   "integrity" "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
   "resolved" "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz"
   "version" "2.29.1"
@@ -9949,7 +9961,7 @@
     "source-list-map" "^2.0.0"
     "source-map" "~0.6.1"
 
-"webpack@^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0", "webpack@^2.0.0 || ^3.0.0 || ^4.0.0", "webpack@^3.0.0 || ^4.0.0", "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0", "webpack@^4.0.0", "webpack@^4.0.0 || ^5.0.0", "webpack@^4.4.0", "webpack@^5.1.0", "webpack@>=2", "webpack@>=2.0.0 <5.0.0", "webpack@>=4.0.0":
+"webpack@^1 || ^2 || ^3 || ^4 || ^5", "webpack@^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0", "webpack@^2.0.0 || ^3.0.0 || ^4.0.0", "webpack@^3.0.0 || ^4.0.0", "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0", "webpack@^4.0.0", "webpack@^4.0.0 || ^5.0.0", "webpack@^4.4.0", "webpack@^5.1.0", "webpack@>=2", "webpack@>=2.0.0 <5.0.0", "webpack@>=4.0.0":
   "integrity" "sha1-v5tEBOogoHNgXgoBHRiNd8tq1UI="
   "resolved" "https://registry.nlark.com/webpack/download/webpack-4.46.0.tgz"
   "version" "4.46.0"