From 488719227a10ab0873b85aff2b77b3153514cbe9 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Thu, 22 Apr 2021 02:54:38 +0800 Subject: [PATCH] perf: echarts --- package-lock.json | 5 - package.json | 1 - src/layout/components/Navbar.vue | 2 +- src/plugins/echarts/index.ts | 59 +++++ src/plugins/echarts/theme.json | 394 +++++++++++++++++++++++++++++++ 5 files changed, 454 insertions(+), 7 deletions(-) create mode 100644 src/plugins/echarts/index.ts create mode 100644 src/plugins/echarts/theme.json diff --git a/package-lock.json b/package-lock.json index 4fc5914a3..c96372a4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2025,11 +2025,6 @@ "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=", "dev": true }, - "v-contextmenu": { - "version": "3.0.0-alpha.4", - "resolved": "https://registry.npm.taobao.org/v-contextmenu/download/v-contextmenu-3.0.0-alpha.4.tgz", - "integrity": "sha1-9GWYrJivrF1duMZUDfwSMEztEUA=" - }, "vite": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/vite/-/vite-2.2.1.tgz", diff --git a/package.json b/package.json index b41ff637b..760492a59 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "path": "^0.12.7", "path-to-regexp": "^6.2.0", "resize-observer-polyfill": "^1.5.1", - "v-contextmenu": "^3.0.0-alpha.4", "vue": "^3.0.11", "vue-i18n": "^9.1.6", "vue-json-pretty": "^2.0.2", diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 62cd2bbb3..4811edc4c 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -67,7 +67,7 @@ export default defineComponent({ // 国际化语言切换 const toggleLang = (): void => { langs.value = !langs.value; - langs.value ? (locale.value = "ch") : (locale.value = "en"); + langs.value ? (locale.value = "zh") : (locale.value = "en"); }; // 退出登录 diff --git a/src/plugins/echarts/index.ts b/src/plugins/echarts/index.ts new file mode 100644 index 000000000..54d509f3c --- /dev/null +++ b/src/plugins/echarts/index.ts @@ -0,0 +1,59 @@ +import * as echarts from "echarts/core"; + +import { + BarChart, + LineChart, + PieChart, + MapChart, + PictorialBarChart, + RadarChart, +} from "echarts/charts"; + +import { + TitleComponent, + TooltipComponent, + GridComponent, + PolarComponent, + AriaComponent, + ParallelComponent, + LegendComponent, + RadarComponent, + ToolboxComponent, + DataZoomComponent, + VisualMapComponent, + TimelineComponent, + CalendarComponent, +} from "echarts/components"; + +import { SVGRenderer } from "echarts/renderers"; + +const { use, registerTheme } = echarts; + +use([ + LegendComponent, + TitleComponent, + TooltipComponent, + GridComponent, + PolarComponent, + AriaComponent, + ParallelComponent, + BarChart, + LineChart, + PieChart, + MapChart, + RadarChart, + SVGRenderer, + PictorialBarChart, + RadarComponent, + ToolboxComponent, + DataZoomComponent, + VisualMapComponent, + TimelineComponent, + CalendarComponent, +]); + +// 自定义主题 +import theme from "./theme.json"; +registerTheme("ovilia-green", theme); + +export default echarts; diff --git a/src/plugins/echarts/theme.json b/src/plugins/echarts/theme.json new file mode 100644 index 000000000..87775c567 --- /dev/null +++ b/src/plugins/echarts/theme.json @@ -0,0 +1,394 @@ +{ + "color": ["#4ea397", "#22c3aa", "#7bd9a5"], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#666666" + }, + "subtextStyle": { + "color": "#999999" + } + }, + "line": { + "itemStyle": { + "borderWidth": "2" + }, + "lineStyle": { + "width": "3" + }, + "symbolSize": "10", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "borderWidth": "2" + }, + "lineStyle": { + "width": "3" + }, + "symbolSize": "10", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "barBorderWidth": "0", + "barBorderColor": "#444444" + }, + "emphasis": { + "itemStyle": { + "barBorderWidth": "0", + "barBorderColor": "#444444" + } + } + }, + "pie": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + }, + "emphasis": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + } + } + }, + "scatter": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + }, + "emphasis": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + } + } + }, + "boxplot": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + }, + "emphasis": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + } + } + }, + "parallel": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + }, + "emphasis": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + } + } + }, + "sankey": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + }, + "emphasis": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + } + } + }, + "funnel": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + }, + "emphasis": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + } + } + }, + "gauge": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + }, + "emphasis": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + } + } + }, + "candlestick": { + "itemStyle": { + "color": "#d0648a", + "color0": "#ffffff", + "borderColor": "#d0648a", + "borderColor0": "#22c3aa", + "borderWidth": 1 + } + }, + "graph": { + "itemStyle": { + "borderWidth": "0", + "borderColor": "#444444" + }, + "lineStyle": { + "width": 1, + "color": "#aaa" + }, + "symbolSize": "10", + "symbol": "emptyCircle", + "smooth": true, + "color": ["#4ea397", "#22c3aa", "#7bd9a5"], + "label": { + "color": "#ffffff" + } + }, + "map": { + "itemStyle": { + "areaColor": "#eeeeee", + "borderColor": "#999999", + "borderWidth": "0.5" + }, + "emphasis": { + "itemStyle": { + "areaColor": "rgba(34,195,170,0.25)", + "borderColor": "#22c3aa", + "borderWidth": "0.5" + }, + "label": { + "color": "rgb(52,158,142)" + } + }, + "label": { + "color": "#28544e" + } + }, + "geo": { + "itemStyle": { + "areaColor": "#eeeeee", + "borderColor": "#999999", + "borderWidth": "0.5" + }, + "emphasis": { + "itemStyle": { + "areaColor": "rgba(34,195,170,0.25)", + "borderColor": "#22c3aa", + "borderWidth": "0.5" + }, + "label": { + "color": "rgb(52,158,142)" + } + }, + "label": { + "color": "#28544e" + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333333" + } + }, + "axisLabel": { + "show": true, + "color": "#999999" + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": ["#eeeeee"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333333" + } + }, + "axisLabel": { + "show": true, + "color": "#999999" + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": ["#eeeeee"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333333" + } + }, + "axisLabel": { + "show": true, + "color": "#999999" + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": ["#eeeeee"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333333" + } + }, + "axisLabel": { + "show": true, + "color": "#999999" + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": ["#eeeeee"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] + } + } + }, + "toolbox": { + "iconStyle": { + "borderColor": "#aaaaaa" + }, + "emphasis": { + "iconStyle": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#999999" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#349e8e", + "width": 1 + }, + "itemStyle": { + "color": "#349e8e", + "borderWidth": "1" + }, + "emphasis": { + "itemStyle": { + "color": "#57e8d2" + } + }, + "controlStyle": { + "color": "#349e8e", + "borderColor": "#349e8e", + "borderWidth": "0" + }, + "checkpointStyle": { + "color": "#22c3aa", + "borderColor": "rgba(34,195,170,0.25)" + }, + "label": { + "color": "#349e8e" + } + }, + "visualMap": { + "color": ["#d0648a", "#22c3aa", "rgba(123,217,165,0.2)"] + }, + "dataZoom": { + "backgroundColor": "#fff", + "dataBackgroundColor": "#dedede", + "fillerColor": "rgba(34,195,170,0.25)", + "handleColor": "#dddddd", + "handleSize": "100%", + "textStyle": { + "color": "#999" + } + }, + "markPoint": { + "label": { + "color": "#ffffff", + "emphasis": { + "textStyle": { + "color": "#ffffff" + } + } + } + } +}