From c3631b3226f7355e376e68d46ffc04891b4618ba Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期五, 16 八月 2024 10:32:26 +0800
Subject: [PATCH] feat：数据中心展示
---
src/views/screen/components/screen-examine/components/examine-chart.vue | 192 ++++++++++++++++++++++++++++++++++++++---------
1 files changed, 155 insertions(+), 37 deletions(-)
diff --git a/src/views/screen/components/screen-examine/components/examine-chart.vue b/src/views/screen/components/screen-examine/components/examine-chart.vue
index 0a6b467..2c1dfde 100644
--- a/src/views/screen/components/screen-examine/components/examine-chart.vue
+++ b/src/views/screen/components/screen-examine/components/examine-chart.vue
@@ -1,61 +1,179 @@
<template>
<div class="chart-container">
- <div class="rank-chart" ref="rankChart"></div>
+ <div class="rank-chart">
+ <div
+ class="hola-item"
+ v-for="item in dataType == 'car' ? dataListA : dataList"
+ :key="item.id"
+ >
+ <examine-hola
+ :startColor="'#124ae4'"
+ :endColor="'#99b3fd'"
+ :centerValue="item.value"
+ :bottomTitle="item.name"
+ :routerPath="item.routerUrl"
+ ></examine-hola>
+ </div>
+ </div>
</div>
</template>
<script>
-import * as echarts from 'echarts';
+import ExamineHola from "./examine-hola.vue";
let barChart = null;
export default {
- name: 'ExamineChart',
+ name: "ExamineChart",
+ components: {
+ ExamineHola,
+ },
+ props: {
+ dataType: {
+ type: String,
+ default: "",
+ },
+ },
data() {
return {
-
- }
- },
-
- methods: {
- initChart() {
- const options = {
- xAxis: {
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ dataList: [
+ {
+ id: 1,
+ name: "骞冲彴鍦ㄧ嚎鐜�",
+ value: 60,
+ routerUrl: "/car/vehicle-data-monitor/index",
},
- yAxis: {
- type: 'value'
+ {
+ id: 2,
+ name: "涓�鏈轰竴妗ｅ悎鏍肩巼",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
},
- series: [
- {
- data: [120, 200, 150, 80, 70, 110, 130],
- type: 'bar'
- }
- ]
- }
- barChart.setOption(options,true);
- }
- },
- mounted() {
- barChart = echarts.init(this.$refs.rankChart);
-
- this.initChart();
- },
- beforeDestroy() {
- if (lineChart) {
- barChart.dispose();
- }
+ {
+ id: 3,
+ name: "妗ｆ鑰冩牳姣�",
+ value: 60,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 4,
+ name: "鐐逛綅鍦ㄧ嚎鐜�",
+ value: 40,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 5,
+ name: "褰曞儚鍙敤鐜�",
+ value: 80,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 6,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 7,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 8,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ ],
+ dataListA: [
+ {
+ id: 1,
+ name: "骞冲彴鍦ㄧ嚎鐜�",
+ value: 60,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 2,
+ name: "涓�鏈轰竴妗ｅ悎鏍肩巼",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 3,
+ name: "妗ｆ鑰冩牳姣�",
+ value: 60,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 4,
+ name: "鐐逛綅鍦ㄧ嚎鐜�",
+ value: 40,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 5,
+ name: "褰曞儚鍙敤鐜�",
+ value: 80,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 6,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 7,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 8,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 9,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 10,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ ],
+ };
},
-}
+ methods: {},
+ mounted() {},
+};
</script>
<style lang="scss" scoped>
.chart-container {
width: 100%;
- height: 400px;
+ height: 100%;
+
.rank-chart {
width: 100%;
height: 100%;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ align-content: space-between;
+ padding: 20px 0;
+ box-sizing: border-box;
+
+ .hola-item {
+ flex-shrink: 0;
+ width: 150px;
+ height: 120px;
+ }
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0