home_echart

src/views/HomeView.vue

@@ -40,9 +40,27 @@
           :boxHeight="menus.main[0].height"
           :boxBackground="menus.main[0].background"
         >
-            <div class="bar-btn">1</div>
-            <div class="bar-content">1</div
-          >
+          <div class="bar-btn">
+            <div
+              class="btn-style"
+              v-for="item in buttonData"
+              :key="item"
+              @click="clickEvent(item)"
+              :class="{ 'button-selected': item === btnChecked }"
+            >
+              {{ item }}
+            </div>
+          </div>
+          <div class="bar-content">
+            <BarChart
+              class="bar"
+              :categoryData="categoryData"
+              :soilValueData="soil"
+              :waterValueData="water"
+              :forestryValueData="forestry"
+              :sourceType="btnChecked"
+            />
+          </div>
         </MenuCard>
       </div>
     </div>
@@ -74,6 +92,7 @@ import MapHolder from "@/components/map/MapHolder.vue";
 import Header from "@/components/layout/Header.vue";
 import MenuCard from "@/components/layout/MenuCard";
 import NewSelect from "@/components/common/NewSelect.vue";
+import BarChart from "@/components/chart/BarChart.vue";
 import { street, soilData, waterData, forestryData } from "@/config/common";
 export default {
   name: "HomeView",
@@ -82,6 +101,7 @@ export default {
     Header,
     MenuCard,
     NewSelect,
+    BarChart,
   },
   data() {
     return {
@@ -240,12 +260,33 @@ export default {
     .bar-btn {
       width: 100%;
       height: 10%;
-      background: red;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .btn-style {
+        width: 65px;
+        height: 35px;
+        background: url("../assets/home/btn_unselected.png") no-repeat center;
+        margin-bottom: 2px;
+        cursor: pointer;
+        border-radius: 3px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+      }
+      .button-selected {
+        background: url("../assets/home/btn_selected.png") no-repeat center;
+      }
     }
     .bar-content {
       width: 100%;
       height: 90%;
-      background: yellowgreen;
+      background: rgba(100,100,100,0.3);
+      .bar {
+        width: 95%;
+        height: 98%;
+      }
     }
   }
 }