可视乎

package-lock.json

@@ -12,7 +12,7 @@
         "core-js": "^3.8.3",
         "crypto-js": "^4.2.0",
         "echarts": "^5.5.0",
-        "element-plus": "^2.5.6",
+        "element-plus": "^2.6.0",
         "js-cookie": "^3.0.5",
         "nprogress": "^0.2.0",
         "qs": "^6.11.2",
@@ -5604,9 +5604,9 @@
       "dev": true
     },
     "node_modules/element-plus": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.5.6.tgz",
-      "integrity": "sha512-zctKTiyIDmcnMp3K5WG1hglgraW9EbiCLiIDVtaMCS5mPMl2fRKdS0vOFGnECIq9taFoxnyoDwxHD81nv0B4RA==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.6.0.tgz",
+      "integrity": "sha512-MP+N48P+diyndR+GjY+0VOrUmFnajD4U0CkrXIMzmeRmq4+dwi0bdzVo587v4wDo9Hs+ggviyacqm3NS8JYVqw==",
       "dependencies": {
         "@ctrl/tinycolor": "^3.4.1",
         "@element-plus/icons-vue": "^2.3.1",

package.json

@@ -14,7 +14,7 @@
     "core-js": "^3.8.3",
     "crypto-js": "^4.2.0",
     "echarts": "^5.5.0",
-    "element-plus": "^2.5.6",
+    "element-plus": "^2.6.0",
     "js-cookie": "^3.0.5",
     "nprogress": "^0.2.0",
     "qs": "^6.11.2",

src/main.ts

@@ -5,8 +5,8 @@ import router from "./router";
 
 import "./styles/common.scss";
 
-import ElementPlus from "element-plus";
-import "element-plus/dist/index.css";
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 
 import "./permission";
@@ -44,5 +44,5 @@ app.use(router);
 app.use(ElementPlus, {
   locale: zhCn
 });
-
+app.use(ElementPlus)
 app.mount("#app");

src/views/DataVisualization/home/components/wzdyqk.vue

@@ -2,40 +2,105 @@
 
 <template>
     <div class="box">
-        <div ref="wzqk" class="charts">
+        <div class="table">
+            <el-table highlight-current-row="false" class="eltable" stripe
+                :header-cell-style="{ background: 'transparent' }" :data="tableData"
+                style="width: 100%  ;height: 100%; border: none;  background: transparent;">
+                <el-table-column style="background: transparent; border: none;" fixed prop="date" label="省份名称" />
+                <el-table-column style="background: transparent; border: none;" prop="name" label="数量" />
+                <el-table-column style="background: transparent; border: none;" prop="state" label="价值(万元)" />
+
+            </el-table>
         </div>
         <div class="title">物资调用情况</div>
+        <el-select class="select"  size="small" placeholder="Select" style="width: 150px ; height: 21px;">
+            <el-option value="1" label="1" />
+            <el-option value="2" label="2" />
+            <el-option value="3" label="3" />
+        </el-select>
     </div>
-
 </template>
 
 <script setup lang="ts">
 import * as echarts from "echarts";
 import { onMounted, ref } from "vue";
-const wzqk = ref(null);
+import header from "./header.vue";
+const tableData = [
+    {
+        date: '河北',
+        name: '4442',
+        state: '2222',
+    },
+    {
+        date: '河北',
+        name: '4442',
+        state: '2222',
+    },
+    {
+        date: '河北',
+        name: '4442',
+        state: '2222',
+    },
+    {
+        date: '河北',
+        name: '4442',
+        state: '2222',
+    },
+    {
+        date: '河北',
+        name: '4442',
+        state: '2222',
+    },
+    {
+        date: '河北',
+        name: '4442',
+        state: '2222',
+    },
 
+]
 
 onMounted(() => {
-    let myChart = echarts.init(wzqk.value)
-    let option: any;
-
-
 })
 </script>
 
 <style scoped>
+
+.select .el-select-dropdown{
+    background: rgba(255,255,255,0.5) !important;;
+}
+.select{
+    position: absolute;
+    left:14%;
+    top:20%;
+    /* height: 10%; */
+}
+:deep(.el-select__wrapper){
+    /* position: absolute; */
+    /* width: 50%; */
+    /* height: 4%; */
+    /* left: 20%;
+    top:; */
+    background: transparent !important;
+    border: rgba(255, 255, 255,0.2) 1px solid  !important;
+    box-shadow: none;
+
+}
 .box {
     width: 100%;
     height: 100%;
     position: relative;
 }
 
-.box .charts {
-    width: 100%;
-    height: 100%;
+.box .table {
+    position: absolute;
+    bottom: 7%;
+    left: 14%;
+    width: 80%;
+    height: 67%;
     /* background: pink; */
 
-
+    z-index: 22;
+    background-color: transparent;
 }
 
 
@@ -49,6 +114,71 @@ onMounted(() => {
     background: linear-gradient(to bottom, #ffffff, rgb(29, 233, 234));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+}
+.el-table {
+    background: transparent;
+}
+
+:deep(.el-table) {
+    background: transparent;
+}
+/*最外层透明*/
+:deep(.el-table),
+:deep(.el-table__expanded-cell) {
+    background-color: transparent;
+    color: rgba(255, 255, 255, 0.5);
+    opacity: 0.8;
+    font-size: 12px;
+
+}
+
+/* 表格内背景颜色 */
+:deep(.el-table th),
+:deep(.el-table tr),
+:deep(.el-table td) {
+    background-color: transparent;
+    color: rgb(255, 255, 255);
+}
+
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+    /* background: red; */
+    backdrop-filter: blur(10px);
+    background: rgba(34, 62, 165, 0.3);
+}
+
+:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
+    border: none !important;
+}
+
+:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
+    border: none !important;
+}
+
+.el-table tbody tr:hover>td {
+    background-color: transparent !important
+}
+
+.el-table__body tr.hover-row.current-row>td.el-table__cell,
+.el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,
+.el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell,
+.el-table__body tr.hover-row>td.el-table__cell {
+    background-color: transparent !important;
+}
+
+:deep(.el-table tbody tr:hover > td) {
+    background-color: transparent !important
+}
+
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+    border-bottom: none;
+}
+
+:deep(.el-table_row > td) {
+    border: non;
+}
 
+:deep(.el-table) {
+    --el-table-border-color: transparent;
 }
 </style>

src/views/DataVisualization/home/components/wzqk.vue

@@ -13,14 +13,110 @@
 import * as echarts from "echarts";
 import { onMounted, ref } from "vue";
 const wzqk = ref(null);
-
+let data = [
+    [34, 123, 22, 80, 150, 200,123,233,222],
+    [122, 233, 143, 120, 170, 160,222,122,122]
+]
+let xdata = ['被服', '床具', '用具', '帐篷', '抢险物料', '救生器材','抢险机具','排水设备','供水器具']
+let legends = ['可用物资', '不可以物资']
+const series = data.map((item, index) => {
+    return {
+        name: legends[index],
+        type: 'bar',
+        stack: 'total',
+        label: {
+            show: false
+        },
+        emphasis: {
+            focus: 'series'
+        },
+        data: item
+    };
+});
+let zeroArr = xdata.map((v) => 0);
 
 onMounted(() => {
     let myChart = echarts.init(wzqk.value)
     let option: any;
+    series.push({
+        name: null,
+        type: 'bar',
+        stack: 'total',
+        barWidth: '30%',
+        label: {
+            show: true,
+            color: '#333',
+            position: 'top',
+            distance: 10,
+            fontSize: 12,
+            formatter: function (lp) {
+                let datas = 0;
+                option.series.map((v) => {
+                    let data_ = v.data[lp.dataIndex];
+                    datas += data_;
+                });
+                return datas || '';
+            }
+        },
+        emphasis: {
+            select: false
+        },
+        tooltip: {
+            show: false
+        },
+        data: zeroArr
+    });
+    option = {
+        backgroundColor: '',
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                // Use axis to trigger tooltip
+                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+            }
+        },
+        legend: {
+            top:'20%',
+            right:'10%',
+            color:'#fff',
+            textStyle: {
+                color: '#fff',
+                fontSize: 12,
+                lineHeight: 24,
+            },
+            
+        },
+        grid: {
+            left: '18%',
+            // right: '4%',
+            // bottom: '3%',
+            top:'40%',
+            width:'70%',
+            height:'60%',
 
+            containLabel: true
+        },
+        yAxis: {
+            type: 'value'
+        },
+        xAxis: {
+            type: 'category',
+            axisLabel: {
+                color: '#fff',
+                interval:0,
+                rotate:45
+                // fontSize:12,
+                // padding:0
+            },
+            data: xdata
+        },
+        color: ['#98EECC', '#FC4F00'],
+        series: series
+    };
+    myChart.setOption(option)
 
 })
