From 422807e150f2391de4bcdf67bc3fb978ccb89073 Mon Sep 17 00:00:00 2001
From: lx <826276471@qq.com>
Date: Fri, 25 Apr 2025 09:07:46 +0800
Subject: [PATCH] feat

---
 src/views/land/components/landPlan.vue | 226 +++++++++++++------------
 1 file changed, 117 insertions(+), 109 deletions(-)

diff --git a/src/views/land/components/landPlan.vue b/src/views/land/components/landPlan.vue
index 0918cba..ab861e5 100644
--- a/src/views/land/components/landPlan.vue
+++ b/src/views/land/components/landPlan.vue
@@ -1,114 +1,122 @@
 <template>
-  <div class="demo roll-list-land-plan" style="height: 90%">
-    <div class="list-item-header item-warp" :style="{ flex: listKeys.length }">
-      <template v-for="(h, indexh) in listKeys" :key="indexh">
-        <div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
-      </template>
-    </div>
-    <vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="list">
-      <div v-for="(item, index) in list" :key="index" class="list-item">
-        <div class="list-item-content">
-          <div class="list-item-boday item-warp" :style="{ flex: listKeys.length }">
-            <template v-for="(b, indexb) in listKeys" :key="indexb">
-              <div class="item-td" :class="{ 'zebra-b': (index + 1) % 2 == 0 }" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">
-                {{ item[b] }}
-              </div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </vue3ScrollSeamless>
-  </div>
-  <!-- </div> -->
+  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
 </template>
-
 <script setup>
-import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
-import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
-const props = defineProps({
-  //   items: {
-  //     type: Array,
-  //     default: () => [],
-  //   },
+import { reactive } from 'vue';
+
+const state = reactive({
+  option: {
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
+      top: '10%',
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: (data) => {
+        const params = data[0];
+        let str = `<div class="custom-echarts-tips">
+          <span>${params.name}</span><br/>
+          <span>${params.marker} ${params.data} 万亩</span>
+        </div>`;
+        return str;
+      },
+    },
+    barStyle: {
+      barWidth: 15,
+      itemStyle: {
+        borderRadius: [8, 8, 0, 0], // 设置柱子的圆角半径
+      },
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          { offset: 0, color: '#35D0C0' },
+          { offset: 1, color: '#35D0C0' },
+        ],
+        global: false,
+      },
+    },
+    xAxis: {
+      type: 'value',
+      // name: '面积',
+      // splitLine: {
+      //   show: false,
+      //   lineStyle: {
+      //     type: 'dashed',
+      //     color: '',
+      //     width: 1,
+      //   },
+      // },
+      axisTick: {
+        show: false,
+        alignWithLabel: false,
+        interval: 'auto',
+        inside: false,
+        length: 5,
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+          color: 'rgba(28, 158, 222, 1)',
+        },
+      },
+      // axisLine: {
+      //   show: true,
+      //   lineStyle: {
+      //     type: 'solid',
+      //     width: 1,
+      //     // color: '#000',
+      //   },
+      // },
+      // axisLabel: {
+      //   margin: 8,
+      //   interval: 'auto',
+      //   rotate: 0,
+      //   fontSize: 10,
+      //   color: '#fff',
+      // },
+    },
+    yAxis: {
+      type: 'category',
+      // name: '面积(万亩)',
+    },
+    // label: {
+    //   show: true,
+    //   position: 'insideTop',
+    //   distance: -10,
+    //   formatter: () => {
+    //     return `{z|}{a|}`;
+    //   },
+    //   rich: {
+    //     a: {
+    //       widht: 18,
+    //       height: 18,
+    //       backgroundColor: {
+    //         image:
+    //           'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKUSURBVHgBpVPPaxNBFH4zszubTTY2sSRSrFCC1dIepChoD9JgKwiem6s3vYl4lyb/QS/+wJPnBPQ/0LQ91KsHe5BaWo3Yupqk6WZ3Z3Z2xt2tKUUNHnww8OB775tv3nwP4D8DDQOqqoqh9iuPjlpeVkkxQurvBAoiREGlUcHbpUWcHaWkoGUivAWOPyUt5iiYgbABS/IkCTp5YxMAF1rTui36Rt70acipFmOEcqE8n+vaWZbf74jnl++KAQlOLlcKNZuA6X7JcPw9K2uSPOd68bY1NXtJL0zGeWiO5h3fsbxxk5abNRIrPlawVK8TmGtRx89ZJIVy93NzC9et0sMU6JMxzkF+XXc/1Fbab1+bmuq2RNcZ39jg9UojTBTkSx3spIu6oaHMLevC9E3r4tNBcxwU8NhCeurZg9y1GwRYJucX9e2lRYwi5TiW8nmEYe6FusIsfWfkyjIMiauZ0j2PozRJ92lxi2E1mAGcB8jwjoakQS1EZ4cRxBg1McUMkzNaFqEBgbeTTWYhlZChUs4wghCUw5gh43xnIv75mACBKkxkpKFbARiYtUNnbRhBW7hrUvicUCoK73flsQK7uSlZCgXI892X7uZjEU3992auwr1Xh++eEKr3fY8E9sx8YiiSyHlRhrFvPQT0NOyGP3puwDfO0XwuYseRf9mnoFtfOVx9tM6/fGShOPRhxy/ndsWbWvPI3rGRKtDAkWspQM8MkUpHtk6L0NIlOkAIpRhnro8Mo38Kep493guaUA3j5ydPiCpUAyrS3toMbEFcQke6ppWxteDAlszYV9L7zk9Bh4mWmzTXqlLB0Tr8uY3RTpQjWxcK09gx9hLcYm1l2/OyXF6VVVSViY0RKPhHHJGrpHTo2v8EGgI2uB3r9kQAAAAASUVORK5CYII=',
+    //       },
+    //     },
+    //   },
+    // },
+  },
+  data: [
+    { value: 20, name: '耿马镇' },
+    { value: 15, name: '勐撒镇' },
+    { value: 12, name: '勐永镇' },
+    { value: 16, name: '孟定镇' },
+    { value: 8, name: '勐简乡' },
+    { value: 12, name: '贺派乡' },
+    { value: 10, name: '四排山乡' },
+    { value: 9, name: '芒洪乡' },
+    { value: 8, name: '大兴乡' },
+  ],
 });
