1

src/view/dialog/echarts/tabLine.vue

@@ -39,7 +39,7 @@ const getOption = () => {
       formatter: "{b0}日<br />{a1}:{c1}",
     },
     legend: {
-      data: ["骑行次数"],
+      data: ["乘坐人次"],
       top: "5%",
       right: "center",
       textStyle: {
@@ -70,7 +70,7 @@ const getOption = () => {
     yAxis: [
       {
         type: "value",
-        name: "骑行次数/次",
+        name: "乘坐人次",
         splitLine: {
           show: true,
           lineStyle: {
@@ -121,7 +121,7 @@ const getOption = () => {
       },
       {
         yAxisIndex: 0,
-        name: "骑行次数",
+        name: "乘坐人次",
         type: "line",
         symbol: "emptyCircle",
         symbolSize: 10,

src/view/echarts_sy/pie.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 260px"></div>
+  <div ref="chart" style="width: 50%; height: 260px"></div>
 </template>
 
 <script setup>
@@ -172,51 +172,51 @@ const getOption1 = () => {
 const getOption = () => {
   data.option = {
     //你的代码
-    legend: [
+    // legend: [
-      {
+    //   {
-        orient: "vertical",
+    //     orient: "vertical",
-        right: "5%",
+    //     right: "10%",
-        top: "center",
+    //     top: "15%",
-        type: "scroll",
+    //     type: "scroll",
-        height: "80%",
+    //     height: "80%",
-        itemWidth: 20, // 可以设置图例标记的宽度
+    //     itemWidth: 20, // 可以设置图例标记的宽度
-        itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
+    //     itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
-        itemGap: 20,
+    //     itemGap: 20,
-        // itemStyle: {
+    //     // itemStyle: {
-        //   borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
+    //     //   borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
-        //   borderWidth: 10, // 图例边框宽度
+    //     //   borderWidth: 10, // 图例边框宽度
-        //   borderRadius: 20,
+    //     //   borderRadius: 20,
+    //     // },
+    //     pageTextStyle: {
+    //       color: "#ffffff",
+    //       fontSize: 14,
+    //       padding: 10,
     //     },
-        pageTextStyle: {
+    //     textStyle: {
-          color: "#ffffff",
+    //       color: "#ffffff",
-          fontSize: 14,
+    //       fontSize: 14,
-          padding: 10,
+    //       padding: 10,
-        },
+    //       rich: {
-        textStyle: {
+    //         name: {
-          color: "#ffffff",
+    //           width: 80,
-          fontSize: 14,
+    //           fontSize: 16,
-          padding: 10,
+    //         },
-          rich: {
+    //       },
-            name: {
+    //     },
-              width: 80,
+    //     data: data.list,
-              fontSize: 16,
-            },
-          },
-        },
-        data: data.list,
 
-        //格式化图例文本
+    //     //格式化图例文本
-        formatter: function (name) {
+    //     formatter: function (name) {
-          var target;
+    //       var target;
-          for (var i = 0, l = data.list.length; i < l; i++) {
+    //       for (var i = 0, l = data.list.length; i < l; i++) {
-            if (data.list[i].name == name) {
+    //         if (data.list[i].name == name) {
-              target = data.list[i].value;
+    //           target = data.list[i].value;
-            }
+    //         }
-          }
+    //       }
-            return `${name}：${target} 人`;
+    //         return `${name}：${target} 人`;
-        },
+    //     },
-      },
+    //   },
-    ],
+    // ],
     tooltip: {
       trigger: "item",
 
@@ -234,7 +234,7 @@ const getOption = () => {
         type: "pie",
         roseType: "radius",
         radius: ["15%", "90%"],
-        center: ["35%", "50%"],
+        center: ["45%", "40%"],
         label: {
           position: "inside",
           formatter(item) {
@@ -276,7 +276,7 @@ const getOption = () => {
         type: "pie",
         roseType: "radius",
         radius: ["15%", "92%"],
-        center: ["35%", "50%"],
+        center: ["45%", "40%"],
         label: {
           show: false,
         },

src/view/sy.vue

@@ -230,7 +230,22 @@
           </div>
         </div>
         <ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
+        <div class="bt">
           <ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie>
+          <div
+            class="btList"
+            ref="mainRef"
+            @mouseenter="stopAutoScroll"
+            @mouseleave="startAutoScroll"
+          >
+            <div class="btList_item" v-for="(item, index) in btList">
+              <div class="btList_item_color" :style="bt(index)"></div>
+              <div class="btList_item_value">
+                {{ item.name }}：{{ item.value }}
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="table">
           <div class="table_choose">
             <div
@@ -571,7 +586,7 @@
     >
       <template #dd="{ currentCol, currentData }">
         <div>
-          {{currentData.dd.substring(0,currentData.dd.indexOf("."))}}
+          {{ currentData.dd.substring(0, currentData.dd.indexOf(".")) }}
         </div>
       </template>
     </DialogTab>
@@ -1053,48 +1068,6 @@ const data = reactive({
   ],
 });
 
-// const tableData = ref([
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: true,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: true,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: true,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: false,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: false,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: false,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: false,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: false,
-//   },
-// ]);
 const jysyList = ref([
   {
     title: "县镇",
@@ -1232,9 +1205,25 @@ const getData = async () => {
           "nl91100",
           "nl100",
         ];
+        const ageBt = [
+          "nl110",
+          "nl1120",
+          "nl2130",
+          "nl3140",
+          "nl4150",
+          "nl5160",
+          "nl6170",
+          "nl7180",
+          "nl8190",
+          "nl91100",
+          "nl100",
+        ];
         ageGroupKeys.forEach((key) => {
           data.ageGroup[key] = res.data.rksj[key];
         });
+        ageBt.forEach((key, index) => {
+          btList.value[index].value = res.data.rksj[key];
+        });
       }
       // 年龄比例
       const ageRatioKeys = [
@@ -1334,9 +1323,6 @@ const qyfyList = reactive([
     img: qyfw4,
   },
 ]);
-onBeforeMount(async () => {
-  getData();
-});
 
 // 交通事业弹框
 const showEc = (val) => {
@@ -1352,10 +1338,10 @@ const showEc = (val) => {
       break;
     case "电动单车":
       http.get("/api/ggfwyth/ddcList").then((res) => {
-        if(res.code == 200){
+        if (res.code == 200) {
-          dataEc.list1=res.data.qxcs;
+          dataEc.list1 = res.data.qxcs;
-          dataEc.list2=res.data.qxsc;
+          dataEc.list2 = res.data.qxsc;
-          dataEc.times=res.data.times;
+          dataEc.times = res.data.times;
           dialogShowEc.value = true;
         }
       });
@@ -1418,8 +1404,8 @@ const showTab = (val) => {
       getTableTab("/api/ggfwyth/lyzlcskList", pagination.currentPage);
       http.get(`/api/ggfwyth/lckll`).then((res) => {
         if (res.code == 200) {
-          dataTab.list1=res.data.data;
+          dataTab.list1 = res.data.data;
-          dataTab.times=res.data.times;
+          dataTab.times = res.data.times;
         }
       });
       break;
@@ -1427,6 +1413,107 @@ const showTab = (val) => {
       break;
   }
 };
+//自动滚动(饼图)
+//扇形图颜色数据
+const colorList = [
+  { color2: "rgba(90,255,223,1)" },
+  { color2: "rgba(115,255,145,1)" },
+  { color2: "rgba(153,255,179,1)" },
+  { color2: "rgba(193,255,138,1)" },
+  { color2: "rgba(255,207,74,1)" },
+  { color2: "rgba(254,178,128,1)" },
+  { color2: "rgba(151,176,255,1)" },
+  { color2: "rgba(164,151,255,1)" },
+  { color2: "rgba(159,110,254,1)" },
+  { color2: "rgba(180,143,241,1)" },
+  { color2: "rgba(76,174,254,1)" },
+];
+const bt = computed(() => {
+  return function (index) {
+    let str = `--i:${colorList[index].color2}`;
+    return str;
+  };
+});
+const btList = ref([
+  {
+    name: "1-10岁人口总数",
+    value: "",
+  },
+  {
+    name: "11-20岁人口总数",
+    value: "",
+  },
+  {
+    name: "21-30岁人口总数",
+    value: "",
+  },
+  {
+    name: "31-40岁人口总数",
+    value: "",
+  },
+  {
+    name: "41-50岁人口总数",
+    value: "",
+  },
+  {
+    name: "51-60岁人口总数",
+    value: "",
+  },
+  {
+    name: "61-70岁人口总数",
+    value: "",
+  },
+  {
+    name: "71-80岁人口总数",
+    value: "",
+  },
+  {
+    name: "81-90岁人口总数",
+    value: "",
+  },
+  {
+    name: "91-100岁人口总数",
+    value: "",
+  },
+  {
+    name: "100岁以上人口总数",
+    value: "",
+  },
+]);
+const mainRef = ref(null);
+let isAutoScrolling = true;
+
+const stopAutoScroll = () => {
+  isAutoScrolling = false;
+};
+
+const startAutoScroll = () => {
+  isAutoScrolling = true;
+  autoScroll();
+};
+
+const autoScroll = () => {
+  if (!isAutoScrolling) return;
+
+  const mainEl = mainRef.value;
+  mainEl.scrollTop += 1; // 每次滚动的距离
+
+  if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
+    setTimeout(() => {
+      mainEl.scrollTo({ top: 0, behavior: "smooth" });
+      setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
+    }, 1000); // 暂停1秒后开始快速滚回顶部
+  } else {
+    requestAnimationFrame(autoScroll);
+  }
+};
+onBeforeMount(async () => {
+  getData();
+  setTimeout(()=>{
+startAutoScroll();
+  },1000)
+  
+});
 </script>
 
 <style lang="scss" scoped>
@@ -2356,7 +2443,36 @@ const showTab = (val) => {
     }
   }
 }
+//饼图list
+.bt {
+  display: flex;
+  align-items: center;
+}
+.btList {
+  width: 45%;
+  height: 200px;
+  overflow-y: auto;
+  .btList_item {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 5px;
 
+    .btList_item_color {
+      width: 30px;
+      height: 10px;
+      background-color: var(--i);
+      border-radius: 3px;
+    }
+    .btList_item_value {
+      font-size: 18px;
+      margin-top: 5px;
+      color: #ffffff;
+    }
+  }
+}
+.btList::-webkit-scrollbar {
+  display: none;
+}
 .table {
   width: 94%;
   margin-left: 5px;