xh-client-background/src/views/qyjydtfx/ssfx/index.vue

<script setup>
import request from "@/utils/request.js";
// 引入ECharts
import * as echarts from 'echarts';
import { ref, onMounted, watch } from 'vue';

const getData = async () => {
  const res = await request.get('/basicData/xcrPayTaxes/of-year-list');
  // 处理数据并更新图表
  updateChart(res.data.ofYearDetail, 'year');
}

const selectedQuarter = ref('1'); // 默认选择第一个季度

const getQuarterData = async () => {
  console.log(selectedQuarter.value);
  const res = await request.get('/basicData/xcrPayTaxes/of-quarter-list', {
    params: {
      quarter: selectedQuarter.value // 使用选中的季度
    }
  });
  // 处理数据并更新图表
  updateChart(res.data.ofQuarterDetail, 'quarter');
}

let yearChartInstance = null;
let quarterChartInstance = null;

const updateChart = (data, type) => {
  if (type === 'year') {
    if (!yearChartInstance) {
      yearChartInstance = echarts.init(document.getElementById('yearChart'));
    }
  } else if (type === 'quarter') {
    if (!quarterChartInstance) {
      quarterChartInstance = echarts.init(document.getElementById('quarterChart'));
    }
  }

  // 处理数据
  const taxpayerNames = data.map(item => item.taxpayerName);
  const lastYearTaxes = data.map(item => item[type === 'year' ? 'lastYearTaxesTotal' : 'lastYearOfQuarterTaxesTotal']);
  const thisYearTaxes = data.map(item => item[type === 'year' ? 'thisYearTaxesTotal' : 'thisYearOfQuarterTaxesTotal']);

  // 设置图表配置
  const option = {
    title: {
      text: type === 'year' ? '年度税收对比' : '季度税收对比'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['去年税收', '今年税收']
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: taxpayerNames
    },
    series: [
      {
        name: '去年税收',
        type: 'bar',
        data: lastYearTaxes,
      },
      {
        name: '今年税收',
        type: 'bar',
        data: thisYearTaxes,
      }
    ],
    dataZoom: [{ // 这是一个 dataZoom 组件，可以控制 x 轴或 y 轴的区域缩放
      type: 'inside', // 这里设置为 slider 类型，表示使用滑动条形式的 dataZoom 组件
      yAxisIndex: 0, // 表示这个 dataZoom 组件控制第一个 y 轴
      start: 100, // 数据窗口范围的起始百分比, 表示从10%的位置开始显示
      end: 99, // 数据窗口范围的结束百分比, 表示到60%的位置结束
      moveOnMouseWheel: true, // 启用滚轮滚动
      moveOnMouseMove: false,
      zoomOnMouseWheel: false,
    }]
  };

  // 更新图表数据
  if (type === 'year') {
    yearChartInstance.setOption(option);
  } else if (type === 'quarter') {
    quarterChartInstance.setOption(option);
  }
}

const activeTab = ref('year'); // 添加一个变量来记录当前激活的tab

onMounted(() => {
  getData();
  getQuarterData();
})

watch(selectedQuarter, () => {
  getQuarterData(); // 当季度选择改变时，重新获取数据
})

// 添加tab-change事件监听
const handleTabChange = (tab) => {
  if (tab.props.label === '年度税收对比') {
    getData();
  } else if (tab.props.label === '季度税收对比') {
    getQuarterData();
  }
}
</script>

<template>
  <div>
    <el-tabs @tab-change="handleTabChange">
      <el-tab-pane label="季度税收对比">
        <el-select v-model="selectedQuarter" placeholder="请选择季度">
          <el-option label="第一季度" value="1"></el-option>
          <el-option label="第二季度" value="2"></el-option>
          <el-option label="第三季度" value="3"></el-option>
          <el-option label="第四季度" value="4"></el-option>
        </el-select>
        <div id="quarterChart" style="width: 90vw; height: 90vh;"></div>
      </el-tab-pane>
      <el-tab-pane label="年度税收对比">
        <div id="yearChart" style="width: 90vw; height: 90vh;"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>