合并冲突处理

生产经营主体页面调整
2025-05-22 14:59:20 +08:00 · 2025-05-22 14:54:50 +08:00
6 changed files with 157 additions and 70 deletions
--- a/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue
+++ b/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue
@ -2,8 +2,8 @@
  <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script>
-import { ref, reactive, watchEffect } from 'vue';
-import { cloneDeep } from 'lodash';
+import { ref, reactive, watchEffect, toRefs } from 'vue';
+import { merge, cloneDeep } from 'lodash';
 import { useEcharts } from '@/hooks/useEcharts';
 export default {
  name: 'CustomEchartBar',
@ -33,12 +33,16 @@ export default {
      type: Boolean,
      default: false,
    },
+    showMarkPoint: {
+      type: Boolean,
+      default: false,
+    },
  },
  emits: ['click'],
  setup(props, { emit }) {
    const chartRef = ref(null);
    const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
-    const option = reactive({
+    let option = reactive({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
@ -63,6 +67,10 @@ export default {
        type: 'value',
      },
      series: [],
+      isHorizontal: {
+        type: Boolean,
+        default: false,
+      },
    });

    watchEffect(() => {
@ -92,15 +100,24 @@ export default {
        if (props.option?.color) {
          obj.color = props.option?.color[index];
        }
+        if (props.option.series && props.option.series.length > 0) {
+          obj.stack = props.option.series[index].stack ? props.option.series[index].stack : '';
+        }
        seriesData.push(obj);
      });
      option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
-      option.xAxis.data = xAxisData;
+      if (props.isHorizontal) {
+        option.yAxis.data = xAxisData;
+      } else {
+        option.xAxis.data = [];
+      }
+      console.log(option);
      setOptions(option);
      startAutoPlay({
        interval: 2000,
        seriesIndex: 0,
        showTooltip: true,
+        showMarkPoint: props.showMarkPoint,
      });
      getInstance()?.off('click', onClick);
      getInstance()?.on('click', onClick);
--- a/new-digital-agriculture-screen/src/views/business/components/businessFive.vue
+++ b/new-digital-agriculture-screen/src/views/business/components/businessFive.vue
@ -23,7 +23,7 @@ const state = reactive({
    type: 'row',
    rowNum: 6,
    isAnimation: true,
-    waitTime: 12,
+    waitTime: 2,
    unit: '万元',
    sort: true,
    height: 12,
--- a/new-digital-agriculture-screen/src/views/business/components/businessOne.vue
+++ b/new-digital-agriculture-screen/src/views/business/components/businessOne.vue
@ -194,7 +194,8 @@ function getPie3D(pieData, internalDiameterRatio) {
      formatter: (name) => {
        if (state.data.length) {
          const item = state.data.filter((item) => item.name === name)[0];
-          return `${name} ${item.pieData.value}${state.option.legendSuffix ?? ''}`;
+          console.log(item);
+          return `${name} ${item.pieData.value}${state.option.legendSuffix ?? ''}` + `\n` + `${item.pieData.quantity}家`;
        }
      },
    },
@ -291,6 +292,7 @@ watch(
        return {
          name: row.name,
          value: row.value,
+          quantity: row.quantity,
        };
      });
      initData(pieData);
--- a/new-digital-agriculture-screen/src/views/business/components/businessThere.vue
+++ b/new-digital-agriculture-screen/src/views/business/components/businessThere.vue
@ -1,9 +1,9 @@
 <template>
-  <custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
+  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" :is-horizontal="true" :show-mark-point="false" />
 </template>
 <script setup>
 import { reactive, watch } from 'vue';
-import { isEmpty } from '@/utils';
+import * as echarts from 'echarts';

 const props = defineProps({
  data: {
@ -11,69 +11,136 @@ const props = defineProps({
    default: () => [],
  },
 });
+const rawData = [
+  { name: '勐撒镇', type: '农户', value: 150 },
+  { name: '勐撒镇', type: '企业/合作社', value: 300 },
+
+  { name: '勐永镇', type: '农户', value: 280 },
+  { name: '勐永镇', type: '企业/合作社', value: 200 },
+
+  { name: '孟定镇', type: '农户', value: 250 },
+  { name: '孟定镇', type: '企业/合作社', value: 240 },
+
+  { name: '大兴乡', type: '农户', value: 170 },
+  { name: '大兴乡', type: '企业/合作社', value: 140 },
+
+  { name: '耿马镇', type: '农户', value: 260 },
+  { name: '耿马镇', type: '企业/合作社', value: 230 },
+];
+
+const towns = ['勐撒镇', '勐永镇', '孟定镇', '大兴乡', '耿马镇'];
+const types = ['农户', '企业/合作社'];
+const colors = [
+  // 蓝色渐变
+  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+    { offset: 0, color: 'rgba(53,208,192,0.2)' },
+    { offset: 1, color: '#35d0c0' },
+  ]),
+  // 绿色渐变
+  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+    { offset: 0, color: 'rgba(21,235,144,0.2)' }, // 起始颜色
+    { offset: 1, color: '#15EB90' }, // 结束颜色
+  ]),
+  // 黄色渐变
+  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+    { offset: 0, color: '#F3F70F' },
+    { offset: 1, color: '#D4D70A' },
+  ]),
+];
+
+const series = types.map((type, idx) => {
+  return {
+    name: type,
+    type: 'bar',
+    barWidth: 16,
+    stack: 'total',
+    barGap: '0%', // 强制堆叠布局
+    itemStyle: {
+      color: colors[idx],
+      barBorderRadius: 8,
+      shadowColor: colors[idx],
+      // shadowBlur: 8,
+      shadowOffsetY: -16,
+    },
+    label: {
+      // 添加标签配置
+      show: true,
+      position: 'inside',
+      color: '#000', // 黑色文字确保可见
+      backgroundColor: 'rgba(255,255,255,0.7)', // 白色背景
+      padding: [2, 4],
+      borderRadius: 4,
+      formatter: '{@value}万亩',
+      z: 100,
+    },
+    emphasis: {
+      focus: 'series',
+    },
+    z: 100 - idx,
+    data: towns.map((town) => {
+      const found = rawData.find((d) => d.name === town && d.type === type);
+      return found ? found.value : 0;
+    }),
+  };
+});
+console.log(series);

 const state = reactive({
+  data: rawData,
  option: {
-    color: ['#35D0C0'],
+    legend: {
+      data: types,
+      textStyle: {
+        color: '#ccc',
+      },
+    },
    grid: {
-      left: '5%',
-      right: '5%',
+      top: '15%',
+      left: '3%',
+      right: '10%',
      bottom: '5%',
-      top: '10%',
      containLabel: true,
    },
+    xAxis: {
+      type: 'value', // 数值轴（横向条形图的长度）
+      axisLine: { lineStyle: { opacity: 1, width: 0 } },
+      axisTick: { show: false },
+      axisLabel: {
+        margin: 8,
+        formatter: (value) => `${value}万亩`, // X轴也显示万亩单位
+      },
+    },
+    yAxis: {
+      type: 'category', // 分类轴（横向条形图的标签）
+      data: towns, // 分类数据放在 yAxis
+      axisTick: { show: false }, // 隐藏刻度线
+    },
+    color: colors,
+    series,
    tooltip: {
+      show: false,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
-      // tooltip样式调整添加这个类名
-      className: 'custom-tooltip-container', // 自定义父容器类名
-      backgroundColor: 'rgba(0,0,0,0.5)',
+      backgroundColor: 'rgba(0,0,0,0.6);',
      borderColor: '#35d0c0',
-      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: '',
+      borderRadius: 8,
+      formatter: (params) => `
+      <div style="font-weight:700;margin-bottom:5px;color:#fff;font-size: 16px;">${params[0].name}</div>
+      ${params
+        .map(
+          (p) => `
+        <div style="display:flex;align-items:center;margin:3px 0;color:#fff">
+          <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${p.color};margin-right:6px;color:#fff"></span>
+          ${p.seriesName}: <span style="font-weight:bold;margin-left:5px;color:#fff">${p.value} 吨</span>
+        </div>
+      `
+        )
+        .join('')}
+    `,
+      extraCssText: 'backdrop-filter: blur(8px);',
    },
  },
-  data: [],
 });
-
-watch(
-  () => props.data,
-  (val) => {
-    if (!isEmpty(val)) {
-      state.data = val;
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
 </script>
--- a/new-digital-agriculture-screen/src/views/business/components/businessTwo.vue
+++ b/new-digital-agriculture-screen/src/views/business/components/businessTwo.vue
@ -1,5 +1,5 @@
 <template>
-  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
+  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" :show-mark-point="true" />
 </template>
 <script setup>
 import { reactive, watch } from 'vue';
@ -26,6 +26,7 @@ const state = reactive({
      containLabel: true,
    },
    tooltip: {
+      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
@ -38,7 +39,7 @@ const state = reactive({
        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>
        </div>`;
        return str;
      },
@ -56,7 +57,7 @@ const state = reactive({
        y2: 1,
        colorStops: [
          { offset: 0, color: '#35D0C0' },
-          { offset: 1, color: '#35D0C0' },
+          { offset: 1, color: 'rgba(53,208,192,0.2)' },
        ],
        global: false,
      },
--- a/new-digital-agriculture-screen/src/views/business/index.vue
+++ b/new-digital-agriculture-screen/src/views/business/index.vue
@ -100,11 +100,11 @@ const loadData = async () => {
  await sleep(500);
  state.data = {
    one: [
-      { value: 13.8, name: '农企/合作社' },
-      { value: 23.8, name: '农资企业' },
-      { value: 24.1, name: '种源企业' },
-      { value: 29.8, name: '生产加工企业' },
-      { value: 8.5, name: '农户' },
+      { value: 13.8, name: '农企/合作社', quantity: 202 },
+      // { value: 23.8, name: '农资企业' },
+      // { value: 24.1, name: '种源企业' },
+      // { value: 29.8, name: '生产加工企业' },
+      { value: 8.5, name: '农户', quantity: 180 },
    ],
    two: [
      { name: '耿马镇', value: 870 },
@ -117,11 +117,11 @@ const loadData = async () => {
      { name: '芒洪乡', value: 682 },
    ],
    there: [
-      { value: 66, name: '2021' },
-      { value: 100, name: '2022' },
-      { value: 50, name: '2023' },
-      { value: 150, name: '2024' },
-      { value: 80, name: '2025' },
+      { name: '耿马镇', value: 870, value2: 455 },
+      { name: '勐撒镇', value: 603, value2: 555 },
+      { name: '勐永镇', value: 854, value2: 322 },
+      { name: '孟定镇', value: 635, value2: 298 },
+      { name: '大兴乡', value: 795, value2: 382 },
    ],
    four: {
      percent: 0.3998,
Author	SHA1	Message	Date
2090205686@qq.com	79ac695e43	合并冲突处理	2025-05-22 14:59:20 +08:00
2090205686@qq.com	f609ab304c	生产经营主体页面调整	2025-05-22 14:54:50 +08:00