JLNTV_IPD/vue3-h5-template
4
0
Fork 0
mirror of https://github.com/xxxsf/vue3-h5-template.git synced 2025-04-05 04:12:45 +08:00
Code Issues Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
xushunfa459 2022-01-21 11:58:16 +08:00
parent ee5bf53783
commit 5ca47e03e7
11 changed files with 434 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
package-lock.json generated
View File

@ -1,5 +1,5 @@
{
"name": "vite-project",
"name": "vue3-vite",
"version": "0.0.0",
"lockfileVersion": 1,
"requires": true,
@ -7,17 +7,20 @@
"@babel/helper-validator-identifier": {
"version": "7.12.11",
"resolved": "http://nodepackages.hellobike.cn:4873/@babel%2fhelper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
"integrity": "sha1-yaHwIZF9y1zPDU5FPjmQIpgfye0="
"integrity": "sha1-yaHwIZF9y1zPDU5FPjmQIpgfye0=",
"dev": true
},
"@babel/parser": {
"version": "7.13.13",
"resolved": "http://nodepackages.hellobike.cn:4873/@babel%2fparser/-/parser-7.13.13.tgz",
"integrity": "sha1-QvA4YvSu1QRh5UMnCRa0fdUB8N8="
"integrity": "sha1-QvA4YvSu1QRh5UMnCRa0fdUB8N8=",
"dev": true
},
"@babel/types": {
"version": "7.13.14",
"resolved": "http://nodepackages.hellobike.cn:4873/@babel%2ftypes/-/types-7.13.14.tgz",
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.12.11",
"lodash": "^4.17.19",
@ -34,6 +37,7 @@
"version": "3.0.10",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-core/-/compiler-core-3.0.10.tgz",
"integrity": "sha1-ztkhIMa5ure2xE3+Xj5c8upCJTE=",
"dev": true,
"requires": {
"@babel/parser": "^7.12.0",
"@babel/types": "^7.12.0",
@ -46,6 +50,7 @@
"version": "3.0.10",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-dom/-/compiler-dom-3.0.10.tgz",
"integrity": "sha1-WdNZdJjn1LC5LziGqCP5nVsI8f4=",
"dev": true,
"requires": {
"@vue/compiler-core": "3.0.10",
"@vue/shared": "3.0.10"
@ -86,36 +91,143 @@
}
},
"@vue/reactivity": {
"version": "3.0.10",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2freactivity/-/reactivity-3.0.10.tgz",
"integrity": "sha1-ASgwczKR5ggn87Io1CWtU7g0hM4=",
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2freactivity/-/reactivity-3.2.27.tgz",
"integrity": "sha512-QPfIQEJidRGIu/mPexhcB4csp1LEg2Nr+/QE72MnXs/OYDtFErhC9FxIyymkxp/xvAgL5wsnSOuDD6zWF42vRQ==",
"requires": {
"@vue/shared": "3.0.10"
"@vue/shared": "3.2.27"
},
"dependencies": {
"@vue/shared": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fshared/-/shared-3.2.27.tgz",
"integrity": "sha512-rpAn9k6O08Lvo7ekBIAnkOukX/4EsEQLPrRJBKhIEasMsOI5eX0f6mq1sDUSY7cgAqWw2d7QtP74CWxdXoyKxA=="
}
}
},
"@vue/reactivity-transform": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2freactivity-transform/-/reactivity-transform-3.2.27.tgz",
"integrity": "sha512-67//61ObGxGnVrPhjygocb24eYUh+TFMhkm7szm8v5XdKXjkNl7qgIOflwGvUnwuIRJmr9nZ7+PvY0fL+H2upA==",
"requires": {
"@babel/parser": "^7.16.4",
"@vue/compiler-core": "3.2.27",
"@vue/shared": "3.2.27",
"estree-walker": "^2.0.2",
"magic-string": "^0.25.7"
},
"dependencies": {
"@babel/parser": {
"version": "7.16.10",
"resolved": "http://nodepackages.hellobike.cn:4873/@babel%2fparser/-/parser-7.16.10.tgz",
"integrity": "sha512-Sm/S9Or6nN8uiFsQU1yodyDW3MWXQhFeqzMPM+t8MJjM+pLsnFVxFZzkpXKvUXh+Gz9cbMoYYs484+Jw/NTEFQ=="
},
"@vue/compiler-core": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-core/-/compiler-core-3.2.27.tgz",
"integrity": "sha512-JyxAglSM/pb9paG5ZNuKrf5IUpzLzQA3khjWGF9oESELCLQlt6O3YyPMR2A69wIpYWrf5mScZ8YY8TJKOI/1kQ==",
"requires": {
"@babel/parser": "^7.16.4",
"@vue/shared": "3.2.27",
"estree-walker": "^2.0.2",
"source-map": "^0.6.1"
}
},
"@vue/shared": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fshared/-/shared-3.2.27.tgz",
"integrity": "sha512-rpAn9k6O08Lvo7ekBIAnkOukX/4EsEQLPrRJBKhIEasMsOI5eX0f6mq1sDUSY7cgAqWw2d7QtP74CWxdXoyKxA=="
}
}
},
"@vue/runtime-core": {
"version": "3.0.10",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fruntime-core/-/runtime-core-3.0.10.tgz",
"integrity": "sha1-y4cwwOyG6lwc+nAfrMCpe/WbFaI=",
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fruntime-core/-/runtime-core-3.2.27.tgz",
"integrity": "sha512-NJrjuViHJyrT4bwIocbE4XDaDlA1Pj61pQlneZZdFEvgdMLlhzCCiJ4WZnWcohYQeisUAZjEFKK8GjQieDPFbw==",
"requires": {
"@vue/reactivity": "3.0.10",
"@vue/shared": "3.0.10"
"@vue/reactivity": "3.2.27",
"@vue/shared": "3.2.27"
},
"dependencies": {
"@vue/shared": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fshared/-/shared-3.2.27.tgz",
"integrity": "sha512-rpAn9k6O08Lvo7ekBIAnkOukX/4EsEQLPrRJBKhIEasMsOI5eX0f6mq1sDUSY7cgAqWw2d7QtP74CWxdXoyKxA=="
}
}
},
"@vue/runtime-dom": {
"version": "3.0.10",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fruntime-dom/-/runtime-dom-3.0.10.tgz",
"integrity": "sha1-gMbuKMrqv3TzE1fSxk0XeUW9il8=",
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fruntime-dom/-/runtime-dom-3.2.27.tgz",
"integrity": "sha512-tlnKkvBSkV7MPUp/wRFsYcv67U1rUeZTPfpPzq5Kpmw5NNGkY6J075fFBH2k0MNxDucXS+qfStNrxAyGTUMkSA==",
"requires": {
"@vue/runtime-core": "3.0.10",
"@vue/shared": "3.0.10",
"@vue/runtime-core": "3.2.27",
"@vue/shared": "3.2.27",
"csstype": "^2.6.8"
},
"dependencies": {
"@vue/shared": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fshared/-/shared-3.2.27.tgz",
"integrity": "sha512-rpAn9k6O08Lvo7ekBIAnkOukX/4EsEQLPrRJBKhIEasMsOI5eX0f6mq1sDUSY7cgAqWw2d7QtP74CWxdXoyKxA=="
}
}
},
"@vue/server-renderer": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fserver-renderer/-/server-renderer-3.2.27.tgz",
"integrity": "sha512-dZnzkFCDe6A/GIe/F1LcG6lWpprHVh62DjTv8wubtkHwfJWOmOeHp+KvPDRrswL/L3ghsm+E31xY+pvkgM3pbQ==",
"requires": {
"@vue/compiler-ssr": "3.2.27",
"@vue/shared": "3.2.27"
},
"dependencies": {
"@babel/parser": {
"version": "7.16.10",
"resolved": "http://nodepackages.hellobike.cn:4873/@babel%2fparser/-/parser-7.16.10.tgz",
"integrity": "sha512-Sm/S9Or6nN8uiFsQU1yodyDW3MWXQhFeqzMPM+t8MJjM+pLsnFVxFZzkpXKvUXh+Gz9cbMoYYs484+Jw/NTEFQ=="
},
"@vue/compiler-core": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-core/-/compiler-core-3.2.27.tgz",
"integrity": "sha512-JyxAglSM/pb9paG5ZNuKrf5IUpzLzQA3khjWGF9oESELCLQlt6O3YyPMR2A69wIpYWrf5mScZ8YY8TJKOI/1kQ==",
"requires": {
"@babel/parser": "^7.16.4",
"@vue/shared": "3.2.27",
"estree-walker": "^2.0.2",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-dom/-/compiler-dom-3.2.27.tgz",
"integrity": "sha512-NyQ7nEbopUBPUMHM4c3FPCbFbnQwptoPjW5Y5qfJ7hfiCNhOuhQsDNqi5JYKBxfpxiFNwjcN9F8t1AsnLrDloQ==",
"requires": {
"@vue/compiler-core": "3.2.27",
"@vue/shared": "3.2.27"
}
},
"@vue/compiler-ssr": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-ssr/-/compiler-ssr-3.2.27.tgz",
"integrity": "sha512-+l09t319iV7HVSrXfBw9OLwMZIPOFTXmHjZ61Bc5ZcwKqOYAR4uTurKpoXAfcSc5qs/q6WdE9jY3nrP0LUEMQQ==",
"requires": {
"@vue/compiler-dom": "3.2.27",
"@vue/shared": "3.2.27"
}
},
"@vue/shared": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fshared/-/shared-3.2.27.tgz",
"integrity": "sha512-rpAn9k6O08Lvo7ekBIAnkOukX/4EsEQLPrRJBKhIEasMsOI5eX0f6mq1sDUSY7cgAqWw2d7QtP74CWxdXoyKxA=="
}
}
},
"@vue/shared": {
"version": "3.0.10",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fshared/-/shared-3.0.10.tgz",
"integrity": "sha1-VHbVYV0BvzOcZcLoBPWQm7wnhEo="
"integrity": "sha1-VHbVYV0BvzOcZcLoBPWQm7wnhEo=",
"dev": true
},
"big.js": {
"version": "5.2.2",
@ -132,8 +244,7 @@
"colorette": {
"version": "1.2.2",
"resolved": "http://nodepackages.hellobike.cn:4873/colorette/-/colorette-1.2.2.tgz",
"integrity": "sha1-y8x51emcrqLb8Q6zom/Ys+as+pQ=",
"dev": true
"integrity": "sha1-y8x51emcrqLb8Q6zom/Ys+as+pQ="
},
"consolidate": {
"version": "0.16.0",
@ -151,9 +262,18 @@
"dev": true
},
"csstype": {
"version": "2.6.16",
"resolved": "http://nodepackages.hellobike.cn:4873/csstype/-/csstype-2.6.16.tgz",
"integrity": "sha1-VE1p9UcBO4WkDRW/912zjzT+nDk="
"version": "2.6.19",
"resolved": "http://nodepackages.hellobike.cn:4873/csstype/-/csstype-2.6.19.tgz",
"integrity": "sha1-/utarokCC7OJ4fY2aaXtSQ45HKo="
},
"echarts": {
"version": "5.2.2",
"resolved": "http://nodepackages.hellobike.cn:4873/echarts/-/echarts-5.2.2.tgz",
"integrity": "sha1-7DyLKhUcu6cbo8LHz5svIEfOQ3A=",
"requires": {
"tslib": "2.3.0",
"zrender": "5.2.1"
}
},
"emojis-list": {
"version": "3.0.0",
@ -259,7 +379,8 @@
"lodash": {
"version": "4.17.21",
"resolved": "http://nodepackages.hellobike.cn:4873/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw="
"integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
"dev": true
},
"lodash.camelcase": {
"version": "4.3.0",
@ -280,7 +401,6 @@
"version": "0.25.7",
"resolved": "http://nodepackages.hellobike.cn:4873/magic-string/-/magic-string-0.25.7.tgz",
"integrity": "sha1-P0l9b9NMZpxnmNy4IfLvMfVEUFE=",
"dev": true,
"requires": {
"sourcemap-codec": "^1.4.4"
}
@ -310,7 +430,6 @@
"version": "8.2.15",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz",
"integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==",
"dev": true,
"requires": {
"colorette": "^1.2.2",
"nanoid": "^3.1.23",
@ -320,8 +439,7 @@
"nanoid": {
"version": "3.1.23",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
"integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
"dev": true
"integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw=="
}
}
},
@ -421,8 +539,7 @@
"sourcemap-codec": {
"version": "1.4.8",
"resolved": "http://nodepackages.hellobike.cn:4873/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha1-6oBL2UhXQC5pktBaOO8a41qatMQ=",
"dev": true
"integrity": "sha1-6oBL2UhXQC5pktBaOO8a41qatMQ="
},
"string-hash": {
"version": "1.1.3",
@ -433,7 +550,13 @@
"to-fast-properties": {
"version": "2.0.0",
"resolved": "http://nodepackages.hellobike.cn:4873/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
"dev": true
},
"tslib": {
"version": "2.3.0",
"resolved": "http://nodepackages.hellobike.cn:4873/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
},
"uniq": {
"version": "1.0.1",
@ -461,13 +584,73 @@
}
},
"vue": {
"version": "3.0.10",
"resolved": "http://nodepackages.hellobike.cn:4873/vue/-/vue-3.0.10.tgz",
"integrity": "sha1-tdKAHGrA51bIUK16j5p4y8y60Co=",
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/vue/-/vue-3.2.27.tgz",
"integrity": "sha512-p1cH8Q6eaPwvANCjFQj497a914cxXKKwOG3Lg9USddTOrn4/zFMKjn9dnovkx+L8VtFaNgbVqW8mLJS/eTA6xw==",
"requires": {
"@vue/compiler-dom": "3.0.10",
"@vue/runtime-dom": "3.0.10",
"@vue/shared": "3.0.10"
"@vue/compiler-dom": "3.2.27",
"@vue/compiler-sfc": "3.2.27",
"@vue/runtime-dom": "3.2.27",
"@vue/server-renderer": "3.2.27",
"@vue/shared": "3.2.27"
},
"dependencies": {
"@babel/parser": {
"version": "7.16.10",
"resolved": "http://nodepackages.hellobike.cn:4873/@babel%2fparser/-/parser-7.16.10.tgz",
"integrity": "sha512-Sm/S9Or6nN8uiFsQU1yodyDW3MWXQhFeqzMPM+t8MJjM+pLsnFVxFZzkpXKvUXh+Gz9cbMoYYs484+Jw/NTEFQ=="
},
"@vue/compiler-core": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-core/-/compiler-core-3.2.27.tgz",
"integrity": "sha512-JyxAglSM/pb9paG5ZNuKrf5IUpzLzQA3khjWGF9oESELCLQlt6O3YyPMR2A69wIpYWrf5mScZ8YY8TJKOI/1kQ==",
"requires": {
"@babel/parser": "^7.16.4",
"@vue/shared": "3.2.27",
"estree-walker": "^2.0.2",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-dom/-/compiler-dom-3.2.27.tgz",
"integrity": "sha512-NyQ7nEbopUBPUMHM4c3FPCbFbnQwptoPjW5Y5qfJ7hfiCNhOuhQsDNqi5JYKBxfpxiFNwjcN9F8t1AsnLrDloQ==",
"requires": {
"@vue/compiler-core": "3.2.27",
"@vue/shared": "3.2.27"
}
},
"@vue/compiler-sfc": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-sfc/-/compiler-sfc-3.2.27.tgz",
"integrity": "sha512-WyecUhLN5UAQAr2QlmG2nA56OEnhZJaBnSw0G1tazb9rwDuK0V9tnbIXbQgmQlx+x4sJxgg61yWGcIXfilTl3A==",
"requires": {
"@babel/parser": "^7.16.4",
"@vue/compiler-core": "3.2.27",
"@vue/compiler-dom": "3.2.27",
"@vue/compiler-ssr": "3.2.27",
"@vue/reactivity-transform": "3.2.27",
"@vue/shared": "3.2.27",
"estree-walker": "^2.0.2",
"magic-string": "^0.25.7",
"postcss": "^8.1.10",
"source-map": "^0.6.1"
}
},
"@vue/compiler-ssr": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-ssr/-/compiler-ssr-3.2.27.tgz",
"integrity": "sha512-+l09t319iV7HVSrXfBw9OLwMZIPOFTXmHjZ61Bc5ZcwKqOYAR4uTurKpoXAfcSc5qs/q6WdE9jY3nrP0LUEMQQ==",
"requires": {
"@vue/compiler-dom": "3.2.27",
"@vue/shared": "3.2.27"
}
},
"@vue/shared": {
"version": "3.2.27",
"resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fshared/-/shared-3.2.27.tgz",
"integrity": "sha512-rpAn9k6O08Lvo7ekBIAnkOukX/4EsEQLPrRJBKhIEasMsOI5eX0f6mq1sDUSY7cgAqWw2d7QtP74CWxdXoyKxA=="
}
}
},
"vue-router": {
@ -480,6 +663,14 @@
"resolved": "http://nodepackages.hellobike.cn:4873/yallist/-/yallist-3.1.1.tgz",
"integrity": "sha1-27fa+b/YusmrRev2ArjLrQ1dCP0=",
"dev": true
},
"zrender": {
"version": "5.2.1",
"resolved": "http://nodepackages.hellobike.cn:4873/zrender/-/zrender-5.2.1.tgz",
"integrity": "sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=",
"requires": {
"tslib": "2.3.0"
}
}
}
}

