字体

hejianhao

2025-03-24 4223c358f1ad9ffa4fcbc8fb0e350dc5bf342b51

 src/components/datascreen/RightPanel.vue

@@ -71,7 +71,7 @@
    <div class="panel-item bottom-panel-item">
      <div class="box-title">各季度应补偿金额</div>
      <div class="pie-chart">
        <v-chart class="chart" :option="typeDistOption" autoresize />
        <v-chart class="chart" :option="barOption" autoresize />
      </div>
    </div>
  </div>
@@ -82,7 +82,13 @@
import "echarts-gl";

export default {
  name: "RightPanel",
  name: 'RightPanel',
  props: {
    data: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    const houseTypeData = [
      {
@@ -119,6 +125,7 @@
      houseTypeData,
      currentType: houseTypeData[0],
      total: null,
      barOption: {},
      twoEcharts: [
        {
          name: "首付款",
@@ -167,11 +174,133 @@
    this.$nextTick(() => {
      this.init();
      this.initCompensationOption(this.twoEcharts);
      this.initBarChart();
    });
  },
  methods: {
    changeCurrentType(type) {
      this.currentType = type;
    },
    initBarChart() {
      if (!this.data.quarterPayResponses || !this.data.quarterPayResponses[0]) return;

      const sortedData = Object.entries(this.data.quarterPayResponses[0])
        .sort((a, b) => {
          const dateA = new Date(a[0].replace('-', '/'));
          const dateB = new Date(b[0].replace('-', '/'));
          return dateA - dateB;
        });

      const maxValue = Math.max(...sortedData.map(item => item[1]));
      const yAxisMax = Math.ceil(maxValue / 100) * 100;

      this.barOption = {
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            const dataParams = params[1];
            // 获取当前柱子的颜色（取渐变色的起始色）
            let color;
            if (dataParams.dataIndex === 0) {
              color = '#FFEF00';
            } else if (dataParams.dataIndex === 1) {
              color = '#00FFC3';
            } else if (dataParams.dataIndex === 2) {
              color = '#00DBFF';
            } else {
              color = '#057BFF';
            }
            return `${dataParams.name}<br/><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background-color:${color};margin-right:6px;"></span>${dataParams.value}`;
          },
          backgroundColor: '#ffffff',
          borderWidth: 1,
          textStyle: {
            color: '#333333',
            fontSize: 14
          },
          padding: [8, 12]
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: sortedData.map(item => item[0]),
          axisLine: {
            lineStyle: {
              color: 'rgba(30, 44, 88, 1)'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          max: yAxisMax,
          splitNumber: 4,
          axisLabel: {
            color: 'rgba(88, 115, 150, 1)',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 44, 88, 1)'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: '30%',
            z: 1,
            data: Array(sortedData.length).fill(yAxisMax),
            itemStyle: {
              color: 'rgba(0, 255, 255, 0.1)'
            }
          },
          {
            type: 'pictorialBar',
            symbol: 'roundRect',
            symbolSize: [20, 6],
            symbolRepeat: 'fixed',
            symbolMargin: 1,
            symbolClip: true,
            symbolPosition: 'start',
            symbolOffset: [0, 0],
            symbolBoundingData: yAxisMax,
            z: 2,
            data: sortedData.map((item, index) => ({
              value: item[1],
              itemStyle: {
                color: index === 0 ? new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#FFEF00' },
                  { offset: 0.5, color: '#C86A01' },
                  { offset: 1, color: '#402303' }
                ]) : index === 1 ? new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#00FFC3' },
                  { offset: 1, color: '#008570' }
                ]) : index === 2 ? new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#00DBFF' },
                  { offset: 1, color: '#0093A8' }
                ]) : new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#05DBFF' },
                  { offset: 0.5, color: '#057BFF' },
                  { offset: 1, color: '#030E3F' }
                ])
              }
            }))
          }
        ]
      };
    },
    init() {
      const chartDom = this.$refs.cityGreenLandCharts;
@@ -789,6 +918,7 @@
          }

          .item-name {
            font-family: 'pangmenzhengdao';
            width: 100px;
            color: #fff;
            font-weight: 500;
@@ -912,4 +1042,8 @@
    }
  }
}

.pie-chart {
  height: calc(100% - 35px);
}
</style>