td_official/src/views/ProjectScreen/components/rightPage.vue

<template>
  <div class="leftPage">
    <div class="topPage">
      <Title title="项目概况" />

      <div class="content">
        <div class="content_item">项目名称：智慧生态工地社区开发项目</div>
        <div class="content_item">项目位置：贵州省贵阳市乌当区（具体地块编号：01-123-11）</div>
        <div class="content_item">占地面积：约10000亩</div>
        <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
      </div>
    </div>
    <div class="endPage">
      <!-- 饼图容器 -->
      <Title title="形象进度" />

      <div ref="pieChartRef" class="echart" />
      <!-- 折线图容器 -->
      <div ref="lineChartRef" class="echart" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from "vue"
import Title from './title.vue'
import * as echarts from 'echarts';

// 饼图相关
const pieChartRef = ref<HTMLDivElement | null>(null);
let pieChart: any = null;

// 折线图相关
const lineChartRef = ref<HTMLDivElement | null>(null);
let lineChart: any = null;

// 饼图数据
const pieData = [
  { name: '桩点浇筑', value: 13 },
  { name: '水泥灌注', value: 7 },
  { name: '箱变安装', value: 40 },
  { name: '支架安装', value: 20 },
  { name: '组件安装', value: 20 },
]

// 折线图数据
const barData = {
  xAxis: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6'],
  series: [
    {
      name: '计划流转面积',
      data: [70, 25, 45, 115, 70, 85]
    },
    {
      name: '已流转面积',
      data: [105, 30, 150, 65, 80, 200]
    }
  ]
}

// 饼图配置
const pieOption = {
  series: {
    type: 'pie',
    data: pieData,
    radius: [50, 80],
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 1
    },
    label: {
      alignTo: 'edge',
      formatter: '{name|{b}}\n{percent|{c} %}',
      minMargin: 10,
      edgeDistance: 20,
      lineHeight: 15,
      rich: {
        name: {
          fontSize: 12,
          color: '#fff'
        },
        percent: {
          fontSize: 12,
          color: '#fff'
        }
      }
    },
    legend: {
      top: 'bottom'
    },
  }
};

// 柱状图配置
const barOption = {
  legend: {
    data: ['计划流转面积', '已流转面积'],
    top: 0
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: barData.xAxis
  },
  yAxis: {
    name: '单位：m²',
    type: 'value',
    axisLabel: {
      formatter: '{value}'
    }
  },
  series: [
    {
      type: 'bar',
      data: [], // 空数据，仅用于承载markArea
      markArea: {
        silent: true, // 背景不响应交互
        data: (() => {
          const groupCount = 3; // 共3组（6个月 ÷ 2）
          const groupWidth = 1.8; // 每组背景宽度（覆盖2根柱子）
          const bgData = [];

          for (let i = 0; i < groupCount; i++) {
            const startX = i * 2 - 0.9; // 每组起始位置
            const endX = startX + groupWidth; // 每组结束位置
            bgData.push([
              { xAxis: startX, yAxis: 0 },
              { xAxis: endX, yAxis: 100 }
            ]);
          }
          return bgData;
        })(),
        itemStyle: {
          color: 'rgba(255, 255, 255, 0.05)',
          borderRadius: 4
        }
      }
    },
    {
      name: '计划流转面积',
      type: 'bar',
      data: barData.series[0].data,
      barWidth: 15, // 柱形宽度
      itemStyle: {
        color: 'rgb(29, 253, 253)'
      },
    },
    {
      name: '已流转面积',
      type: 'bar',
      data: barData.series[1].data,
      barWidth: 15,
      itemStyle: {
        color: '#rgb(25, 181, 251)'
      },
    }
  ]
};

// 初始化饼图
const initPieChart = () => {
  if (!pieChartRef.value) {
    console.error('未找到饼图容器元素');
    return;
  }
  pieChart = echarts.init(pieChartRef.value, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  pieChart.setOption(pieOption);
}

// 初始化折线图
const initLineChart = () => {
  if (!lineChartRef.value) {
    console.error('未找到折线图容器元素');
    return;
  }
  lineChart = echarts.init(lineChartRef.value, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  lineChart.setOption(barOption);
}

// 响应窗口大小变化
const handleResize = () => {
  if (pieChart) pieChart.resize();
  if (lineChart) lineChart.resize();
};

// 组件挂载时初始化图表
onMounted(() => {
  nextTick(() => {
    initPieChart();
    initLineChart();
    window.addEventListener('resize', handleResize);
  });
});

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  if (pieChart) {
    pieChart.dispose();
    pieChart = null;
  }
  if (lineChart) {
    lineChart.dispose();
    lineChart = null;
  }
});
</script>

<style scoped lang="scss">
.leftPage {
  display: flex;
  flex-direction: column;
  width: calc(25vw - 30px);
  margin: 0 15px;
  height: 100%;

  .topPage,
  .endPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 15px 0;
    border: 1px solid rgba(29, 214, 255, 0.1);
    box-sizing: border-box;
  }

  .endPage {
    flex: 1;
    margin-top: 23px;

    .echart {
      width: 100%;
      height: 100%;
    }
  }
}

.content {
  margin: 10px 35px;

  .content_item {
    font-size: 14px;
    font-weight: 400;
    color: rgba(230, 247, 255, 1);
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.ellipse {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subfont {
  color: rgba(138, 149, 165, 1);
}
</style>