-
-let list = reactive([
-  { title: '耿马镇', area: '540', chg: '0.5%' },
-  { title: '勐撒镇', area: '1210', chg: '0.7%' },
-  { title: '孟定镇', area: '188.3', chg: '-0.8%' },
-  { title: '孟简镇', area: '98.7', chg: '1.2%' },
-  { title: '孟永镇', area: '165.5', chg: '0.9%' },
-]);
-
-const listKeys = reactive(['title', 'area', 'chg']);
-const listKeysHeader = reactive({
-  title: '乡/镇',
-  area: '面积',
-  chg: '涨跌幅',
-});
-
-const classOptions = {
-  singleHeight: 48,
-};
 </script>
-
-<style scoped lang="scss">
-.roll-list-land-plan {
-  margin-top: 8px;
-  .scroll-wrap {
-    height: 80%;
-    width: 100%;
-    margin: 4px auto;
-    overflow: hidden;
-  }
-  .list-item-header {
-    background: #144482;
-    font-size: 10px;
-    width: 100%;
-    .item-td {
-      padding: 8px 6px;
-    }
-  }
-  .list-item-boday {
-    background: transparent;
-    width: 100%;
-    .item-td {
-      padding: 4px 6px;
-      &.td-title {
-        color: #6beff9 !important;
-      }
-      &.zebra-b {
-        background: #051225 !important;
-      }
-    }
-  }
-  .item-warp {
-    display: inline-flex;
-    justify-content: space-around;
-    .item-td {
-      display: inline-block;
-      vertical-align: middle;
-
-      text-align: center;
-      color: #fff;
-    }
-  }
-  .list-item {
-    // border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
-    line-height: 18px;
-
-    .list-item-content {
-      display: inline-flex;
-      width: 100%;
-      justify-content: space-around;
-      position: relative;
-    }
-  }
-}
-.demo {
-  //   display: flex;
-  //   align-items: center;
-  //   justify-content: center;
-  //   margin-top: 10px;
-}
-</style>