|
|
@@ -1,3 +1,79 @@
|
|
|
+<script setup lang="ts">
|
|
|
+let orderWrapOption = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
+ type: 'line'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+};
|
|
|
+
|
|
|
+let carUseOption = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+// legend: {
|
|
|
+// top: '5%',
|
|
|
+// left: 'center'
|
|
|
+// },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Access From',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 10,
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 40,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: 'Search Engine' },
|
|
|
+ { value: 735, name: 'Direct' },
|
|
|
+ { value: 580, name: 'Email' },
|
|
|
+ { value: 484, name: 'Union Ads' },
|
|
|
+ { value: 300, name: 'Video Ads' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+};
|
|
|
+
|
|
|
+import { ref,onMounted } from 'vue'
|
|
|
+
|
|
|
+onMounted(()=>{
|
|
|
+ let orderWrapDom=document.getElementById('order-wrap')
|
|
|
+ let orderWrapChart=window.echarts.init(orderWrapDom)
|
|
|
+ orderWrapChart.setOption(orderWrapOption)
|
|
|
+
|
|
|
+
|
|
|
+ let carUseWrapDom=document.getElementById('caruse-wrap')
|
|
|
+ let carUseWrapChart=window.echarts.init(carUseWrapDom)
|
|
|
+ carUseWrapChart.setOption(carUseOption)
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
<template>
|
|
|
<div>
|
|
|
<div class="title">
|
|
|
@@ -9,22 +85,62 @@
|
|
|
<div class="card-wrap">
|
|
|
<div class="card-item">
|
|
|
<el-card style="width: 94%">
|
|
|
- <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
|
|
|
+ <div class="card-wrap-inner">
|
|
|
+ <div class="left-icon">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="right-desc">
|
|
|
+ <div class="bold-title">总用户数</div>
|
|
|
+ <div class="num-wrap" style="color:#2563EB">
|
|
|
+ 2458
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
<el-card style="width: 94%">
|
|
|
- <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
|
|
|
+ <div class="card-wrap-inner">
|
|
|
+ <div class="left-icon">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="right-desc">
|
|
|
+ <div class="bold-title">车辆总数</div>
|
|
|
+ <div class="num-wrap" style="color:#16A34A">
|
|
|
+ 186
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
<el-card style="width: 94%">
|
|
|
- <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
|
|
|
+ <div class="card-wrap-inner">
|
|
|
+ <div class="left-icon">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="right-desc">
|
|
|
+ <div class="bold-title">路线总数</div>
|
|
|
+ <div class="num-wrap" style="color:#9333EA">
|
|
|
+ 42
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
<el-card style="width: 94%">
|
|
|
- <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
|
|
|
+ <div class="card-wrap-inner">
|
|
|
+ <div class="left-icon">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="right-desc">
|
|
|
+ <div class="bold-title">今日订单</div>
|
|
|
+ <div class="num-wrap" style="color:#CA8A04">
|
|
|
+ 357
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -32,12 +148,17 @@
|
|
|
<div class="chart-wrap">
|
|
|
<div class="chart-item">
|
|
|
<el-card style="width: 97%">
|
|
|
- <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
|
|
|
+ <div class="common-title">近期订单统计</div>
|
|
|
+ <div class="common-chart-wrap" id="order-wrap">
|
|
|
+
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
<div class="chart-item">
|
|
|
<el-card style="width: 97%">
|
|
|
- <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
|
|
|
+ <div class="common-title">车辆使用率</div>
|
|
|
+ <div class="common-chart-wrap" id="caruse-wrap"></div>
|
|
|
+
|
|
|
</el-card>
|
|
|
</div>
|
|
|
|
|
|
@@ -46,10 +167,39 @@
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ .sub-title{
|
|
|
+ color:#4B5563;
|
|
|
+ font-size:16px;
|
|
|
+ margin-bottom:24px;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ color:#1F2937;
|
|
|
+ font-size:24px;
|
|
|
+ font-weight:600;
|
|
|
+ }
|
|
|
.card-wrap{
|
|
|
display:flex;
|
|
|
.card-item{
|
|
|
width:25%;
|
|
|
+ .card-wrap-inner{
|
|
|
+ display:flex;
|
|
|
+ align-items: center;
|
|
|
+ .left-icon{
|
|
|
+ margin-right:10px;
|
|
|
+ height:40px;
|
|
|
+ width:40px;
|
|
|
+ background:red;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ .num-wrap{
|
|
|
+ font-size:24px;
|
|
|
+ font-weight:600;
|
|
|
+ }
|
|
|
+ .bold-title{
|
|
|
+ font-size:18px;
|
|
|
+ font-weight:600;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.chart-wrap{
|
|
|
@@ -57,6 +207,14 @@
|
|
|
display:flex;
|
|
|
.chart-item{
|
|
|
width:50%;
|
|
|
+ .common-title{
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+ padding:24px 0 16px 24px;
|
|
|
+ }
|
|
|
+ .common-chart-wrap{
|
|
|
+ height:300px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
lyy