对接接口

董国庆

2025-03-25 f254a883eb2f6797b17f2eed055737e7d59a58ca

对接接口

 src/assets/echartsBg.png

 src/components/datascreen/RightPanel.vue

@@ -4,7 +4,16 @@
    <div class="panel-item top-panel-item">
      <div class="box-title">安置房类型占比</div>
      <div class="house-type-content">
        <div class="cityGreenLand-charts" ref="cityGreenLandCharts"></div>
        <div class="relative">
          <div class="cityGreenLand-charts" ref="cityGreenLandCharts"></div>
          <div class="chartBg"></div>
          <div class="chart-content">
            <div class="chart-num">{{ currentType.rate }}</div>
            <div class="chart-title">{{ currentType.type }}</div>
          </div>
          <div class="chart-black"></div>
        </div>

        <div class="right-content">
          <div class="table-header">
            <div class="header-item">数量</div>
@@ -14,21 +23,21 @@
          <div class="data-list">
            <div
              class="data-item"
              :class="{ activeItem: item.name === currentType.name }"
              :class="{ activeItem: item.type === currentType.type }"
              v-for="(item, index) in houseTypeData"
              :key="index"
              @click="changeCurrentType(item)"
            >
              <div class="item-dot" :style="{ background: item.color }"></div>
              <div class="item-name">{{ item.name }}</div>
              <div class="item-name">{{ item.type }}</div>
              <div class="item-value" :style="{ color: item.color }">
                {{ item.value }}
                {{ item.total }}
              </div>
              <div class="item-area" :style="{ color: item.color }">
                {{ item.area }}
              </div>
              <div class="item-percent" :style="{ color: item.color }">
                {{ item.percent }}
                {{ item.rate }}
              </div>
            </div>
          </div>
@@ -48,7 +57,7 @@
          ></div>
          <div class="compensation-list">
            <div class="compensation-center">
              <div class="total-value">{{ (total*1).toFixed(2) }}</div>
              <div class="total-value">{{ (total * 1).toFixed(2) }}</div>
              <div class="total-name">总额(万元)</div>
            </div>
            <div class="compensation-item">
@@ -57,8 +66,8 @@
                v-for="item in twoEcharts"
                :key="item.name"
              >
                <div class="item-name">{{ item.value }}%</div>
                <div class="item-value">{{ item.name }}</div>
                <div class="item-name">{{ item.amountRate }}</div>
                <div class="item-value">{{ item.type }}</div>
                <div class="item-dot" :style="{ background: item.color }"></div>
              </div>
            </div>
@@ -82,67 +91,20 @@
import "echarts-gl";