3
package.json
View File

@ -7,7 +7,8 @@
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5",
"echarts": "^5.2.2",
"vue": "^3.2.27",
"vue-router": "^4.0.5"
},
"devDependencies": {

23
src/App.vue
View File

@ -1,10 +1,21 @@
<template>
<router-link to="/">Page1</router-link> ｜
<router-link to="/page2">Page2</router-link>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</template>
</template>
<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
//set tmp token when setting isNeedLogin false
})
</script>
<style>
a {
color: #42b983;
}
</style>

30
src/components/HelloWorld.vue
View File

@ -1,30 +0,0 @@
<template>
<h1>{{ msg }}</h1>
<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> |
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
</p>
<button @click="state.count++">count is: {{ state.count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<script setup>
import { defineProps, reactive } from 'vue'
defineProps({
msg: String
})
const state = reactive({ count: 0 })
</script>
<style scoped>
a {
color: #42b983;
}
</style>

137
src/components/chart.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<div class="chart-wrap">
<div :id="id" :class="className" :style="{ height: height, width: width }" />
</div>
</template>
<script setup>
import * as echarts from 'echarts';
import { getCurrentInstance, onMounted, reactive, onBeforeUnmount } from 'vue';
let { proxy } = getCurrentInstance();
defineProps({
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '215px'
}
})
const state = reactive({
chart: null,
});
onMounted(() => {
initChart();
});
onBeforeUnmount(() => {
if (!state.chart) {
return
}
state.chart.dispose()
state.chart = null
})
const initChart = () => {
state.chart = echarts.init(document.getElementById(proxy.id));
let dataAxis = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬（rén）', '癸（guǐ）'];
let data = [10, 25, 10, 15, 20, 25, 10, 15, 20, 25, 10];
state.chart.resize({
width: 400,
height: 215
});
state.chart.setOption({
tooltip: {
show: true,
},
xAxis: {
data: dataAxis,
// 柱子 label
axisLabel: {
color: '#8885a1',
margin: state.isH5?4:12, // 距离轴线高度
interval: 0,
rotate: state.isH5?45:0,
fontSize: 10,
},
axisTick: {
alignWithLabel: true,
},
// 轴线样式
axisLine: {
show: true,
lineStyle:{
color: '#3a3464',
width: 1,
type: 'solid',
},
},
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#4e4b74'
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.15)',
width: 1,
type: 'dashed'
}
}
},
series: [
{
type: 'bar',
showBackground: false,
barWidth: state.isH5?12:16,
label: {
show: true,
position: 'top',
color: '#fff',
},
// 柱子颜色
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#60B5FF' },
{ offset: 1, color: '#0088FF' },
])
},
data: data
}
],
});
}
</script>
<style scoped>
.chart-wrap {
width: auto;
overflow-x: auto;
height: 215px;
background: var(--linear-gradient-bg);
border-radius: 12px;
}
</style>