+
 </script>
 
 <style scoped>

src/views/DataVisualization/home/components/wzrkqk.vue

@@ -13,12 +13,153 @@
 import * as echarts from "echarts";
 import { onMounted, ref } from "vue";
 const wzqk = ref(null);
-
-
+const myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
+const Ydata = ['抢险物料','救生器材','抢险机具','排水设备','供水器具'];
+const Xdata = [10, 13, 25, 29, 38, 47, 56, 68, 76, 82];
 onMounted(() => {
     let myChart = echarts.init(wzqk.value)
-    let option: any;
-
+    let option = {
+        //你的代码
+        backgroundColor: '',
+        grid: {
+            left: '21%',
+            top: '38%',
+            right: '10%',
+            width:'70%',
+            height:'60%',
+            bottom: '8%',
+            containLabel: true
+        },
+        dataZoom: [
+            {
+                yAxisIndex: 0, //这里是从X轴的0刻度开始
+                show: false, //是否显示滑动条，不影响使用
+                type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+                startValue: 0, // 从头开始。
+                endValue: 4, // 一次性展示5个。。
+            }
+        ],
+        xAxis: [{
+            show: false,
+        }],
+        yAxis: [{
+            axisTick: 'none',
+            axisLine: 'none',
+            offset: '12',
+            axisLabel: {
+                textStyle: {
+                    color: '#ffffff',
+                    fontSize: '12',
+                }
+            },
+            data: Ydata,
+        },
+        {
+            axisTick: 'none',
+            axisLine: 'none',
+            axisLabel: {
+                textStyle: {
+                    color: '#ffffff',
+                    fontSize: '12',
+                }
+            },
+            //y
+            data: ['5', '4', '3', '2', '1']
+        },
+        // {
+        //     name: '滚动TOP 10',
+        //     nameGap: '50',
+        //     nameTextStyle: {
+        //         color: '#ffffff',
+        //         fontSize: '16',
+        //     },
+        //     axisLine: {
+        //         lineStyle: {
+        //             color: 'rgba(0,0,0,0)'
+        //         }
+        //     },
+        //     data: [],
+        // }
+    ],
+        series: [{
+            name: '条',
+            type: 'bar',
+            yAxisIndex: 0,
+            data: Xdata,
+            label: {
+                normal: {
+                    show: true,
+                    position: 'right',
+                    textStyle: {
+                        color: '#ffffff',
+                        fontSize: '16',
+                    }
+                }
+            },
+            barWidth: 12,
+            itemStyle: {
+                normal: {
+                    color: function (params) {
+                        var num = myColor.length;
+                        return myColor[params.dataIndex % num]
+                    },
+                }
+            },
+            z: 2
+        }, {
+            name: '白框',
+            type: 'bar',
+            yAxisIndex: 1,
+            barGap: '-100%',
+            data: [99, 99.5, 99.5, 99.5, 99.5],
+            barWidth: 20,
+            itemStyle: {
+                normal: {
+                    color: 'transparent',
+                    barBorderRadius: 5,
+                }
+            },
+            z: 1
+        }, 
+        // {
+        //     name: '外框',
+        //     type: 'bar',
+        //     yAxisIndex: 2,
+        //     barGap: '-100%',
+        //     data: [100, 100, 100, 100, 100],
+        //     barWidth: 24,
+        //     itemStyle: {
+        //         normal: {
+        //             color: function (params) {
+        //                 var num = myColor.length;
+        //                 return myColor[params.dataIndex % num]
+        //             },
+        //             barBorderRadius: 5,
+        //         }
+        //     },
+        //     z: 0
+        // },
+            // {
+            //     name: '外圆',
+            //     type: 'scatter',
+            //     hoverAnimation: false,
+            //     data: [0, 0, 0, 0, 0],
+            //     yAxisIndex: 2,
+            //     symbolSize: 35,
+            //     itemStyle: {
+            //         normal: {
+            //             color: function(params) {
+            //                 var num = myColor.length;
+            //                 return myColor[params.dataIndex % num]
+            //             },
+            //             opacity: 1,
+            //         }
+            //     },
+            //     z: 2
+            // }
+        ]
+    };
+    myChart.setOption(option)
 
 })
 </script>

