src/components/custom-echart-column-line/index.vue

@@ -124,8 +124,80 @@ export default {
       if (props.option) {
         Object.assign(option, cloneDeep(props.option));
       }
-      option.series[0].data = yDataColumn.value;
+      option.series = [
-      option.series[1].data = yDataLine.value;
+        {
+          name: '总产量（吨）',
+          type: 'bar',
+          data: yDataColumn.value,
+          barWidth: '15px',
+          barGap: '50%',
+          itemStyle: {
+            normal: {
+              borderColor: '#3681FF',
+              //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              //     {
+              //       offset: 0,
+              //       color: 'rgba(15, 51, 82, 1)',
+              //     },
+
+              //     {
+              //       offset: 1,
+              //       color: 'rgba(0, 168, 255, 1)',
+              //     },
+              //   ]),
+            },
+          },
+          label: {
+            show: false,
+            position: 'top',
+            fontSize: 12,
+            color: '#F5F5F5',
+            offset: [0, -5],
+            formatter: '{c}',
+          },
+        },
+        {
+          name: '平均产量（吨）',
+          type: 'line',
+          yAxisIndex: 1,
+          showSymbol: true,
+          symbolSize: 8,
+          smooth: true,
+          symbol: 'circle',
+          lineStyle: {
+            normal: {
+              color: '#02D6B0',
+            },
+          },
+          itemStyle: {
+            color: '#02D6B0',
+            borderColor: '#fff',
+            borderWidth: 1,
+          },
+          //   areaStyle: {
+          //     normal: {
+          //       color: new echarts.graphic.LinearGradient(
+          //         0,
+          //         0,
+          //         0,
+          //         1,
+          //         [
+          //           {
+          //             offset: 0,
+          //             color: 'rgba(0, 255, 246, 0)',
+          //           },
+          //           {
+          //             offset: 1,
+          //             color: 'rgba(0, 255, 246, 0.5)',
+          //           },
+          //         ],
+          //         false
+          //       ),
+          //     },
+          //   },
+          data: yDataLine.value, // 折线图的数据
+        },
+      ];
       option.xAxis.data = xData.value;
       setOptions(option);
       //   startAutoPlay({

src/components/custom-echart-hyaline-cake/index.vue

@@ -27,14 +27,7 @@ export default {
     },
     option: {
       type: Object,
-      default: () => ({
+      default: () => ({}),
-        k: 1,
-        opacity: '0,6',
-        itemGap: 0.2,
-        itemHeight: 120,
-        autoItemHeight: 0,
-        legendSuffix: '',
-      }),
     },
     type: {
       type: String,
@@ -58,15 +51,18 @@ export default {
     const chartRef = ref(null);
     const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
     const option = ref({});
+    const itemHeight = ref(120);
+    // let colors = ['#07daf2', '#64de8a', '#ecc23c', '#ffdb5c', '#ff9f7f', '#9fe6b8', '#67e0e3', '#32c5e9', '#fb7293', '#9A60B4', '#ea7ccc'];
+
     watchEffect(() => {
       props.chartData && initCharts();
     });
 
     function initCharts() {
       if (props.option) {
-        option.value = Object.assign(option, cloneDeep(props.option));
+        Object.assign(option, cloneDeep(props.option));
       }
-      option.value = getPie3D(props.chartData, props.option.opacity);
+      option.value = getPie3D(props.chartData, 0.5);
       setOptions(option.value);
     }
 
@@ -79,8 +75,8 @@ export default {
         isSelected = false;
       }
       k = typeof k !== 'undefined' ? k : 1 / 3;
-      const offsetX = Math.cos(midRadian) * props.option.itemGap;
+      const offsetX = Math.cos(midRadian) * 0.2;
-      const offsetY = Math.sin(midRadian) * props.option.itemGap;
+      const offsetY = Math.sin(midRadian) * 0.2;
       const hoverRate = 1;
       return {
         u: {
@@ -131,7 +127,7 @@ export default {
       let startValue = 0;
       let endValue = 0;
       const legendData = [];
-      const k = props.option.k ?? 1;
+      const k = 1;
       for (let i = 0; i < pieData.length; i += 1) {
         sumValue += pieData[i].value;
 
@@ -146,7 +142,7 @@ export default {
 
           itemStyle: {
             // color: colors[i], // 自定义颜色
-            opacity: props.option.opacity,
+            opacity: '0.6',
             borderRadius: 300,
             borderColor: '#fff',
             borderWidth: 0,
@@ -175,112 +171,106 @@ export default {
           false,
           false,
           k,
-          props.option.autoItemHeight > 0 ? props.option.autoItemHeight * series[i].pieData.value : props.option.itemHeight
+          itemHeight.value
         );
         startValue = endValue;
         legendData.push(series[i].name);
       }
-      const option = Object.assign(
+      const option = {
-        {
+        tooltip: {
-          tooltip: {
+          position: function (point, params, dom, rect, size) {
-            backgroundColor: 'rgba(18, 55, 85, 0.8);',
+            var x = point[0];
-            borderColor: '#35d0c0',
+            var y = point[1];
-            color: '#fff',
+            var viewWidth = size.viewSize[0];
-            position: function (point, params, dom, rect, size) {
+            var viewHeight = size.viewSize[1];
-              var x = point[0];
+            var boxWidth = size.contentSize[0];
-              var y = point[1];
+            var boxHeight = size.contentSize[1];
-              var viewWidth = size.viewSize[0];
+            // 判断 tooltip 位置，调整其位置使其不会超出图表边界
-              var viewHeight = size.viewSize[1];
+            if (x + boxWidth > viewWidth) {
-              var boxWidth = size.contentSize[0];
+              x = x - boxWidth;
-              var boxHeight = size.contentSize[1];
+            }
-              // 判断 tooltip 位置，调整其位置使其不会超出图表边界
+            if (y + boxHeight > viewHeight) {
-              if (x + boxWidth > viewWidth) {
+              y = y - boxHeight;
-                x = x - boxWidth;
+            }
-              }
+            // 保证 tooltip 始终在图表内部
-              if (y + boxHeight > viewHeight) {
+            if (x < 0) {
-                y = y - boxHeight;
+              x = 0;
-              }
+            }
-              // 保证 tooltip 始终在图表内部
+            if (y < 0) {
-              if (x < 0) {
+              y = 0;
-                x = 0;
+            }
-              }
-              if (y < 0) {
-                y = 0;
-              }
 
-              return [x, y];
+            return [x, y];
-            },
+          },
-            formatter: (params) => {
+          formatter: (params) => {
-              if (params.seriesName !== 'mouseoutSeries') {
+            if (params.seriesName !== 'mouseoutSeries') {
-                return `
+              return `
-                <span style="color:#FFF">
+               ${params.seriesName}<br/>
-                  ${params.seriesName}<br/>
+                  <span style="display:inline-block;
-                    <span style="display:inline-block;
+                  margin-right:5px;
-                    margin-right:5px;
+                  border-radius:10px;
-                    border-radius:10px;
+                  width:10px;
-                    width:10px;
+                  height:10px;
-                    height:10px;
+                  background-color:${params.color};"></span>
-                    background-color:${params.color};"></span>
+                  ${option.series[params.seriesIndex].pieData.value}
-                    ${option.series[params.seriesIndex].pieData.value}
-                  </span>
                   `;
-              }
+            }
-              return '';
+            return '';
-            },
           },
-          xAxis3D: {
-            min: -1,
-            max: 1,
-          },
-          yAxis3D: {
-            min: -1,
-            max: 1,
-          },
-          zAxis3D: {
-            min: -1,
-            max: 1,
-          },
-          grid3D: {
-            show: false,
-            boxHeight: 5,
-            top: '0',
-            left: '-20%',
-            viewControl: {
-              //3d效果可以放大、旋转等，请自己去查看官方配置
-              alpha: 60, //角度(这个很重要 调节角度的)
-              distance: 240, //调整视角到主体的距离，类似调整zoom(这是整体大小)
-              rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
-              zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
-              panSensitivity: 10, //设置平移灵敏度，0无法平移
-              autoRotate: true, //自动旋转
-              autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
-            },
-          },
-          legend: {
-            show: true,
-            right: '5%',
-            top: '25%',
-            orient: 'vertical',
-            icon: 'circle',
-            itemHeight: 12,
-            itemWidth: 12,
-            itemGap: 10,
-            textStyle: {
-              color: '#fff',
-              fontSize: 14,
-              fontWeight: '400',
-            },
-            formatter: (name) => {
-              if (props.chartData.length) {
-                const item = props.chartData.filter((item) => item.name === name)[0];
-                return `  ${name}      ${item.value}${props.option.legendSuffix ?? ''}`;
-              }
-            },
-          },
-          series,
         },
-        props.option
+        xAxis3D: {
-      );
+          min: -1,
+          max: 1.5,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1.5,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1.5,
+        },
+        itemGap: 20,
+        grid3D: {
+          itemGap: 20,
+          show: false,
+          boxHeight: 5,
+          top: '0',
+          left: '-20%',
+          viewControl: {
+            //3d效果可以放大、旋转等，请自己去查看官方配置
+            alpha: 60, //角度(这个很重要 调节角度的)
+            distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+            rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
+            zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
+            panSensitivity: 10, //设置平移灵敏度，0无法平移
+            autoRotate: true, //自动旋转
+            autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
+          },
+        },
+        legend: {
+          show: true,
+          right: '5%',
+          top: '25%',
+          orient: 'vertical',
+          icon: 'circle',
+          itemHeight: 12,
+          itemWidth: 12,
+          itemGap: 10,
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            fontWeight: '400',
+          },
+          formatter: (name) => {
+            if (props.chartData.length) {
+              const item = props.chartData.filter((item) => item.name === name)[0];
+              return `  ${name}      ${item.value}万亩`;
+            }
+          },
+        },
+        series,
+      };
       return option;
     }
     function onClick(params) {

src/views/entities/components/benefitCharts.vue

@@ -1,67 +1,194 @@
 <template>
-  <section class="price_container">
+  <div class="benefit-charts">
-    <section class="_content">
+    <custom-echart-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" :is-series="true" />
-      <section class="left_btn"></section>
+  </div>
-      <section class="_center">
-        <img :src="tomatoImg" alt="" />
-      </section>
-      <section class="right_btn"></section>
-    </section>
-    <section class="_footer">0000</section>
-  </section>
 </template>
-
 <script setup>
-import tomatoImg from '@/assets/images/entities/tomatoImg.png';
+import { ref, reactive, onMounted } from 'vue';
-import a from '@/assets/images/entities/1.jpg';
-import b from '@/assets/images/entities/2.jpg';
-import c from '@/assets/images/entities/3.jpg';
-import d from '@/assets/images/entities/4.jpg';
-import e from '@/assets/images/entities/5.jpg';
-import f from '@/assets/images/entities/6.jpg';
-import g from '@/assets/images/entities/7.jpg';
-import h from '@/assets/images/entities/8.png';
-</script>
 
+const data = [1700, 800, 1700, 600, 800];
+const data2 = [2600, 1400, 3350, 1400, 1400];
+const colorArr1 = ['rgba(11, 83, 128)', 'rgba(2, 143, 224)', '#2a7fcc'];
+const colorArr2 = ['rgb(12, 109, 122)', 'rgba(1, 241, 228)', '#5ce1d6'];
+const color1 = {
+  type: 'linear',
+  x: 0,
+  x2: 1,
+  y: 0,
+  y2: 0,
+  colorStops: [
+    {
+      offset: 0,
+      color: colorArr1[0],
+    },
+    {
+      offset: 0.5,
+      color: colorArr1[0],
+    },
+    {
+      offset: 0.5,
+      color: colorArr1[1],
+    },
+    {
+      offset: 1,
+      color: colorArr1[1],
+    },
+  ],
+};
+const color2 = {
+  type: 'linear',
+  x: 0,
+  x2: 1,
+  y: 0,
+  y2: 0,
+  colorStops: [
+    {
+      offset: 0,
+      color: colorArr2[0],
+    },
+    {
+      offset: 0.5,
+      color: colorArr2[0],
+    },
+    {
+      offset: 0.5,
+      color: colorArr2[1],
+    },
+    {
+      offset: 1,
+      color: colorArr2[1],
+    },
+  ],
+};
+var barWidth = 18;
+const chartsData = reactive({
+  option: {
+    legend: {
+      show: false,
+    },
+    tooltip: {
+      trigger: 'axis',
+      formatter: function (params) {
+        var str = params[0].name + ':';
+        params.filter(function (item) {
+          if (item.componentSubType == 'bar') {
+            str += '<br/>' + item.seriesName + '：' + item.value;
+          }
+        });
+        return str;
+      },
+    },
+    //图表大小位置限制
+    grid: {
+      x: '16%',
+      x2: '5%',
+      y: '15%',
+      y2: '15%',
+    },
+    xAxis: {
+      data: ['肉类', '水果', '蔬菜', '水产', '谷物'],
+      //坐标轴
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 1,
+          color: '#214776',
+        },
+        textStyle: {
+          color: '#fff',
+          fontSize: '10',
+        },
+      },
+      type: 'category',
+      axisLabel: {
+        textStyle: {
+          color: '#C5DFFB',
+          fontWeight: 500,
+          fontSize: '14',
+        },
+      },
+      axisTick: {
+        textStyle: {
+          color: '#fff',
+          fontSize: '16',
+        },
+        show: false,
+      },
+    },
+    yAxis: {
+      name: ' ',
+      nameTextStyle: {
+        color: '#DEDEDE',
+        fontSize: 12,
+        padding: 10,
+      },
+      type: 'value',
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed', //线的类型 虚线0
+          opacity: 0.2, //透明度
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      //坐标值标注
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#C5DFFB',
+        },
+      },
+    },
+    series: [
+      {
+        z: 1,
+        name: '绿色',
+        type: 'bar',
+        barWidth: barWidth,
+        barGap: '0%',
+        data: data,
+        itemStyle: {
+          normal: {
+            color: color2,
+          },
+        },
+      },
+      {
+        z: 3,
+        name: '绿色',
+        type: 'pictorialBar',
+        symbolPosition: 'end',
+        data: data,
+        symbol: 'diamond',
+        symbolOffset: ['0%', '-60%'],
+        symbolSize: [18, 12],
+        itemStyle: {
+          normal: {
+            borderWidth: 2,
+            color: colorArr2[2],
+          },
+        },
+      },
+    ],
+  },
+  valData: [
+    { value: 205, name: '肉类' },
+    { value: 308, name: '水果' },
+    { value: 359, name: '蔬菜' },
+    { value: 452, name: '水产' },
+    { value: 388, name: '谷物' },
+  ],
+});
+
+onMounted(() => {});
+</script>
 <style lang="scss" scoped>
-.price_container {
+.benefit-charts {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
   height: 100%;
-  ._content {
-    flex: 1;
-    display: grid;
-    grid-template-columns: 25% calc(50% - 28px) 25%;
-    align-items: center;
-    justify-content: center;
-    gap: 14px;
-    width: 100%;
-    ._center {
-      padding-top: 20px;
-      height: 100%;
-      text-align: center;
-      img {
-        width: 60%;
-        height: 60%;
-      }
-      background: url('../../../assets/images/entities/goodsBG.png') no-repeat center center / 100%;
-      background-position: bottom center;
-    }
-    .left_btn,
-    .right_btn {
-      aspect-ratio: 1 / 1;
-      background: url('../../../assets/images/entities/leftArrowBG.png') no-repeat center center / 100%;
-    }
-    .right_btn {
-      background: url('../../../assets/images/entities/rightArrowBG.png') no-repeat center center / 100%;
-    }
-  }
-  ._footer {
-    height: 40px;
-    width: 60%;
-    background: url('../../../assets/images/basic/footerBtnTextBG.png') no-repeat center center / cover;
-  }
 }
 </style>

src/views/entities/components/categoryCharts.vue

@@ -1,63 +1,70 @@
 <template>
-  <customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
+  <div class="category-charts">
+    <custom-echart-pie :chart-data="plantBreed.valData" height="100%" :option="plantBreed.option" />
+  </div>
 </template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
 
-<script lang="ts" setup>
+const plantBreed = reactive({
-import { reactive, ref } from 'vue';
+  option: {
-
+    color: ['#3685fe', '#41b879', '#ffd500'],
-/* --------------- data --------------- */
+    title: {
-// #region
+      text: ' ',
-const data = ref([
+      textStyle: {
-  {
+        color: '#333',
-    name: '企业',
+      },
-    value: 10.8,
-  },
-  {
-    name: '合作社',
-    value: 8.4,
-  },
-  {
-    name: '村集体',
-    value: 4.3,
-  },
-  {
-    name: '个体',
-    value: 3.7,
-  },
-]);
-const option = reactive({
-  k: 0.2,
-  opacity: 0.6,
-  itemGap: 0,
-  autoItemHeight: 10,
-  legend: {
-    orient: 'horizontal',
-    bottom: 10,
-    left: 'center',
-  },
-  grid3D: {
-    show: false,
-    boxHeight: 5,
-    top: 'center',
-    left: 'center',
-    viewControl: {
-      //3d效果可以放大、旋转等，请自己去查看官方配置
-      alpha: 30, //角度(这个很重要 调节角度的)
-      distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
-      rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
-      zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
-      panSensitivity: 10, //设置平移灵敏度，0无法平移
-      autoRotate: true, //自动旋转
-      autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
     },
+    legend: {
+      data: ['肉类', '水果', '蔬菜', '水产', '谷物'],
+      right: '0', // 距离左侧10%的位置
+      top: 'middle', // 垂直居中
+      orient: 'vertical', // 图例垂直排列
+      itemWidth: 15, // 图例标记的宽度
+      itemHeight: 8, // 图例标记的高度
+      textStyle: {
+        fontSize: 10, // 图例文字的字体大小
+        color: '#fff', // 图例文字的颜色
+      },
+    },
+    label: {
+      color: '#333',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: [20, 80],
+        roseType: 'area',
+        center: ['40%', '50%'],
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          borderRadius: 5,
+        },
+      },
+    ],
   },
+  valData: [
+    { value: 205, name: '肉类' },
+    { value: 308, name: '水果' },
+    { value: 359, name: '蔬菜' },
+    { value: 452, name: '水产' },
+    { value: 388, name: '谷物' },
+  ],
 });
-// #endregion
 
-/* --------------- methods --------------- */
+onMounted(() => {
-// #region
+  if (plantBreed.valData && plantBreed.length) {
-
+    plantBreed.valData.forEach((m, index) => {
-// #endregion
+      let num = 100;
+      m.value = (Number(m.value) + Math.random() + num).toFixed(2);
+    });
+  }
+});
 </script>
-
+<style lang="scss" scoped>
-<style lang="scss" scoped></style>
+.category-charts {
+  height: 100%;
+}
+</style>

src/views/entities/components/entitiesStatistics.vue

@@ -3,7 +3,6 @@
 </template>
 <script setup>
 import { reactive } from 'vue';
-import * as echarts from 'echarts';
 
 const state = reactive({
   data: [
@@ -31,18 +30,19 @@ const state = reactive({
         type: 'shadow',
       },
       formatter: (data) => {
-        console.log('data', data);
         const params = data[0];
         let str = `<div class="custom-echarts-tips">
           <span>${params.name}</span><br/>
-          <span>${params.marker} ${params.data} 万</span><br />
+          <span>${params.marker} ${params.data} 万亩</span>
-          <span>${data[1].marker} ${data[1].data} 万</span>
         </div>`;
         return str;
       },
     },
     barStyle: {
       barWidth: 15,
+      itemStyle: {
+        borderRadius: [8, 8, 0, 0],
+      },
       color: {
         type: 'linear',
         x: 0,
@@ -74,7 +74,8 @@ const state = reactive({
     yAxis: [
       {
         type: 'value',
-        barWidth: 15,
+        name: '人数 / 千人',
+        splitNumber: 5,
         nameTextStyle: {
           color: '#fff',
           fontSize: 12,
@@ -104,7 +105,6 @@ const state = reactive({
       {
         splitNumber: 5,
         type: 'value',
-        show: false,
         nameTextStyle: {
           color: '#fff',
           fontSize: 12,
@@ -127,73 +127,6 @@ const state = reactive({
         },
       },
     ],
-    legend: {
-      itemWidth: 12,
-      itemHeight: 8,
-      itemGap: 20,
-      right: '2%',
-      top: '3%',
-      x: 'center',
-      textStyle: {
-        fontSize: 14,
-        color: '#fff',
-      },
-      data: ['总产量（吨）', '平均产量（吨）'],
-      selectedMode: false,
-    },
-    series: [
-      {
-        name: '总产量（吨）',
-        type: 'bar',
-        data: [],
-        barWidth: '15px',
-        barGap: '50%',
-        itemStyle: {
-          normal: {
-            borderRadius: [8, 8, 0, 0],
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: 'rgba(53,208,192,1)',
-              },
-
-              {
-                offset: 1,
-                color: 'rgba(53,208,192,0)',
-              },
-            ]),
-          },
-        },
-        label: {
-          show: false,
-          position: 'top',
-          fontSize: 12,
-          color: '#F5F5F5',
-          offset: [0, -5],
-          formatter: '{c}',
-        },
-      },
-      {
-        data: [], // 折线图的数据
-        name: '平均产量（吨）',
-        type: 'line',
-        yAxisIndex: 1,
-        showSymbol: true,
-        symbolSize: 8,
-        smooth: true,
-        symbol: 'circle',
-        lineStyle: {
-          normal: {
-            color: 'rgba(53,208,192,1)',
-          },
-        },
-        itemStyle: {
-          color: 'rgba(254,249,6,1)',
-          borderColor: '#fff',
-          borderWidth: 1,
-        },
-      },
-    ],
   },
 });
 </script>

src/views/entities/components/entitieslist.vue

@@ -1,62 +1,119 @@
 <template>
-  <customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
+  <div class="demo roll-list-lentities" 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> -->
 </template>
 
-<script lang="ts" setup>
+<script setup>
-import { reactive, ref } from 'vue';
+import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
-
+import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
-/* --------------- data --------------- */
+const props = defineProps({
-// #region
+  //   items: {
-const data = ref([
+  //     type: Array,
-  {
+  //     default: () => [],
-    name: '烟草',
+  //   },
-    value: 60.8,
-  },
-  {
-    name: '甘蔗',
-    value: 44.4,
-  },
-  {
-    name: '核桃',
-    value: 24.3,
-  },
-  {
-    name: '蔬菜',
-    value: 32.7,
-  },
-  {
-    name: '其他',
-    value: 32.9,
-  },
-]);
-const option = reactive({
-  k: 0.3,
-  opacity: 1,
-  itemGap: 0,
-  autoItemHeight: 2,
-  grid3D: {
-    show: false,
-    boxHeight: 5,
-    top: '0',
-    left: '-20%',
-    viewControl: {
-      //3d效果可以放大、旋转等，请自己去查看官方配置
-      alpha: 30, //角度(这个很重要 调节角度的)
-      distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
-      rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
-      zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
-      panSensitivity: 10, //设置平移灵敏度，0无法平移
-      autoRotate: true, //自动旋转
-      autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
-    },
-  },
 });
-// #endregion
 
-/* --------------- methods --------------- */
+let list = reactive([
-// #region
+  { title: '信达农资有限公司', type: '农药', time: '2025.01.02', duration: 8 },
+  { title: '方大种源有限公司', type: '种源', time: '2025.01.01', duration: 10 },
+  { title: '信誉种源有限公司', type: '种源', time: '2025.01.02', duration: 11 },
+  { title: '嘉兴包装有限公司', type: '生产加工', time: '2025.01.01', duration: 15 },
+  { title: '达国有限公司', type: '农资', time: '2025.01.02', duration: 14 },
+  { title: '华威种植专业合作社', type: '合作社', time: '2025.01.01', duration: 8 },
+  { title: '信誉种源合作社', type: '合作社', time: '2025.01.02', duration: 15 },
+  { title: '华泰种源有限公司', type: '种源', time: '2025.01.01', duration: 13 },
+  { title: '嘉德食品包装包装有限公司', type: '生产加工', time: '2025.01.02', duration: 5 },
+]);
 
-// #endregion
+const listKeys = reactive(['title', 'type', 'time', 'duration']);
+const listKeysHeader = reactive({
+  title: '主体名称',
+  type: '主体类别',
+  time: '注册时间',
+  duration: '经营时间',
+});
+
+const classOptions = {
+  singleHeight: 48,
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped lang="scss">
+.roll-list-lentities {
+  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>

src/views/entities/index.vue

@@ -11,7 +11,7 @@
       <div class="left-charts-item">
         <customBack top-title="全县各作物产值对比" :top-postion="'left'">
           <template #back>
-            <entitieslist></entitieslist>
+            <entitiesStatistics></entitiesStatistics>
           </template>
         </customBack>
       </div>

src/views/land/components/cake.vue

@@ -1,9 +1,9 @@
 <template>
-  <customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
+  <customEchartHyalineCake :chart-data="data" height="100%" />
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 
 /* --------------- data --------------- */
 // #region
@@ -33,28 +33,6 @@ const data = ref([
     value: 32.1,
   },
 ]);
-const option = reactive({
-  opacity: 0.6,
-  itemGap: 0.2,
-  legendSuffix: '万亩',
-  itemHeight: 120,
-  grid3D: {
-    show: false,
-    boxHeight: 5,
-    top: '0',
-    left: '-20%',
-    viewControl: {
-      //3d效果可以放大、旋转等，请自己去查看官方配置
-      alpha: 30, //角度(这个很重要 调节角度的)
-      distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
-      rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
-      zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
-      panSensitivity: 10, //设置平移灵敏度，0无法平移
-      autoRotate: true, //自动旋转
-      autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
-    },
-  },
-});
 // #endregion
 
 /* --------------- methods --------------- */

src/views/land/components/landPlan.vue

@@ -29,14 +29,12 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
-      borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];
         let str = `<div class="custom-echarts-tips">
-     <span>${params.name}</span><br/>
+          <span>${params.name}</span><br/>
-     <span>${params.marker} ${params.data} 万元</span>
+          <span>${params.marker} ${params.data} 万亩</span>
-    </div>`;
+        </div>`;
         return str;
       },
     },