From 46cd37074c1728b79ee5891eada95786f7144499 Mon Sep 17 00:00:00 2001
From: lx <826276471@qq.com>
Date: Fri, 25 Apr 2025 14:10:23 +0800
Subject: [PATCH] feat

---
 components.d.ts                               |   1 +
 .../custom-echart-column-line/index.vue       | 219 +++++++++
 src/components/index.js                       |   2 +
 src/router/modules/v2.js                      |  12 +-
 .../components/entitiesCategoryCharts.vue     | 442 ++++--------------
 .../components/entitiesStatistics.vue         | 163 ++++---
 src/views/entities/index.vue                  | 106 ++---
 7 files changed, 489 insertions(+), 456 deletions(-)
 create mode 100644 src/components/custom-echart-column-line/index.vue

diff --git a/components.d.ts b/components.d.ts
index 921970b..85ad306 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -16,6 +16,7 @@ declare module 'vue' {
     CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']
     CustomEchartBar: typeof import('./src/components/custom-echart-bar/index.vue')['default']
     CustomEchartBubble: typeof import('./src/components/custom-echart-bubble/index.vue')['default']
+    CustomEchartColumnLine: typeof import('./src/components/custom-echart-column-line/index.vue')['default']
     CustomEchartHyaline: typeof import('./src/components/custom-echart-hyaline/index.vue')['default']
     CustomEchartHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/index.vue')['default']
     CustomEchartLine: typeof import('./src/components/custom-echart-line/index.vue')['default']
diff --git a/src/components/custom-echart-column-line/index.vue b/src/components/custom-echart-column-line/index.vue
new file mode 100644
index 0000000..90107f7
--- /dev/null
+++ b/src/components/custom-echart-column-line/index.vue
@@ -0,0 +1,219 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script>
+import { ref, reactive, watchEffect, watch } from 'vue';
+import { cloneDeep } from 'lodash';
+import { useEcharts } from '@/hooks/useEcharts';
+
+export default {
+  name: 'CustomEchartLine',
+  props: {
+    chartData: {
+      type: Array,
+      default: () => [],
+      required: true,
+    },
+    option: {
+      type: Object,
+      default: () => ({}),
+    },
+    type: {
+      type: String,
+      default: 'line',
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: 'calc(100vh - 78px)',
+    },
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const chartRef = ref(null);
+    const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
+    const option = reactive({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+          label: {
+            show: true,
+            backgroundColor: '#333',
+          },
+        },
+      },
+      legend: {
+        top: 30,
+      },
+      grid: {
+        top: 60,
+      },
+      xAxis: {
+        type: 'category',
+        data: [],
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [],
+    });
+    const xData = ref([]);
+    const yDataColumn = ref([]);
+    const yDataLine = ref([]);
+
+    watchEffect(() => {
+      props.chartData && initCharts();
+    });
+
+    watch(
+      () => props.chartData,
+      () => {
+        console.info('props.chartData变化', props.chartData);
+        props.chartData && initCharts();
+      },
+      {
+        deep: true,
+        immediate: true,
+      }
+    );
+
+    function hexToRGBA(hex, alpha = 1) {
+      let hexCode = hex.replace('#', '');
+      if (hexCode.length === 3) {
+        hexCode = hexCode
+          .split('')
+          .map((char) => char + char)
+          .join('');
+      }
+      const r = parseInt(hexCode.slice(0, 2), 16);
+      const g = parseInt(hexCode.slice(2, 4), 16);
+      const b = parseInt(hexCode.slice(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+
+    function setAreaStyle(color) {
+      return {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: hexToRGBA(color, 1),
+            },
+            {
+              offset: 1,
+              color: hexToRGBA(color, 0.2),
+            },
+          ],
+        },
+      };
+    }
+
+    function initCharts() {
+      xData.value = props.chartData.map((item) => item.name);
+      yDataColumn.value = props.chartData.map((item) => item.value1);
+      yDataLine.value = props.chartData.map((item) => item.value);
+      if (props.option) {
+        Object.assign(option, cloneDeep(props.option));
+      }
+      option.series = [
+        {
+          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({
+      //     interval: 2000,
+      //     seriesIndex: 0,
+      //     showTooltip: true,
+      //   });
+      getInstance()?.off('click', onClick);
+      getInstance()?.on('click', onClick);
+    }
+
+    function onClick(params) {
+      emit('click', params);
+    }
+
+    return { chartRef };
+  },
+};
+</script>
diff --git a/src/components/index.js b/src/components/index.js
index 5923fa1..e4aebe7 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -21,6 +21,7 @@ import customEchartScatterBlister from './custom-echart-scatter-blister';
 import customEchartMaps from './custom-echart-maps';
 import customScrollTitle from './custom-scroll-title';
 import customEchartHyalineCake from './custom-echart-hyaline-cake';
+import customEchartColumnLine from './custom-echart-column-line';
 
 export {
   SvgIcon,
@@ -46,4 +47,5 @@ export {
   customEchartMaps,
   customScrollTitle,
   customEchartHyalineCake,
+  customEchartColumnLine,
 };
diff --git a/src/router/modules/v2.js b/src/router/modules/v2.js
index dbc3920..fd114b8 100644
--- a/src/router/modules/v2.js
+++ b/src/router/modules/v2.js
@@ -25,12 +25,12 @@ export default {
       component: () => import('@/views/inputs/index.vue'),
       meta: { title: '投入品监管', icon: '' },
     },
-    // {
-    //   path: 'entities',
-    //   name: 'entities',
-    //   component: () => import('@/views/entities/index.vue'),
-    //   meta: { title: '', icon: '' },
-    // },
+    {
+      path: 'entities',
+      name: 'entities',
+      component: () => import('@/views/entities/index.vue'),
+      meta: { title: '生产经营主体', icon: '' },
+    },
     // {
     //   path: 'breed',
     //   name: 'breed',
diff --git a/src/views/entities/components/entitiesCategoryCharts.vue b/src/views/entities/components/entitiesCategoryCharts.vue
index 3781f4a..63adaf7 100644
--- a/src/views/entities/components/entitiesCategoryCharts.vue
+++ b/src/views/entities/components/entitiesCategoryCharts.vue
@@ -1,355 +1,113 @@
 <template>
-  <div class="entities-category-charts">
-    <custom-echart-pie-3d :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
-  </div>
+  <custom-echart-line :chart-data="dataList" height="100%" :option="state.option" />
 </template>
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
-const dataList = reactive([
-  { name: '肉类', val: 1230, itemStyle: { color: 'rgba(56, 136, 235, 1)' } },
-  { name: '水果', val: 300, itemStyle: { color: 'rgba(113, 70, 159, 1)' } },
-  { name: '蔬菜', val: 800, itemStyle: { color: 'rgba(237, 171, 87, 1)' } },
-  { name: '水产', val: 500, itemStyle: { color: 'rgba(231, 89, 77, 1)' } },
-  { name: '谷物', val: 600, itemStyle: { color: 'rgba(231, 89, 77, 1)' } },
+import { reactive } from 'vue';
+let dataList = reactive([
+  {
+    value: 10,
+    name: '2020',
+  },
+  {
+    value: 66,
+    name: '2021',
+  },
+  {
+    value: 100,
+    name: '2022',
+  },
+  {
+    value: 120,
+    name: '2023',
+  },
+  {
+    value: 150,
+    name: '2024',
+  },
+  {
+    value: 80,
+    name: '2025',
+  },
 ]);
-const heightProportion = ref(0.3); // 柱状扇形的高度比例
-
-// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
-// #region
-const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, height, radiusScale) => {
-  // 计算
-  let midRatio = (startRatio + endRatio) / 3;
-
-  let startRadian = startRatio * Math.PI * 2;
-  let endRadian = endRatio * Math.PI * 2;
-  let midRadian = midRatio * Math.PI * 2;
-
-  // 如果只有一个扇形，则不实现选中效果。
-  if (startRatio === 0 && endRatio === 1) {
-    isSelected = false;
-  }
-
-  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-  k = typeof k !== 'undefined' ? k : 1 / 3;
-
-  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-  let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-  let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-
-  // 计算高亮效果的放大比例（未高亮，则比例为 1）
-  let hoverRate = isHovered ? 1.1 : 1;
-
-  // 返回曲面参数方程
-  return {
-    u: {
-      min: -Math.PI,
-      max: Math.PI * 3,
-      step: Math.PI / 32,
-    },
-
-    v: {
-      min: 0,
-      max: Math.PI * 2,
-      step: Math.PI / 20,
-    },
-
-    x: function (u, v) {
-      if (u < startRadian) {
-        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
-      }
-      if (u > endRadian) {
-        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
-      }
-      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
-    },
-
-    y: function (u, v) {
-      if (u < startRadian) {
-        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
-      }
-      if (u > endRadian) {
-        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
-      }
-      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
-    },
-
-    z: function (u, v) {
-      if (u < -Math.PI * 0.5) {
-        return Math.sin(u);
-      }
-      if (u > Math.PI * 2.5) {
-        return Math.sin(u);
-      }
-      return Math.sin(v) > 0 ? heightProportion.value * height : -1;
-    },
-  };
-};
-// #endregion
-
-// 生成模拟 3D 饼图的配置项
-const getPie3D = (pieData, internalDiameterRatio, radiusScale = 1.8) => {
-  let series = [];
-  let sumValue = 0;
-  let startValue = 0;
-  let endValue = 0;
-  let legendData = [];
-  let linesSeries = []; // line3D模拟label指示线
-  let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
-
-  // 为每一个饼图数据，生成一个 series-surface 配置
-  for (let i = 0; i < pieData.length; i++) {
-    sumValue += pieData[i].value;
-
-    let seriesItem = {
-      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
-      type: 'surface',
-      parametric: true,
-      wireframe: {
-        show: false,
-      },
-      pieData: pieData[i],
-      pieStatus: {
-        selected: false,
-        hovered: false,
-        k: k,
-      },
-    };
-
-    if (typeof pieData[i].itemStyle != 'undefined') {
-      let itemStyle = {};
-
-      typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
-      typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
-
-      seriesItem.itemStyle = itemStyle;
-    }
-    series.push(seriesItem);
-  }
-
-  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
-  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-  for (let i = 0; i < series.length; i++) {
-    endValue = startValue + series[i].pieData.value;
-    // console.log(series[i]);
-    series[i].pieData.startRatio = startValue / sumValue;
-    series[i].pieData.endRatio = endValue / sumValue;
-    series[i].parametricEquation = getParametricEquation(
-      series[i].pieData.startRatio,
-      series[i].pieData.endRatio,
-      false,
-      false,
-      k,
-      series[i].pieData.value,
-      radiusScale
-    );
-
-    startValue = endValue;
-
-    // 计算label指示线的起始和终点位置
-    // 计算扇区中心角度（弧度）
-    const midRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
-    // 计算扇区外缘顶部坐标（v=0时）
-    const radius = 1 + k; // 外径公式
-    const posX = Math.cos(midRadian) * radius * radiusScale;
-    const posY = Math.sin(midRadian) * radius * radiusScale;
-    // 获取该扇区实际高度
-    const posZ = heightProportion.value * series[i].pieData.value;
-    let flag = (midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= (3 * Math.PI) / 2 && midRadian <= Math.PI * 2) ? 1 : -1;
-    let color = pieData[i].itemStyle.color;
-    let turningPosArr = [posX * 1.1 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0), posY * 1.1 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0), posZ * 1];
-    let endPosArr = [posX * 1.2 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0), posY * 1.2 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0), posZ * 3];
-
-    linesSeries.push(
-      {
-        type: 'line3D',
-        lineStyle: {
-          color: color,
-        },
-        data: [[posX, posY, posZ], turningPosArr, endPosArr],
-      },
-      // https://www.isqqw.com/assets/layout/images/person.png
-      {
-        type: 'scatter3D',
-        label: {
-          show: true, //设置label的显示和隐藏
-          distance: 0,
-          position: 'center',
-          textStyle: {
-            color: '#ffffff',
-            backgroundColor: color,
-            borderWidth: 2,
-            fontSize: 8,
-            padding: 4,
-            borderRadius: 4,
-          },
-          formatter: '{b}',
-        },
-        symbolSize: 0,
-        data: [{ name: series[i].name + '\n' + series[i].pieData.val, value: endPosArr }],
-      }
-    );
-
-    legendData.push(series[i].name);
-  }
-  series = series.concat(linesSeries);
-
-  // 计算底座的缩放系数，根据k调整
-  const baseScale = 2; // 原始基础缩放系数
-  const scaleForBase = baseScale * (1 + k); // 动态调整缩放
-  // 最底下圆盘
-  series.push({
-    name: 'mouseoutSeries',
-    type: 'surface',
-    parametric: true,
-    wireframe: {
-      show: false,
-    },
-    itemStyle: {
-      opacity: 0.75,
-      color: 'rgba(51, 135, 146, 0.75)',
-    },
-    parametricEquation: {
-      u: {
-        min: 0,
-        max: Math.PI * 2,
-        step: Math.PI / 20,
-      },
-      v: {
-        min: 0,
-        max: Math.PI,
-        step: Math.PI / 20,
-      },
-      x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * scaleForBase;
-      },
-      y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * scaleForBase;
-      },
-      z: function (u, v) {
-        return Math.cos(v) > 0 ? -0 : -3.5;
-      },
-    },
-  });
-  series.push({
-    name: 'bottomRing',
-    type: 'surface',
-    parametric: true,
-    wireframe: {
-      show: false,
-    },
-    itemStyle: {
-      opacity: 0.6,
-      color: 'rgba(255, 255, 255, 1)',
-    },
-    parametricEquation: {
-      u: {
-        min: 0.94, // 控制环的内径（92%半径）
-        max: 0.95, // 外径（100%半径）
-        step: 0.0001,
-      },
-      v: {
-        min: 0,
-        max: Math.PI * 2, // 完整圆周
-        step: Math.PI / 20,
-      },
-      x: function (u, v) {
-        // 极坐标公式 + 动态缩放
-        return u * scaleForBase * 1.0 * Math.cos(v);
-      },
-      y: function (u, v) {
-        return u * scaleForBase * 1.0 * Math.sin(v);
-      },
-      z: function () {
-        // 保持原有高度差
-        return -3.6;
-      },
-    },
-  });
-  let maxHeight = Math.max(...pieData.map((item) => item.value)) * heightProportion.value;
-  series.push({
-    name: 'topRing',
-    type: 'surface',
-    parametric: true,
-    wireframe: {
-      show: false,
-    },
-    itemStyle: {
-      opacity: 0.6,
-      color: 'rgba(255, 255, 255, 1)',
-    },
-    parametricEquation: {
-      u: {
-        min: 0.94, // 控制环的内径（92%半径）
-        max: 0.95, // 外径（100%半径）
-        step: 0.0001,
-      },
-      v: {
-        min: 0,
-        max: Math.PI * 2, // 完整圆周
-        step: Math.PI / 20,
-      },
-      x: function (u, v) {
-        // 极坐标公式 + 动态缩放
-        return u * scaleForBase * 1.0 * Math.cos(v);
-      },
-      y: function (u, v) {
-        return u * scaleForBase * 1.0 * Math.sin(v);
-      },
-      z: function () {
-        // 保持原有高度差
-        return maxHeight + 0.1;
-      },
-    },
-  });
-  return series;
-};
-
-let total = 0;
-dataList.forEach((item) => {
-  total += item.val;
-});
-
-const chartsData = reactive({
+const state = reactive({
   option: {
-    xAxis3D: {
-      min: -1.5,
-      max: 1.5,
-    },
-    yAxis3D: {
-      min: -1.5,
-      max: 1.5,
-    },
-    zAxis3D: {
-      min: -1,
-      max: 1,
-    },
-    grid3D: {
-      show: false,
-      boxHeight: 4,
+    color: ['#35D0C0'],
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
       top: '10%',
-      viewControl: {
-        distance: 380,
-        alpha: 25,
-        beta: 60,
-        autoRotate: true, // 自动旋转
+      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;
+      },
+    },
+    xAxis: {
+      type: 'category',
+      // name: '年份',
+      axisTick: {
+        show: false,
+        alignWithLabel: false,
+        interval: 'auto',
+        inside: false,
+        length: 5,
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+          color: 'rgba(28, 158, 222, 1)',
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      // name: '',
     },
   },
-  valData: [],
+  data: dataList,
 });
 
-onMounted(() => {
-  chartsData.valData = getPie3D(
-    dataList.map((item) => {
-      item.value = Number(((item.val / total) * 100).toFixed(2));
-      return item;
-    }),
-    0
-  );
+const refresData = () => {
+  console.info('landPatrol********************refresData');
+  state.data = dataList = reactive([
+    {
+      value: 20,
+      name: '2020',
+    },
+    {
+      value: 86,
+      name: '2021',
+    },
+    {
+      value: 120,
+      name: '2022',
+    },
+    {
+      value: 140,
+      name: '2023',
+    },
+    {
+      value: 170,
+      name: '2024',
+    },
+    {
+      value: 100,
+      name: '2025',
+    },
+  ]);
+};
+
+defineExpose({
+  refresData,
 });
 </script>
-<style lang="scss" scoped>
-.entities-category-charts {
-  height: 100%;
-}
-</style>
diff --git a/src/views/entities/components/entitiesStatistics.vue b/src/views/entities/components/entitiesStatistics.vue
index 0102615..e4828a0 100644
--- a/src/views/entities/components/entitiesStatistics.vue
+++ b/src/views/entities/components/entitiesStatistics.vue
@@ -1,79 +1,132 @@
 <template>
-  <div class="entities-statistics">
-    <custom-echart-mixin :chart-data="chartsData.valData" :option="chartsData.option" height="100%" />
-  </div>
+  <custom-echart-column-line :chart-data="state.data" height="100%" :option="state.option" />
 </template>
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
-const chartsData = reactive({
+import { reactive } from 'vue';
+
+const state = reactive({
+  data: [
+    { value: 333, value1: 208, name: '耿马镇' },
+    { value: 222, value1: 157, name: '勐撒镇' },
+    { value: 123, value1: 125, name: '勐永镇' },
+    { value: 156, value1: 146, name: '孟定镇' },
+    { value: 112, value1: 86, name: '勐简乡' },
+    { value: 123, value1: 172, name: '贺派乡' },
+    { value: 121, value1: 180, name: '四排山乡' },
+    { value: 143, value1: 99, name: '芒洪乡' },
+    { value: 123, value1: 84, name: '大兴乡' },
+  ],
   option: {
-    color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
-    title: {
-      text: ' ',
-      textStyle: {
-        color: '#333',
-      },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
+      top: '10%',
+      containLabel: true,
     },
-    legend: {
-      show: true,
-      data: ['个体户', '村集体', '合作社', '经营企业', '趋势'],
-      left: '0', // 距离左侧10%的位置
-      top: '0', // 垂直居中
-      itemWidth: 15, // 图例标记的宽度
-      itemHeight: 8, // 图例标记的高度
-      textStyle: {
-        fontSize: 10, // 图例文字的字体大小
-        color: '#fff', // 图例文字的颜色
+    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: 18,
+      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: 'category',
+      axisTick: {
+        show: false,
+        alignWithLabel: false,
+        interval: 'auto',
+        inside: false,
+        length: 5,
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+          color: 'rgba(28, 158, 222, 1)',
+        },
+      },
     },
     yAxis: [
       {
         type: 'value',
-        name: '数量',
+        name: '人数 / 千人',
+        splitNumber: 5,
+        nameTextStyle: {
+          color: '#fff',
+          fontSize: 12,
+          align: 'center',
+          padding: [0, 20, 5, 0],
+        },
         axisLabel: {
           formatter: '{value}',
+          color: 'rgba(95, 187, 235, 1)',
+          textStyle: {
+            fontSize: 14,
+            color: '#fff',
+            lineHeight: 16,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(28, 130, 197, .3)',
+            type: 'dashed',
+          },
         },
-        itemStyle: { fontSize: 10 },
       },
       {
+        splitNumber: 5,
         type: 'value',
-        name: '占比',
-        min: 0,
-        max: 100,
-        axisLabel: {
-          formatter: '{value} %',
+        nameTextStyle: {
+          color: '#fff',
+          fontSize: 12,
+          align: 'center',
+          padding: [0, 0, 5, 0],
+        },
+        axisLabel: {
+          show: true,
+          fontSize: 12,
+          color: '#fff',
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
         },
-        itemStyle: { fontSize: 10 },
       },
     ],
-    grid: {
-      x: '10%',
-      x2: '15%',
-      y: '20%',
-      y2: '20%',
-    },
   },
-  valData: [
-    { name: '耿马', value: 40, type: '个体户', seriesType: 'bar', stack: '耿马' },
-    { name: '耿马', value: 30, type: '村集体', seriesType: 'bar', stack: '耿马' },
-    { name: '耿马', value: 100, type: '合作社', seriesType: 'bar', stack: '耿马' },
-    { name: '耿马', value: 60, type: '经营企业', seriesType: 'bar', stack: '耿马', itemStyle: { borderRadius: [8, 8, 0, 0] } },
-    { name: '耿马', value: 10, type: '趋势', seriesType: 'line' },
-    { name: '大香乡', value: 20, type: '个体户', seriesType: 'bar', stack: '大香乡' },
-    { name: '大香乡', value: 20, type: '村集体', seriesType: 'bar', stack: '大香乡' },
-    { name: '大香乡', value: 80, type: '合作社', seriesType: 'bar', stack: '大香乡' },
-    { name: '大香乡', value: 40, type: '经营企业', seriesType: 'bar', stack: '大香乡', itemStyle: { borderRadius: [8, 8, 0, 0] } },
-    { name: '大香乡', value: 50, type: '趋势', seriesType: 'line' },
-  ],
 });
-
-onMounted(() => {});
 </script>
-<style lang="scss" scoped>
-.entities-statistics {
-  height: 100%;
-}
-</style>
diff --git a/src/views/entities/index.vue b/src/views/entities/index.vue
index 9b68ef8..3c6ec90 100644
--- a/src/views/entities/index.vue
+++ b/src/views/entities/index.vue
@@ -1,57 +1,55 @@
 <template>
-  <div class="data-home-index">
-    <el-row style="width: 100%; height: 100%">
-      <el-col :span="6" class="left-charts">
-        <div class="left-charts-item">
-          <customBack top-title="生产经营主体类别统计" :top-postion="'left'">
-            <template #back>
-              <entitiesCategoryCharts></entitiesCategoryCharts>
-            </template>
-          </customBack>
-        </div>
-        <div class="left-charts-item">
-          <customBack top-title="各乡镇经营主体统计" :top-postion="'left'">
-            <template #back>
-              <entitiesStatistics></entitiesStatistics>
-            </template>
-          </customBack>
-        </div>
-        <div class="left-charts-item">
-          <customBack top-title="生产经营主体信息" :top-postion="'left'">
-            <template #back>
-              <entitieslist></entitieslist>
-            </template>
-          </customBack>
-        </div>
-      </el-col>
-      <el-col :span="12">
-        <centerMap></centerMap>
-      </el-col>
-      <el-col :span="6" class="right-charts">
-        <div class="right-charts-item">
-          <customBack top-title="经营类目统计" :top-postion="'right'">
-            <template #back>
-              <categoryCharts></categoryCharts>
-            </template>
-          </customBack>
-        </div>
-        <div class="right-charts-item">
-          <customBack top-title="类目效益统计(亿元)" :top-postion="'right'">
-            <template #back>
-              <benefitCharts></benefitCharts>
-            </template>
-          </customBack>
-        </div>
-        <div class="right-charts-item">
-          <customBack top-title="热门产品" :top-postion="'right'">
-            <template #back>
-              <hotCharts></hotCharts>
-            </template>
-          </customBack>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
+  <el-row class="data-home-index">
+    <el-col :span="6" class="left-charts">
+      <div class="left-charts-item">
+        <customBack top-title="全县历年产值对比" :top-postion="'left'">
+          <template #back>
+            <entitiesCategoryCharts></entitiesCategoryCharts>
+          </template>
+        </customBack>
+      </div>
+      <div class="left-charts-item">
+        <customBack top-title="全县各作物产值对比" :top-postion="'left'">
+          <template #back>
+            <entitiesStatistics></entitiesStatistics>
+          </template>
+        </customBack>
+      </div>
+      <div class="left-charts-item">
+        <customBack top-title="全县作物产量对比" :top-postion="'left'">
+          <template #back>
+            <entitiesStatistics></entitiesStatistics>
+          </template>
+        </customBack>
+      </div>
+    </el-col>
+    <el-col :span="12">
+      <centerMap></centerMap>
+    </el-col>
+    <el-col :span="6" class="right-charts">
+      <div class="right-charts-item">
+        <customBack top-title="经营主体产值对比" :top-postion="'right'">
+          <template #back>
+            <categoryCharts></categoryCharts>
+          </template>
+        </customBack>
+      </div>
+      <div class="right-charts-item">
+        <customBack top-title="作物市场价格" :top-postion="'right'">
+          <template #back>
+            <benefitCharts></benefitCharts>
+          </template>
+        </customBack>
+      </div>
+      <div class="right-charts-item">
+        <customBack top-title="作物品质情况" :top-postion="'right'">
+          <template #back>
+            <hotCharts></hotCharts>
+          </template>
+        </customBack>
+      </div>
+    </el-col>
+  </el-row>
 </template>
 <script setup>
 import centerMap from '@/components/centerMap.vue';
@@ -64,6 +62,8 @@ import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {
+  width: 100%;
+  height: 100%;
   .left-charts {
     display: flex;
     justify-content: space-around;