Skip to content

Y
ycc-website
Commit 0edca08d authored by chenqikuai's avatar chenqikuai
Browse files
Options

fix: 优化echarts表格展示

parent 86549f5b
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 82 deletions
package-lock.json
View file @ 0edca08d
......@@ -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
View file @ 0edca08d
......@@ -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
View file @ 0edca08d
......@@ -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
View file @ 0edca08d
......@@ -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
View file @ 0edca08d
......@@ -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
View file @ 0edca08d
......@@ -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
View file @ 0edca08d
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
View file @ 0edca08d
......@@ -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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment