feat

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

@@ -124,80 +124,8 @@ export default {
       if (props.option) {
         Object.assign(option, cloneDeep(props.option));
       }
-      option.series = [
+      option.series[0].data = yDataColumn.value;
-        {
+      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,7 +27,14 @@ export default {
     },
     option: {
       type: Object,
-      default: () => ({}),
+      default: () => ({
+        k: 1,
+        opacity: '0,6',
+        itemGap: 0.2,
+        itemHeight: 120,
+        autoItemHeight: 0,
+        legendSuffix: '',
+      }),
     },
     type: {
       type: String,
@@ -51,18 +58,15 @@ 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) {
-        Object.assign(option, cloneDeep(props.option));
+        option.value = Object.assign(option, cloneDeep(props.option));
       }
-      option.value = getPie3D(props.chartData, 0.5);
+      option.value = getPie3D(props.chartData, props.option.opacity);
       setOptions(option.value);
     }
 
@@ -75,8 +79,8 @@ export default {
         isSelected = false;
       }
       k = typeof k !== 'undefined' ? k : 1 / 3;
-      const offsetX = Math.cos(midRadian) * 0.2;
+      const offsetX = Math.cos(midRadian) * props.option.itemGap;
-      const offsetY = Math.sin(midRadian) * 0.2;
+      const offsetY = Math.sin(midRadian) * props.option.itemGap;
       const hoverRate = 1;
       return {
         u: {
@@ -127,7 +131,7 @@ export default {
       let startValue = 0;
       let endValue = 0;
       const legendData = [];
-      const k = 1;
+      const k = props.option.k ?? 1;
       for (let i = 0; i < pieData.length; i += 1) {
         sumValue += pieData[i].value;
 
@@ -142,7 +146,7 @@ export default {
 
           itemStyle: {
             // color: colors[i], // 自定义颜色
-            opacity: '0.6',
+            opacity: props.option.opacity,
             borderRadius: 300,
             borderColor: '#fff',
             borderWidth: 0,
@@ -171,40 +175,41 @@ export default {
           false,
           false,
           k,
-          itemHeight.value
+          props.option.autoItemHeight > 0 ? props.option.autoItemHeight * series[i].pieData.value : props.option.itemHeight
         );
         startValue = endValue;
         legendData.push(series[i].name);
       }
-      const option = {
+      const option = Object.assign(
-        tooltip: {
+        {
-          position: function (point, params, dom, rect, size) {
+          tooltip: {
-            var x = point[0];
+            position: function (point, params, dom, rect, size) {
-            var y = point[1];
+              var x = point[0];
-            var viewWidth = size.viewSize[0];
+              var y = point[1];
-            var viewHeight = size.viewSize[1];
+              var viewWidth = size.viewSize[0];
-            var boxWidth = size.contentSize[0];
+              var viewHeight = size.viewSize[1];
-            var boxHeight = size.contentSize[1];
+              var boxWidth = size.contentSize[0];
-            // 判断 tooltip 位置，调整其位置使其不会超出图表边界
+              var boxHeight = size.contentSize[1];
-            if (x + boxWidth > viewWidth) {
+              // 判断 tooltip 位置，调整其位置使其不会超出图表边界
-              x = x - boxWidth;
+              if (x + boxWidth > viewWidth) {
-            }
+                x = x - boxWidth;
-            if (y + boxHeight > viewHeight) {
+              }
-              y = y - boxHeight;
+              if (y + boxHeight > viewHeight) {
-            }
+                y = y - boxHeight;
-            // 保证 tooltip 始终在图表内部
+              }
-            if (x < 0) {
+              // 保证 tooltip 始终在图表内部
-              x = 0;
+              if (x < 0) {
-            }
+                x = 0;
-            if (y < 0) {
+              }
-              y = 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 `
                ${params.seriesName}<br/>
                   <span style="display:inline-block;
                   margin-right:5px;
@@ -214,63 +219,63 @@ export default {
                   background-color:${params.color};"></span>
                   ${option.series[params.seriesIndex].pieData.value}
                   `;
-            }
+              }
-            return '';
+              return '';
+            },
           },
-        },
+          xAxis3D: {
-        xAxis3D: {
+            min: -1,
-          min: -1,
+            max: 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 后有效
           },
-        },
+          yAxis3D: {
-        legend: {
+            min: -1,
-          show: true,
+            max: 1,
-          right: '5%',
-          top: '25%',
-          orient: 'vertical',
-          icon: 'circle',
-          itemHeight: 12,
-          itemWidth: 12,
-          itemGap: 10,
-          textStyle: {
-            color: '#fff',
-            fontSize: 14,
-            fontWeight: '400',
           },
-          formatter: (name) => {
+          zAxis3D: {
-            if (props.chartData.length) {
+            min: -1,
-              const item = props.chartData.filter((item) => item.name === name)[0];
+            max: 1,
-              return `  ${name}      ${item.value}万亩`;
-            }
           },
+          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,
         },
-        series,
+        props.option
-      };
+      );
       return option;
     }
     function onClick(params) {

src/views/entities/components/benefitCharts.vue

@@ -1,194 +1,67 @@
 <template>
-  <div class="benefit-charts">
+  <section class="price_container">
-    <custom-echart-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" :is-series="true" />
+    <section class="_content">
-  </div>
+      <section class="left_btn"></section>
+      <section class="_center">
+        <img :src="tomatoImg" alt="" />
+      </section>
+      <section class="right_btn"></section>
+    </section>
+    <section class="_footer">0000</section>
+  </section>
 </template>
+
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import tomatoImg from '@/assets/images/entities/tomatoImg.png';
-
+import a from '@/assets/images/entities/1.jpg';
-const data = [1700, 800, 1700, 600, 800];
+import b from '@/assets/images/entities/2.jpg';
-const data2 = [2600, 1400, 3350, 1400, 1400];
+import c from '@/assets/images/entities/3.jpg';
-const colorArr1 = ['rgba(11, 83, 128)', 'rgba(2, 143, 224)', '#2a7fcc'];
+import d from '@/assets/images/entities/4.jpg';
-const colorArr2 = ['rgb(12, 109, 122)', 'rgba(1, 241, 228)', '#5ce1d6'];
+import e from '@/assets/images/entities/5.jpg';
-const color1 = {
+import f from '@/assets/images/entities/6.jpg';
-  type: 'linear',
+import g from '@/assets/images/entities/7.jpg';
-  x: 0,
+import h from '@/assets/images/entities/8.png';
-  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>
-.benefit-charts {
+.price_container {
+  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,70 +1,63 @@
 <template>
-  <div class="category-charts">
+  <customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
-    <custom-echart-pie :chart-data="plantBreed.valData" height="100%" :option="plantBreed.option" />
-  </div>
 </template>
-<script setup>
-import { ref, reactive, onMounted } from 'vue';
 
-const plantBreed = reactive({
+<script lang="ts" setup>
-  option: {
+import { reactive, ref } from 'vue';
-    color: ['#3685fe', '#41b879', '#ffd500'],
+
-    title: {
+/* --------------- data --------------- */
-      text: ' ',
+// #region
-      textStyle: {
+const data = ref([
-        color: '#333',
+  {
-      },
+    name: '企业',
-    },
+    value: 10.8,
-    legend: {
+  },
-      data: ['肉类', '水果', '蔬菜', '水产', '谷物'],
+  {
-      right: '0', // 距离左侧10%的位置
+    name: '合作社',
-      top: 'middle', // 垂直居中
+    value: 8.4,
-      orient: 'vertical', // 图例垂直排列
+  },
-      itemWidth: 15, // 图例标记的宽度
+  {
-      itemHeight: 8, // 图例标记的高度
+    name: '村集体',
-      textStyle: {
+    value: 4.3,
-        fontSize: 10, // 图例文字的字体大小
+  },
-        color: '#fff', // 图例文字的颜色
+  {
-      },
+    name: '个体',
-    },
+    value: 3.7,
-    label: {
+  },
-      color: '#333',
+]);
-    },
+const option = reactive({
-    series: [
+  k: 0.2,
-      {
+  opacity: 0.6,
-        type: 'pie',
+  itemGap: 0,
-        radius: [20, 80],
+  autoItemHeight: 10,
-        roseType: 'area',
+  legend: {
-        center: ['40%', '50%'],
+    orient: 'horizontal',
-        label: {
+    bottom: 10,
-          show: false,
+    left: 'center',
-        },
+  },
-        itemStyle: {
+  grid3D: {
-          borderRadius: 5,
+    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 后有效
+    },
   },
-  valData: [
-    { value: 205, name: '肉类' },
-    { value: 308, name: '水果' },
-    { value: 359, name: '蔬菜' },
-    { value: 452, name: '水产' },
-    { value: 388, name: '谷物' },
-  ],
 });
+// #endregion
 
-onMounted(() => {
+/* --------------- methods --------------- */
-  if (plantBreed.valData && plantBreed.length) {
+// #region
-    plantBreed.valData.forEach((m, index) => {
+
-      let num = 100;
+// #endregion
-      m.value = (Number(m.value) + Math.random() + num).toFixed(2);
-    });
-  }
-});
 </script>
-<style lang="scss" scoped>
+
-.category-charts {
+<style lang="scss" scoped></style>
-  height: 100%;
-}
-</style>

src/views/entities/components/entitiesStatistics.vue

@@ -3,6 +3,7 @@
 </template>
 <script setup>
 import { reactive } from 'vue';
+import * as echarts from 'echarts';
 
 const state = reactive({
   data: [
@@ -30,19 +31,18 @@ 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>
+          <span>${params.marker} ${params.data} 万</span><br />
+          <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,8 +74,7 @@ const state = reactive({
     yAxis: [
       {
         type: 'value',
-        name: '人数 / 千人',
+        barWidth: 15,
-        splitNumber: 5,
         nameTextStyle: {
           color: '#fff',
           fontSize: 12,
@@ -105,6 +104,7 @@ const state = reactive({
       {
         splitNumber: 5,
         type: 'value',
+        show: false,
         nameTextStyle: {
           color: '#fff',
           fontSize: 12,
@@ -127,6 +127,73 @@ 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,119 +1,62 @@
 <template>
-  <div class="demo roll-list-lentities" style="height: 90%">
+  <customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
-    <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 setup>
+<script lang="ts" setup>
-import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
+import { reactive, ref } from 'vue';
-import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
-const props = defineProps({
-  //   items: {
-  //     type: Array,
-  //     default: () => [],
-  //   },
-});
 
-let list = reactive([
+/* --------------- data --------------- */
-  { title: '信达农资有限公司', type: '农药', time: '2025.01.02', duration: 8 },
+// #region
-  { title: '方大种源有限公司', type: '种源', time: '2025.01.01', duration: 10 },
+const data = ref([
-  { title: '信誉种源有限公司', type: '种源', time: '2025.01.02', duration: 11 },
+  {
-  { title: '嘉兴包装有限公司', type: '生产加工', time: '2025.01.01', duration: 15 },
+    name: '烟草',
-  { title: '达国有限公司', type: '农资', time: '2025.01.02', duration: 14 },
+    value: 60.8,
-  { title: '华威种植专业合作社', type: '合作社', time: '2025.01.01', duration: 8 },
+  },
-  { title: '信誉种源合作社', type: '合作社', time: '2025.01.02', duration: 15 },
+  {
-  { title: '华泰种源有限公司', type: '种源', time: '2025.01.01', duration: 13 },
+    name: '甘蔗',
-  { title: '嘉德食品包装包装有限公司', type: '生产加工', time: '2025.01.02', duration: 5 },
+    value: 44.4,
+  },
+  {
+    name: '核桃',
+    value: 24.3,
+  },
+  {
+    name: '蔬菜',
+    value: 32.7,
+  },
+  {
+    name: '其他',
+    value: 32.9,
+  },
 ]);
-
+const option = reactive({
-const listKeys = reactive(['title', 'type', 'time', 'duration']);
+  k: 0.3,
-const listKeysHeader = reactive({
+  opacity: 1,
-  title: '主体名称',
+  itemGap: 0,
-  type: '主体类别',
+  autoItemHeight: 2,
-  time: '注册时间',
+  grid3D: {
-  duration: '经营时间',
+    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
 
-const classOptions = {
+/* --------------- methods --------------- */
-  singleHeight: 48,
+// #region
-};
+
+// #endregion
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped></style>
-.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>
-            <entitiesStatistics></entitiesStatistics>
+            <entitieslist></entitieslist>
           </template>
         </customBack>
       </div>

src/views/land/components/cake.vue

@@ -1,9 +1,9 @@
 <template>
-  <customEchartHyalineCake :chart-data="data" height="100%" />
+  <customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 
 /* --------------- data --------------- */
 // #region
@@ -33,6 +33,28 @@ 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 --------------- */