src/views/DataVisualization/home/components/wzsyqkpm.vue

@@ -36,11 +36,11 @@ onMounted(() => {
         backgroundColor: '',
         color: ['#0C65F6', '#00FFA6', '#F4DF58'],
         grid: {
-            left: '25%',
-            right: '34%',
-            width:'60%',
-            height:'50%',
-            bottom: '10%',
+            left: '20%',
+            // right: '35%',
+            width:'70%',
+            height:'46%',
+            bottom: '18%',
             // top: '30%',
         },
         // legend: {
@@ -101,12 +101,15 @@ onMounted(() => {
                     color: 'rgba(255,255,255,0.45)',
                 },
             },
-            textStyle:{
-                fontSize:12
-            },
+            // textStyle:{
+            //     fontSize:12
+            // },
             axisLabel: {
                 color: '#fff',
-                fontSize:12,
+                interval:0,
+                rotate:45
+                // fontSize:12,
+                // padding:0
             },
             axisTick: {
                 show: false,

src/views/DataVisualization/home/index.vue

@@ -70,7 +70,7 @@ import Wzsyqkpm from '@/views/DataVisualization/home/components/wzsyqkpm.vue'
 }
 .container .top {
   width: 100%;
-  height: 80px;
+  height: 64px;
   text-align: center;
   font-size: 24px;
   font-weight: 700;
@@ -125,7 +125,7 @@ import Wzsyqkpm from '@/views/DataVisualization/home/components/wzsyqkpm.vue'
 }
 .container .content .left {
   /* background: skyblue; */
-  width: 28%;
+  width: 30%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -142,7 +142,7 @@ import Wzsyqkpm from '@/views/DataVisualization/home/components/wzsyqkpm.vue'
 
 .container .content .right {
   /* background: skyblue; */
-  width: 28%;
+  width: 30%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -156,7 +156,7 @@ import Wzsyqkpm from '@/views/DataVisualization/home/components/wzsyqkpm.vue'
 }
 
 .container .content .center {
-  width: 40%;
+  width: 35%;
   height: 100%;
 }
 </style>