页面修改
This commit is contained in:
parent
5e530a1a90
commit
41b0e33e7c
|
|
@ -9,6 +9,7 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||||
|
"@jiaminghi/data-view": "^2.10.0",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"vue": "^3.3.8",
|
"vue": "^3.3.8",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5"
|
||||||
|
|
@ -407,6 +408,34 @@
|
||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@jiaminghi/bezier-curve": {
|
||||||
|
"version": "0.0.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
|
||||||
|
"integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.5.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@jiaminghi/c-render": {
|
||||||
|
"version": "0.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
|
||||||
|
"integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.5.5",
|
||||||
|
"@jiaminghi/bezier-curve": "*",
|
||||||
|
"@jiaminghi/color": "*",
|
||||||
|
"@jiaminghi/transition": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@jiaminghi/charts": {
|
||||||
|
"version": "0.2.18",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jiaminghi/charts/-/charts-0.2.18.tgz",
|
||||||
|
"integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.5.5",
|
||||||
|
"@jiaminghi/c-render": "^0.4.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@jiaminghi/color": {
|
"node_modules/@jiaminghi/color": {
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
|
"resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
|
||||||
|
|
@ -415,6 +444,23 @@
|
||||||
"@babel/runtime": "^7.5.5"
|
"@babel/runtime": "^7.5.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@jiaminghi/data-view": {
|
||||||
|
"version": "2.10.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jiaminghi/data-view/-/data-view-2.10.0.tgz",
|
||||||
|
"integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.5.5",
|
||||||
|
"@jiaminghi/charts": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@jiaminghi/transition": {
|
||||||
|
"version": "1.1.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jiaminghi/transition/-/transition-1.1.11.tgz",
|
||||||
|
"integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.5.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@jridgewell/gen-mapping": {
|
"node_modules/@jridgewell/gen-mapping": {
|
||||||
"version": "0.3.3",
|
"version": "0.3.3",
|
||||||
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
|
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
|
||||||
|
|
@ -2188,6 +2234,34 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
|
"@jiaminghi/bezier-curve": {
|
||||||
|
"version": "0.0.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
|
||||||
|
"integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.5.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@jiaminghi/c-render": {
|
||||||
|
"version": "0.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
|
||||||
|
"integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.5.5",
|
||||||
|
"@jiaminghi/bezier-curve": "*",
|
||||||
|
"@jiaminghi/color": "*",
|
||||||
|
"@jiaminghi/transition": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@jiaminghi/charts": {
|
||||||
|
"version": "0.2.18",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jiaminghi/charts/-/charts-0.2.18.tgz",
|
||||||
|
"integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.5.5",
|
||||||
|
"@jiaminghi/c-render": "^0.4.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@jiaminghi/color": {
|
"@jiaminghi/color": {
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
|
"resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
|
||||||
|
|
@ -2196,6 +2270,23 @@
|
||||||
"@babel/runtime": "^7.5.5"
|
"@babel/runtime": "^7.5.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@jiaminghi/data-view": {
|
||||||
|
"version": "2.10.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jiaminghi/data-view/-/data-view-2.10.0.tgz",
|
||||||
|
"integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.5.5",
|
||||||
|
"@jiaminghi/charts": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@jiaminghi/transition": {
|
||||||
|
"version": "1.1.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jiaminghi/transition/-/transition-1.1.11.tgz",
|
||||||
|
"integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.5.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@jridgewell/gen-mapping": {
|
"@jridgewell/gen-mapping": {
|
||||||
"version": "0.3.3",
|
"version": "0.3.3",
|
||||||
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
|
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||||
|
"@jiaminghi/data-view": "^2.10.0",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"vue": "^3.3.8",
|
"vue": "^3.3.8",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,140 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="background-color: red; height: 100px; width: 750px;">
|
<div class="chartNum" style="margin: 0 20px;">
|
||||||
sadsasdfsdf
|
<div class="box-item">
|
||||||
|
<li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item, index) in orderNum"
|
||||||
|
:key="index">
|
||||||
|
<span v-if="!isNaN(item)">
|
||||||
|
<i ref="numberItem">0123456789</i>
|
||||||
|
</span>
|
||||||
|
<span class="comma" v-else>{{ item }}</span>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script>
|
||||||
</script>
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默认订单总数
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.toOrderNum(656656) // 这里输入数字即可调用
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 设置文字滚动
|
||||||
|
setNumberTransform() {
|
||||||
|
const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
|
||||||
|
const numberArr = this.orderNum.filter(item => !isNaN(item))
|
||||||
|
// 结合CSS 对数字字符进行滚动,显示订单数量
|
||||||
|
for (let index = 0; index < numberItems.length; index++) {
|
||||||
|
const elem = numberItems[index]
|
||||||
|
elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 处理总订单数字
|
||||||
|
toOrderNum(num) {
|
||||||
|
num = num.toString()
|
||||||
|
// 把订单数变成字符串
|
||||||
|
if (num.length < 8) {
|
||||||
|
num = '0' + num // 如未满八位数，添加"0"补位
|
||||||
|
this.toOrderNum(num) // 递归添加"0"补位
|
||||||
|
} else if (num.length === 8) {
|
||||||
|
// 订单数中加入逗号
|
||||||
|
// num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
|
||||||
|
this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
|
||||||
|
} else {
|
||||||
|
// 订单总量数字超过八位显示异常
|
||||||
|
this.$message.warning('总量数字过大')
|
||||||
|
}
|
||||||
|
this.setNumberTransform()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang='scss'>
|
||||||
|
/*订单总量滚动数字设置*/
|
||||||
|
.box-item {
|
||||||
|
position: relative;
|
||||||
|
height: 80px;
|
||||||
|
|
||||||
|
font-size: 54px;
|
||||||
|
line-height: 41px;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none;
|
||||||
|
color: white;
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
text-orientation: upright;
|
||||||
|
/*文字禁止编辑*/
|
||||||
|
-moz-user-select: none;
|
||||||
|
/*火狐*/
|
||||||
|
-webkit-user-select: none;
|
||||||
|
/*webkit浏览器*/
|
||||||
|
-ms-user-select: none;
|
||||||
|
/*IE10*/
|
||||||
|
-khtml-user-select: none;
|
||||||
|
/*早期浏览器*/
|
||||||
|
user-select: none;
|
||||||
|
/* overflow: hidden; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 默认逗号设置 */
|
||||||
|
.mark-item {
|
||||||
|
width: 10px;
|
||||||
|
height: 100px;
|
||||||
|
margin-right: 5px;
|
||||||
|
line-height: 10px;
|
||||||
|
font-size: 48px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&>span {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
text-orientation: upright;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*滚动数字设置*/
|
||||||
|
.number-item {
|
||||||
|
width: 41px;
|
||||||
|
height: 75px;
|
||||||
|
/* 背景图片 */
|
||||||
|
background: url('/static/index/SZBG.png') no-repeat center center;
|
||||||
|
// background: #ccc;
|
||||||
|
list-style: none;
|
||||||
|
margin-right: 5px;
|
||||||
|
// background:rgba(250,250,250,1);
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&>span {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
text-orientation: upright;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&>i {
|
||||||
|
font-style: normal;
|
||||||
|
position: absolute;
|
||||||
|
top: 11px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
transition: transform 1s ease-in-out;
|
||||||
|
letter-spacing: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.number-item:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
// import './style.css'
|
// import './style.css'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
import dataV from '@jiaminghi/data-view'
|
||||||
|
|
||||||
// import DataV, { setClassNamePrefix } from '@dataview/datav-vue3';
|
// import DataV, { setClassNamePrefix } from '@dataview/datav-vue3';
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
|
|
||||||
const app=createApp(App)
|
const app=createApp(App)
|
||||||
app.use(router)
|
app.use(router)
|
||||||
|
app.use(dataV)
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|
@ -5,12 +5,7 @@ const routes= [
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'index',
|
name: 'index',
|
||||||
component:()=>import('@/view/index.vue'),
|
component:()=>import('@/view/index.vue'),
|
||||||
},
|
}
|
||||||
// {
|
|
||||||
// path: '/a',
|
|
||||||
// name: 'indesx',
|
|
||||||
// component:()=>import('@/components/header.vue'),
|
|
||||||
// },
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,26 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="header">
|
<div class="headers">
|
||||||
<div class="logo"></div>
|
<div class="logo">
|
||||||
<div class="tab">
|
|
||||||
<div class="tab-li">首 页</div>
|
|
||||||
<div class="tab-li">商 品</div>
|
|
||||||
<div class="tab-li">商 户</div>
|
|
||||||
<div class="tab-li">订 单</div>
|
|
||||||
<div class="tab-li">财 务</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tab">
|
||||||
|
<img v-if="show[0]" @click="show[0] = false" class="tab-li" :src="u('SYXZ')" alt="">
|
||||||
|
<img v-else class="tab-li" @click="show[0] = true" :src="u('SY')" alt="">
|
||||||
|
|
||||||
|
<img v-if="show[1]" @click="show[1] = false" class="tab-li" src="/static/index/SP.png" alt="">
|
||||||
|
<img v-else="show[1]" @click="show[1] = true" class="tab-li" src="/static/index/SPXZ.png" alt="">
|
||||||
|
|
||||||
|
<img v-if="show[2]" @click="show[2] = false" class="tab-li" src="/static/index/SH.png" alt="">
|
||||||
|
<img v-else class="tab-li" @click="show[2] = true" src="/static/index/SHXZ.png" alt="">
|
||||||
|
|
||||||
|
<img class="tab-li" @click="show[3] = false" v-if="show[3]" src="/static/index/DD.png" alt="">
|
||||||
|
<img class="tab-li" @click="show[3] = true" v-else src="/static/index/DDxz.png" alt="">
|
||||||
|
|
||||||
|
|
||||||
|
<img class="tab-li" @click="show[4] = false" v-if="show[4]" src="/static/index/CW.png" alt="">
|
||||||
|
<img class="tab-li" @click="show[4] = true" v-else src="/static/index/CWXZ.png" alt="">
|
||||||
|
|
||||||
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="rigth-li">泸县</div>
|
<div class="rigth-li">泸县</div>
|
||||||
<div class="rigth-li">15:39:25</div>
|
<div class="rigth-li">15:39:25</div>
|
||||||
|
|
@ -18,57 +28,302 @@
|
||||||
<div class="rigth-li">关机</div>
|
<div class="rigth-li">关机</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
|
||||||
|
<div class="l">
|
||||||
|
<div class="user" id="user"></div>
|
||||||
|
<div class="storeNum">
|
||||||
|
<div class="tit"></div>
|
||||||
|
<div class="townList">
|
||||||
|
<div class="storebox" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1]">
|
||||||
|
<div class="store" :id="'store' + index"></div>
|
||||||
|
<div class="toenName">
|
||||||
|
<div>同谈镇</div>
|
||||||
|
<div>123个</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="c" id="">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="product-list">
|
||||||
|
<div class="product" style="display: flex;justify-content: space-around;">
|
||||||
|
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||||
|
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="product" style="display: flex;justify-content: space-around;">
|
||||||
|
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||||
|
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="product" style="display: flex;justify-content: space-around;">
|
||||||
|
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||||
|
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Views">
|
||||||
|
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
|
<div class="view-content">
|
||||||
|
<div>昨日数据：3333</div>
|
||||||
|
<div style="display: flex;align-items: center;">当前浏览量： <Header></Header> 人正在浏览
|
||||||
|
</div>
|
||||||
|
<div>周环比：32%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="r">
|
||||||
|
<!-- <div>
|
||||||
|
店铺销量排行
|
||||||
|
</div> -->
|
||||||
|
<div class="user">
|
||||||
|
<div class="btns">
|
||||||
|
|
||||||
|
<span class="btn">店铺销量排行</span>
|
||||||
|
<span class="btn">店铺销量排行</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<dv-scroll-board :config="config3" style="width:95%;height:20vh" />
|
||||||
|
</div>
|
||||||
|
<div class="storeNum">
|
||||||
|
<div class="tit">
|
||||||
|
</div>
|
||||||
|
<div class="townList">
|
||||||
|
<div class="storebox" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1]">
|
||||||
|
<div class="store" :id="'store' + (index + 8)"></div>
|
||||||
|
<div class="toenName">
|
||||||
|
<div>同谈镇</div>
|
||||||
|
<div>123个</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="foot">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="foot-l">
|
||||||
|
<div style="height: 5vh;"></div>
|
||||||
|
<div>
|
||||||
|
<dv-scroll-board :config="configs" style="width:25vw;height:40vh" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="c">
|
||||||
|
<div style="height:5vh;"></div>
|
||||||
|
<div class="towns">
|
||||||
|
<div class="town-li" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]">泸县</div>
|
||||||
|
<div id="transactionUsers" style="width: 100%;height: 30vh;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="r">
|
||||||
|
|
||||||
|
<div style="height: 5vh;"></div>
|
||||||
|
<div>
|
||||||
|
<dv-scroll-board :config="configs2" style="width:25vw;height:40vh" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import { BorderBox1 } from '@dataview/datav-vue3';
|
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import header from "@/components/header.vue"
|
import option from "./option"
|
||||||
// alert(5454)
|
import Header from "@/components/header.vue"
|
||||||
console.log(header)
|
import { ref, reactive } from "vue"
|
||||||
onMounted(() => {
|
|
||||||
|
|
||||||
|
const i = 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231123//20231123190555159fa2259.jpg'
|
||||||
|
const configs = reactive(
|
||||||
|
{
|
||||||
|
header: ['所属地区', '日订单数', '日订单金额', '月订单数', '月订单金额'],
|
||||||
|
headerBGC: '#223B7E',
|
||||||
|
data: [
|
||||||
|
['行1列1', '行1列2', '行1列3', 'sad', 'asdsa'],
|
||||||
|
['行2列1', '行2列2', '行2列3', 'sad', 'asdsa'],
|
||||||
|
['行3列1', '行3列2', '行3列3', 'sad', 'asdsa'],
|
||||||
|
['行4列1', '行4列2', '行4列3', 'sad', 'asdsa'],
|
||||||
|
['行5列1', '行5列2', '行5列3', 'sad', 'asdsa'],
|
||||||
|
['行6列1', '行6列2', '行6列3', 'sad', 'asdsa'],
|
||||||
|
['行7列1', '行7列2', '行7列3', 'sad', 'asdsa'],
|
||||||
|
['行8列1', '行8列2', '行8列3', 'sad', 'asdsa'],
|
||||||
|
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
||||||
|
['行10列1', '行10列2', '行10列3']
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
)
|
||||||
|
const configs2 = reactive(
|
||||||
|
{
|
||||||
|
header: ['所属片区', '当日订单金额', '昨日订单金额'],
|
||||||
|
headerBGC: '#223B7E',
|
||||||
|
align: ['center'],
|
||||||
|
data: [
|
||||||
|
['行1列1', '行1列2', '行1列3'],
|
||||||
|
['行2列1', '行2列2', '行2列3'],
|
||||||
|
['行3列1', '行3列2', '行3列3'],
|
||||||
|
['行4列1', '行4列2', '行4列3'],
|
||||||
|
['行5列1', '行5列2', '行5列3'],
|
||||||
|
['行6列1', '行6列2', '行6列3'],
|
||||||
|
['行7列1', '行7列2', '行7列3'],
|
||||||
|
['行8列1', '行8列2', '行8列3'],
|
||||||
|
['行9列1', '行9列2', '行9列3'],
|
||||||
|
['行10列1', '行10列2', '行10列3']
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
)
|
||||||
|
const config3 = reactive({
|
||||||
|
oddRowBGC: "#001C2E",
|
||||||
|
evenRowBGC: "#001C2E",
|
||||||
|
columnWidth: [
|
||||||
|
50, 60, 70, 220, 100
|
||||||
|
],
|
||||||
|
data: [
|
||||||
|
|
||||||
|
|
||||||
|
[
|
||||||
|
`<div style=" text-align: center;background-image: url('/static/index/PM1.png');width: 30px;height: 30px;background-size: cover;">1</div> `,
|
||||||
|
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||||
|
`<div>商品名称</div>`,
|
||||||
|
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||||
|
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
],
|
||||||
|
[` <div style=" text-align: center;background-image: url('/static/index/PM2.png');width: 30px;height: 30px;background-size: cover;"> 2</div> `,
|
||||||
|
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||||
|
`<div>商品名称</div>`,
|
||||||
|
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||||
|
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
[` <div style=" text-align: center;background-image: url('/static/index/PM3.png');width: 30px;height: 30px;background-size: cover;">3</div> `,
|
||||||
|
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||||
|
`<div>商品名称</div>`,
|
||||||
|
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||||
|
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
],
|
||||||
|
[` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">4</div> `,
|
||||||
|
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||||
|
`<div>商品名称</div>`,
|
||||||
|
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||||
|
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
],
|
||||||
|
[` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">5</div> `,
|
||||||
|
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||||
|
`<div>商品名称</div>`,
|
||||||
|
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||||
|
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
],
|
||||||
|
[` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">6</div> `,
|
||||||
|
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||||
|
`<div>商品名称</div>`,
|
||||||
|
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||||
|
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
const show = reactive([true, true, true, true, true])
|
||||||
|
|
||||||
|
const u = (name) => {
|
||||||
|
return `/static/index/${name}.png`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图表
|
||||||
|
const initCharts = (tag, option) => {
|
||||||
|
var chartDom = document.getElementById(tag);
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
myChart.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initCharts('user', option.userChartOption)
|
||||||
|
|
||||||
|
for (let i = 0; i < 16; i++) {
|
||||||
|
initCharts('store' + i, option.storeNum)
|
||||||
|
|
||||||
|
}
|
||||||
|
initCharts('transactionUsers', option.transactionUsers)
|
||||||
|
|
||||||
|
|
||||||
|
// initCharts('user', option.userChartOption)
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@keyframes jump {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: #000C14;
|
background-color: #000C14;
|
||||||
|
|
||||||
.header {
|
.headers {
|
||||||
display: flex;
|
display: flex;
|
||||||
color: #B0C7D1;
|
color: #B0C7D1;
|
||||||
height: 40px;
|
height: 6vh;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
background-image: url('/static/index/TIT.png');
|
||||||
|
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
width: 20vw;
|
width: 20vw;
|
||||||
background-color: red;
|
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-left: 120px;
|
||||||
|
// background-color: #fff;
|
||||||
|
|
||||||
.tab-li {
|
.tab-li {
|
||||||
width: 120px;
|
width: 13%;
|
||||||
background-color: #002641;
|
margin-right: 10px;
|
||||||
text-align: center;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
margin: 0 10px;
|
|
||||||
color: white;
|
|
||||||
text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 10px white; //设置发光效果
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// .tab-li {
|
||||||
|
// width: 120px;
|
||||||
|
// background-color: #002641;
|
||||||
|
// text-align: center;
|
||||||
|
// height: 25px;
|
||||||
|
// line-height: 25px;
|
||||||
|
// margin: 0 10px;
|
||||||
|
// color: white;
|
||||||
|
// text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 10px white; //设置发光效果
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
|
|
@ -83,4 +338,309 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
// margin-top: 30px;
|
||||||
|
height: 50vh;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.l {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
background: url('/static/index/PTYHL.png');
|
||||||
|
// background-size: cover;
|
||||||
|
background-size: 25vw 50vh;
|
||||||
|
|
||||||
|
.user {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 5vh;
|
||||||
|
width: 100%;
|
||||||
|
height: 57%;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeNum {
|
||||||
|
width: 100%;
|
||||||
|
height: 43%;
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
height: 15%;
|
||||||
|
// background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.townList {
|
||||||
|
height: 75%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
|
||||||
|
.storebox {
|
||||||
|
width: 22%;
|
||||||
|
height: 40%;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
.store {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.toenName {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
|
||||||
|
border-radius: 0 15px 15px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 7px 2px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.c {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 15px;
|
||||||
|
flex: 2;
|
||||||
|
height: 100%;
|
||||||
|
// background-color: pink;
|
||||||
|
|
||||||
|
.product-list {
|
||||||
|
height: 75%;
|
||||||
|
// background-color: red;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.product {
|
||||||
|
height: 100%;
|
||||||
|
width: 32%;
|
||||||
|
// background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-icon {
|
||||||
|
width: 2vw;
|
||||||
|
height: 2vw;
|
||||||
|
position: absolute;
|
||||||
|
animation: jump 1s infinite;
|
||||||
|
top: 2vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Views {
|
||||||
|
height: 25%;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 15px;
|
||||||
|
position: relative;
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
.view-content {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.r {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
background: url('/static/index/PTSP.png');
|
||||||
|
// background-size: cover;
|
||||||
|
background-size: 25vw 49vh;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.user {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 5vh;
|
||||||
|
width: 100%;
|
||||||
|
height: 57%;
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin-right: 1vw;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border: 1px solid #2A538D;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeNum {
|
||||||
|
width: 100%;
|
||||||
|
height: 43%;
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
height: 15%;
|
||||||
|
// background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.townList {
|
||||||
|
height: 75%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
|
||||||
|
.storebox {
|
||||||
|
width: 22%;
|
||||||
|
height: 40%;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
.store {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.toenName {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
|
||||||
|
border-radius: 0 15px 15px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 7px 2px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.foot {
|
||||||
|
// margin-top: 30px;
|
||||||
|
height: 45vh;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.foot-l {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
background: url('/static/index/DDSJ.png');
|
||||||
|
background-size: 25vw 45vh;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.c {
|
||||||
|
flex: 2;
|
||||||
|
height: 100%;
|
||||||
|
background: url('/static/index/CJYHTJ.png');
|
||||||
|
background-size: 50vw 45vh;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.towns {
|
||||||
|
width: 50vw;
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1vh 1vw;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.town-li {
|
||||||
|
margin-top: 10px;
|
||||||
|
color: #A0C7D5;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 7px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
border: 1px solid #3A91A5;
|
||||||
|
background-color: #072C3E;
|
||||||
|
// margin-left: 2vw;
|
||||||
|
justify-content: fl;
|
||||||
|
margin-left: 2vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.r {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
background: url('/static/index/DRDD.png');
|
||||||
|
background-size: 25vw 45vh;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.producta {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: black;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.producta::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
left: -100%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: radial-gradient(circle, #ffffff 20%, rgba(255, 255, 255, 0) 70%);
|
||||||
|
animation: shine 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shine {
|
||||||
|
0% {
|
||||||
|
transform: rotate(45deg) translate(-150%, -150%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(45deg) translate(150%, 150%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
transform: translateY(12px);
|
||||||
|
width: 100%;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #122E3F;
|
||||||
|
// border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(to right, #455CCC, #51C2E0);
|
||||||
|
transition: width 0.5s ease-in-out;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,362 @@
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
let angle = 0;//角度，用来做简单的动画效果的
|
||||||
|
let value = 78; //图上角度数据
|
||||||
|
let result = [
|
||||||
|
{ name: '制造业', value: 5713,itemStyle: {color: '#FF7734'}},
|
||||||
|
{ name: '信息传输、软件和信息技术服务业', value: 3022 ,itemStyle: {color: '#FFC700'}},
|
||||||
|
{ name: '科学研究和技术服务业', value: 2647 ,itemStyle: {color: '#34FFE7'}},
|
||||||
|
{ name: '金融业', value: 2291 },
|
||||||
|
{ name: '批发和零售业', value: 1946 },
|
||||||
|
{ name: '交通运输、仓储和邮政业', value: 1812 },
|
||||||
|
{ name: '教育', value: 1756 },
|
||||||
|
{ name: '建筑业', value: 1712 },
|
||||||
|
{ name: '房地产业', value: 1666 },
|
||||||
|
{ name: '水利、环境和公共设施管理业', value: 1621 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const optins={
|
||||||
|
// 用户图表
|
||||||
|
userChartOption : {
|
||||||
|
color:[
|
||||||
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{ offset: 1, color: 'transparent' },
|
||||||
|
{ offset: 0, color: '#0081C3' },
|
||||||
|
])
|
||||||
|
, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{ offset: 1, color: 'transparent' },
|
||||||
|
{ offset: 0, color: '#3E54BF' },
|
||||||
|
]) , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{ offset: 1, color: 'transparent' },
|
||||||
|
{ offset: 0, color: '#4DBFD9' },
|
||||||
|
]) ,
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// color: transparent;
|
||||||
|
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['11.01', '11-02', '11-03', '11-04', '11-05',]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitLine:{
|
||||||
|
show:true,
|
||||||
|
lineStyle:{
|
||||||
|
type:'dashed',//背景色为虚线,
|
||||||
|
color:'#256980'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '新增用户数量',
|
||||||
|
type: 'bar',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320],
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#384FB4",
|
||||||
|
},
|
||||||
|
|
||||||
|
backgroundStyle: {
|
||||||
|
color: ['red']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '访问用户数量',
|
||||||
|
type: 'bar',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#3E54BF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '累计用户数量',
|
||||||
|
type: 'bar',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310],
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#4EC1DB",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 地方店铺数量统计
|
||||||
|
storeNum:{
|
||||||
|
backgroundColor:"#061740",
|
||||||
|
title: {
|
||||||
|
text: '{a|'+ 70 +'}{c|%}',
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
rich:{
|
||||||
|
a: {
|
||||||
|
fontSize: 10,
|
||||||
|
color: '#ffffff',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
c: {
|
||||||
|
fontSize: 10,
|
||||||
|
color: '#ffffff',
|
||||||
|
fontWeight: 'normal'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
//内环
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: 'custom',
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem: function(params, api) {
|
||||||
|
return {
|
||||||
|
type: 'arc',
|
||||||
|
shape: {
|
||||||
|
cx: api.getWidth() / 2,
|
||||||
|
cy: api.getHeight() / 2,
|
||||||
|
r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
|
||||||
|
startAngle: (0+-angle) * Math.PI / 180,
|
||||||
|
endAngle: (360+-angle) * Math.PI / 180
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
stroke: "#0CD3DB",
|
||||||
|
fill: "transparent",
|
||||||
|
lineWidth: 0.5
|
||||||
|
},
|
||||||
|
silent: true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0]
|
||||||
|
},
|
||||||
|
//外环
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['85%', '70%'],
|
||||||
|
silent: true,
|
||||||
|
clockwise: true,
|
||||||
|
startAngle: 90,
|
||||||
|
z: 0,
|
||||||
|
zlevel: 0,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
position: "center",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 60,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
//外环发光
|
||||||
|
borderWidth: 0.5,
|
||||||
|
shadowBlur: 20,
|
||||||
|
borderColor: '#4bf3f9',
|
||||||
|
shadowColor: '#9bfeff',
|
||||||
|
color: { // 圆环的颜色
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#4bf3f9', // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#4bf3f9', // 100% 处的颜色
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100-70,
|
||||||
|
name: "",
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#173164"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 成交用户统计信息表
|
||||||
|
|
||||||
|
transactionUsers : {
|
||||||
|
color: ['#015989', '#583936', '#416979'],
|
||||||
|
title: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['访客人数', '下单人数', '支付人数', 'Line 4', 'Line 5']
|
||||||
|
// data: ['访客人数','下单人数','支付人数']
|
||||||
|
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitLine:{
|
||||||
|
show:true,
|
||||||
|
lineStyle:{
|
||||||
|
type:'dashed',//背景色为虚线,
|
||||||
|
color:'#256980'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访客人数',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#18394A'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#2885A4'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [140, 232, 101, 264, 90, 340, 250]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '下单人数',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#004367'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#005886'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 282, 111, 234, 220, 340, 310]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '支付人数',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#5A3A37'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#355969'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 132, 201, 334, 190, 130, 220]
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default optins
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 667 B |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
|
|
@ -13,6 +13,27 @@ export default defineConfig({
|
||||||
alias: {
|
alias: {
|
||||||
'@': path.resolve(__dirname, 'src')
|
'@': path.resolve(__dirname, 'src')
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
optimizeDeps: {
|
||||||
|
// 开发时 解决这些commonjs包转成esm包
|
||||||
|
include: [
|
||||||
|
"@jiaminghi/c-render",
|
||||||
|
"@jiaminghi/c-render/lib/plugin/util",
|
||||||
|
"@jiaminghi/charts/lib/util/index",
|
||||||
|
"@jiaminghi/charts/lib/util",
|
||||||
|
"@jiaminghi/charts/lib/extend/index",
|
||||||
|
"@jiaminghi/charts",
|
||||||
|
"@jiaminghi/color",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
// 打包时需要另外处理的commonjs规范的包
|
||||||
|
commonjsOptions: {
|
||||||
|
include: [
|
||||||
|
/node_modules/, // 必须包含
|
||||||
|
],
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue