From 11d963b13ac809e99fb733822d9f09d0b4a4d302 Mon Sep 17 00:00:00 2001 From: 刘嘉威 <daidaibg@163.com> Date: 星期五, 21 十月 2022 10:04:46 +0800 Subject: [PATCH] feat: 引入vue-echarts --- package-lock.json | 20 +++++++++++++++++--- package.json | 3 ++- src/main.ts | 2 ++ src/plugins/echarts.ts | 28 ++++++++++++++++++++++++++++ 4 files changed, 49 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 238c464..dbc4a43 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,9 +56,9 @@ "dev": true }, "@types/node": { - "version": "18.11.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.2.tgz", - "integrity": "sha512-BWN3M23gLO2jVG8g/XHIRFWiiV4/GckeFIqbU/C4V3xpoBBWSMk4OZomouN0wCkfQFPqgZikyLr7DOYDysIkkw==", + "version": "18.8.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.0.tgz", + "integrity": "sha512-u+h43R6U8xXDt2vzUaVP3VwjjLyOJk6uEciZS8OSyziUQGOwmk+l+4drxcsDboHXwyTaqS1INebghmWMRxq3LA==", "dev": true }, "@vitejs/plugin-vue": { @@ -1574,6 +1574,11 @@ "functions-have-names": "^1.2.2" } }, + "resize-detector": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz", + "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -1970,6 +1975,15 @@ "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz", "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==" }, + "vue-echarts": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.2.3.tgz", + "integrity": "sha512-xHzUvgsgk/asJTcNa8iVVwoovZU3iEUHvmBa3bzbiP3Y6OMxM1YXsoWOKVmVVaUusGs4ob4pSwjwNy2FemAz9w==", + "requires": { + "resize-detector": "^0.3.0", + "vue-demi": "^0.13.2" + } + }, "vue-router": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz", diff --git a/package.json b/package.json index c7c3e9e..15a0f87 100644 --- a/package.json +++ b/package.json @@ -16,11 +16,12 @@ "mockjs": "^1.1.0", "pinia": "^2.0.21", "vue": "^3.2.41", + "vue-echarts": "^6.2.3", "vue-router": "^4.1.5" }, "devDependencies": { "@types/mockjs": "^1.0.7", - "@types/node": "^18.11.2", + "@types/node": "^18.8.0", "@vitejs/plugin-vue": "^3.0.3", "@vue/tsconfig": "^0.1.3", "autoprefixer": "^10.4.12", diff --git a/src/main.ts b/src/main.ts index 819a35c..f7ac8ee 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,11 +7,13 @@ import '@/assets/css/main.scss' import '@/assets/css/tailwind.css' +import {registerEcharts} from "@/plugins/echarts" //涓嶄娇鐢╩ock 璇锋敞閲婃帀 import { mockXHR } from "@/mock/index"; mockXHR() const app = createApp(App) +registerEcharts(app) app.use(createPinia()) app.use(router) diff --git a/src/plugins/echarts.ts b/src/plugins/echarts.ts new file mode 100644 index 0000000..964575d --- /dev/null +++ b/src/plugins/echarts.ts @@ -0,0 +1,28 @@ +// vue-echarts +import ECharts from 'vue-echarts' +import { use } from "echarts/core" +import { + CanvasRenderer + } from 'echarts/renderers' + import { + BarChart,PieChart + } from 'echarts/charts' + import { + GridComponent, + TitleComponent, + TooltipComponent, + LegendComponent, + } from 'echarts/components' + + use([ + CanvasRenderer, + BarChart,PieChart, + GridComponent, + LegendComponent, + TooltipComponent, + TitleComponent, + ]) + + export const registerEcharts= (app:any)=>{ + app.component('v-chart', ECharts) + } \ No newline at end of file -- Gitblit v1.8.0