大屏

src/views/index/kshData.vue

 <!--
  * @Author: your name
  * @Date: 2021-07-11 15:04:34
- * @LastEditTime: 2021-07-12 16:29:03
+ * @LastEditTime: 2021-07-12 17:51:25
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\views\index\kshData.vue
@@ -56,7 +56,7 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item prop="name">
-                  <el-input v-model="form1.id" disabled></el-input>
+                  <el-input v-model="form1.id"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
@@ -69,18 +69,18 @@
               </el-col>
             </el-row>
             <el-form-item prop="name">
-              <el-input
+              <el-select
                 v-model="form1.name"
                 class="w200"
                 placeholder="案件分类"
-              ></el-input>
+              ></el-select>
             </el-form-item>
             <el-form-item prop="name">
-              <el-input
+              <el-select
                 v-model="form1.aa"
                 class="w200"
                 placeholder="行政区划"
-              ></el-input>
+              ></el-select>
             </el-form-item>
             <el-form-item prop="name">
               <el-button type="primary" class="search">查询</el-button>
@@ -149,7 +149,7 @@
             </el-date-picker>
           </el-form-item>
           <el-form-item>
-            <el-input v-model="form1.aa" class="w200"></el-input>
+            <el-select v-model="form1.aa" class="w200"></el-select>
           </el-form-item>
           <el-form-item prop="name">
             <el-button type="primary" class="search">查询</el-button>
@@ -750,7 +750,7 @@ export default {
           show: false,
         },
         grid: {
-          left: "6%",
+          left: "5%",
           right: "10%",
           bottom: "3%",
           containLabel: true,
@@ -791,7 +791,7 @@ export default {
             type: "bar",
             barWidth: 6, // 柱子宽度
             itemStyle: {
-              barBorderRadius: [0,10,10,0],
+              barBorderRadius: [0, 10, 10, 0],
               color: (params) => {
                 return colorList[params.dataIndex];
               },
@@ -834,6 +834,7 @@ export default {
           itemGap: 17,
         },
         tooltip: {
+          data: ["发案数", "破案数"],
           trigger: "axis",
           show: true,
           axisPointer: {
@@ -843,7 +844,7 @@ export default {
         },
         grid: {
           left: "6%",
-          right: "20%",
+          right: "29%",
           bottom: "3%",
           top: "20%",
           containLabel: true,
@@ -883,9 +884,9 @@ export default {
             name: "发案数",
             type: "bar",
             barWidth: 6, // 柱子宽度
-            barGap: "95%",
+            barGap: "130%",
             itemStyle: {
-              barBorderRadius: [0,10,10,0],
+              barBorderRadius: [0, 10, 10, 0],
               color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                 {
                   offset: 0,
@@ -899,13 +900,9 @@ export default {
             },
             label: {
               show: true,
-              position: [280, 3], // 位置
-              color: "#B0BAD3",
+              position: "right", // 位置
+              color: "#FDCC00",
               fontSize: 12,
-              formatter: function (params) {
-                console.log(params.dataIndex);
-                return `${data1[params.dataIndex]}/${data2[params.dataIndex]}`;
-              }, // 这里是数据展示的时候显示的数据
             }, // 柱子上方的数值
             data: data1,
           },
@@ -913,8 +910,14 @@ export default {
             name: "破案数",
             type: "bar",
             barWidth: 6, // 柱子宽度
+            label: {
+              show: true,
+              position: "right", // 位置
+              color: "#2AD8FF",
+              fontSize: 12,
+            }, // 柱子上方的数值
             itemStyle: {
-              barBorderRadius: [0,10,10,0],
+              barBorderRadius: [0, 10, 10, 0],
               color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                 {
                   offset: 0,
@@ -1094,7 +1097,7 @@ export default {
             type: "bar",
             barWidth: 6, // 柱子宽度
             itemStyle: {
-              barBorderRadius: [0,10,10,0],
+              barBorderRadius: [0, 10, 10, 0],
               color: (params) => {
                 return colorList[params.dataIndex];
               },
@@ -1340,14 +1343,15 @@ export default {
     }
   }
   .content /deep/ {
-    .el-input__inner,.el-range-input{
+    .el-input__inner,
+    .el-range-input {
       color: #fff;
     }
     height: calc(100% - 90px);
     width: 100%;
     .w200 {
       width: 235px;
-      > .el-input__inner {
+      .el-input__inner {
         width: 235px !important;
       }
     }
@@ -1425,6 +1429,7 @@ export default {
       }
     }
     .el-form-item__content {
+      // height: 40px;
       margin-top: 20px;
       margin-left: 70px !important;
       position: relative;