14
src/router/index.js
View File

@ -1,17 +1,17 @@
import { createWebHistory, createRouter } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";
import Page1 from "../views/Page1.vue";
import Page2 from "../views/Page2.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
name: "page1",
component: Page1,
},
{
path: "/about",
name: "About",
component: About,
path: "/page2",
name: "Page2",
component: Page2,
},
];

3
src/views/About.vue
View File

@ -1,3 +0,0 @@
<template>
<h1>About Page</h1>
</template>

20
src/views/Home.vue
View File

@ -1,20 +0,0 @@
<template>
<h1>{{ msg }}</h1>
<button @click="state.count++">count is: {{ state.count }}</button>
</template>
<script setup>
import { defineProps, reactive } from 'vue';
defineProps({
msg: String
})
const state = reactive({ count: 0 })
</script>
<style scoped>
a {
color: #42b983;
}
</style>

22
src/views/Page1.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<!-- use components -->
<Chart />
</template>
<script setup>
import { reactive } from 'vue';
import Chart from '../components/chart.vue'
// reactive data
const state = reactive({ count: 0 })
</script>
<style>
.btn {
background-color: #42b983;
border-radius: 4px;
color: #fff;
text-align: center;
line-height: 45px;
}
</style>

21
src/views/Page2.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div class="btn" @click="state.count++">Click me</div>
<h4>{{ state.count }}</h4>
</template>
<script setup>
import { reactive } from 'vue';
// reactive data
const state = reactive({ count: 0 })
</script>
<style>
.btn {
margin-top: 50px;
}
h4{
text-align: center;
}
</style>

1
vite.config.js
View File

@ -1,7 +1,6 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})