export default {
  name: 'RightPanel',
  name: "RightPanel",
  props: {
    data: {
      type: Object,
      default: () => { }
    }
      default: () => {},
    },
  },
  data() {
    const houseTypeData = [
      {
        name: "新建商品住房",
        value: 321,
        area: 35344,
        percent: "56.8%",
        color: "#00ffff",
      },
      {
        name: "商业用房",
        value: 321,
        area: 35344,
        percent: "34.5%",
        color: "#34D160",
      },
      {
        name: "停车位",
        value: 321,
        area: 35344,
        percent: "56.8%",
        color: "#F8B551",
      },
      {
        name: "二手住房",
        value: 321,
        area: 35344,
        percent: "56.8%",
        color: "#BF40BF",
      },
    ];

    return {
      houseTypeData,
      currentType: houseTypeData[0],
      houseTypeData: [],
      currentType: {},
      total: null,
      barOption: {},
      twoEcharts: [
        {
          name: "首付款",
          value: 78.8,
          color: "#00ffff",
        },
        {
          name: "季度款",
          value: 78.8,
          color: "#34D160",
        },
        {
          name: "过渡补贴",
          value: 78.8,
          color: "#F8B551",
        },
      ],
      twoEcharts: [],
      typeDistOption: {
        tooltip: {
          trigger: "item",
@@ -172,8 +134,8 @@
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      this.initCompensationOption(this.twoEcharts);
      this.init(this.data.placementTypeResponses);
      this.initCompensationOption(this.data.monthCompensationResponses);
      this.initBarChart();
    });
  },
@@ -182,135 +144,156 @@
      this.currentType = type;
    },
    initBarChart() {
      if (!this.data.quarterPayResponses || !this.data.quarterPayResponses[0]) return;
      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('-', '/'));
      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 maxValue = Math.max(...sortedData.map((item) => item[1]));
      const yAxisMax = Math.ceil(maxValue / 100) * 100;

      this.barOption = {
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
          trigger: "axis",
          formatter: function (params) {
            const dataParams = params[1];
            // 获取当前柱子的颜色（取渐变色的起始色）
            let color;
            if (dataParams.dataIndex === 0) {
              color = '#FFEF00';
              color = "#FFEF00";
            } else if (dataParams.dataIndex === 1) {
              color = '#00FFC3';
              color = "#00FFC3";
            } else if (dataParams.dataIndex === 2) {
              color = '#00DBFF';
              color = "#00DBFF";
            } else {
              color = '#057BFF';
              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',
          backgroundColor: "#ffffff",
          borderWidth: 1,
          textStyle: {
            color: '#333333',
            fontSize: 14
            color: "#333333",
            fontSize: 14,
          },
          padding: [8, 12]
          padding: [8, 12],
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
          top: "10%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: sortedData.map(item => item[0]),
          type: "category",
          data: sortedData.map((item) => item[0]),
          axisLine: {
            lineStyle: {
              color: 'rgba(30, 44, 88, 1)'
            }
              color: "rgba(30, 44, 88, 1)",
            },
          },
          axisTick: {
            show: false
            show: false,
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 12
          }
            color: "#ffffff",
            fontSize: 12,
          },
        },
        yAxis: {
          type: 'value',
          type: "value",
          max: yAxisMax,
          splitNumber: 4,
          axisLabel: {
            color: 'rgba(88, 115, 150, 1)',
            fontSize: 12
            color: "rgba(88, 115, 150, 1)",
            fontSize: 12,
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 44, 88, 1)'
            }
          }
              color: "rgba(30, 44, 88, 1)",
            },
          },
        },
        series: [
          {
            type: 'bar',
            barWidth: '30%',
            type: "bar",
            barWidth: "30%",
            z: 1,
            data: Array(sortedData.length).fill(yAxisMax),
            itemStyle: {
              color: 'rgba(0, 255, 255, 0.1)'
            }
              color: "rgba(0, 255, 255, 0.1)",
            },
          },
          {
            type: 'pictorialBar',
            symbol: 'roundRect',
            type: "pictorialBar",
            symbol: "roundRect",
            symbolSize: [20, 6],
            symbolRepeat: 'fixed',
            symbolRepeat: "fixed",
            symbolMargin: 1,
            symbolClip: true,
            symbolPosition: 'start',
            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' }
                ])
              }
            }))
          }
        ]
                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() {
    init(data) {
      if (!data || data.length == 0) {
        this.houseTypeData = [];
        this.currentType = {};
        return;
      }
      const chartDom = this.$refs.cityGreenLandCharts;
      if (!chartDom) return;

      const myChart = echarts.init(chartDom);

      let colors = ["#286DF7ee", "#04F7FDee", "#E23AA9ee", "#FFC852ee"];
      let xData = ["第一产业", "第二产业", "第三产业", "城乡居民生活用电"];
      let yData = [25, 25, 25, 25];
      this.houseTypeData = data.map((item, index) => {
        return {
          ...item,
          color: colors[index],
        };
      });
      this.currentType = this.houseTypeData[0];
      let xData = data.map((item) => item.type);
      let yData = data.map((item) => item.total);
      // 传入数据生成 option
      let optionsData = [];
      for (let i = 0; i < xData.length; i++) {
@@ -362,7 +345,7 @@
        },
        grid3D: {
          show: false,
          boxHeight: 0.5,
          boxHeight: 1,
          bottom: "50%",
          viewControl: {
            distance: 280,
@@ -455,7 +438,7 @@
          if (u > Math.PI * 2.5) {
            return Math.sin(u);
          }
          return Math.sin(v) > 0 ? 2 * height : -1;
          return Math.sin(v) > 0 ? 27 : -1; //柱状体高度
        },
      };
    },
@@ -560,7 +543,7 @@
          show: false,
        },
        itemStyle: {
          opacity: 0.1,
          opacity: 0.05,
          color: "#0ff",
        },
        parametricEquation: {
@@ -587,8 +570,30 @@
      });
      return series;
    },
    // 随机颜色
    getRandomColor() {
      const letters = "0123456789ABCDEF";
      let color = "#";
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },

    initCompensationOption(data) {
      if (!data || !data.length) {
        this.twoEcharts = [];
        return;
      }
      let list = ["#00ffff", "#34D160", "#F8B551"];
      data = data.map((item, index) => {
        return {
          ...item,
          color: list[index],
        };
      });
      this.twoEcharts = data || [];

      const chartDom = this.$refs.compensationCharts;
      if (!chartDom) return;

@@ -641,16 +646,16 @@
      let total = 0;
      let arr = [];
      for (let i = 0; i < data.length; i++) {
        max = Math.max(max, data[i].value);
        total += data[i].value;
        max = Math.max(max, data[i].amount);
        total += data[i].amount;
        arr.push({
          value: data[i].value,
          value: data[i].amount,
          itemStyle: { color: data[i].color },
        });
      }
      this.total = total;
      option.angleAxis.max = total;
      option.radiusAxis.data = data.map((item) => item.name);
      option.radiusAxis.data = data.map((item) => item.type);
      option.series.data = arr;

      chartCompensation.setOption(option);
@@ -717,6 +722,57 @@
    height: calc(100% - 30px);
    display: flex;
    padding: 10px 13px;
    .relative {
      position: relative;

      .chartBg {
        position: absolute;
        width: 100%;
        height: 58%;
        top: 56px;
        left: 0px;
        background: url("@/assets/echartsBg.png") no-repeat center center;
        background-size: 100% 100%;
      }
      .chart-content {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 99;
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        .chart-num {
          height: 20px;
          font-family: "pangmenzhengdao";
          font-size: 20px;
          color: #ffffff;
          text-shadow: 0px 2px 4px #40a9ff;
        }
        .chart-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          margin-top: 23px;
          margin-bottom: 60px;
        }
      }
      .chart-black {
        position: absolute;
    left: 55px;
    top: 86px;
    height: 12%;
    width: 35%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 28px / 10px;
    padding-top: 17px;
      }
    }

    .pie-chart {
      position: relative;
@@ -918,7 +974,7 @@
          }

          .item-name {
            font-family: 'pangmenzhengdao';
            font-family: "pangmenzhengdao";
            width: 100px;
            color: #fff;
            font-weight: 500;