1.首页开发联调

gaoluyang

5 天以前 50478b84da86ef020c2fcb6de2855644a95fee10

1.首页开发联调

 src/api/viewIndex.js

@@ -25,21 +25,28 @@
// 客户合同金额TOP5统计
export const getTopFiveList = () => {
    return request({
        url: 'sales/ledger/getTopFiveList',
        url: '/sales/ledger/getTopFiveList',
        method: 'get'
    })
}
// 回款饼状图
export const getAmountMouth = () => {
    return request({
        url: 'receiptPayment/getAmountMouth',
        url: '/receiptPayment/getAmountMouth',
        method: 'get'
    })
}
// 回款饼状图
// 付款饼状图
export const paymentMonthList = () => {
    return request({
        url: '/purchase/paymentRegistration/paymentMonthList',
        method: 'get'
    })
}
// 线形图
export const getAmountHalfYear = () => {
    return request({
        url: '/sales/ledger/getAmountHalfYear',
        method: 'get'
    })
}

 src/views/index.vue

@@ -112,7 +112,7 @@
                     :grid="grid"

                     :legend="barLegend"

                     :series="lineSeries"

                     :tooltip="tooltip"

                     :tooltip="tooltipLine"

                     :xAxis="xAxis2"

                     :yAxis="yAxis2"

                     style="height: 27vh;"></Echarts>

@@ -128,6 +128,7 @@
import * as echarts from 'echarts';

import Echarts from "@/components/Echarts/echarts.vue";

import {

  getAmountHalfYear,

  getAmountMouth,

  getContractAmount,

  getInvoiceAmount,

@@ -232,6 +233,9 @@
    type: 'shadow'

  }

}

const tooltipLine = {

  trigger: 'axis',

}

const yAxis1 = ref([

  {

    type: 'value',

@@ -313,26 +317,22 @@
    materialPieSeries1.value[0].data[1].value = payableAmount.value

  })

}

// 客户

// 客户top5

const getTopFiveListNum = async () => {

  const res = await getTopFiveList()

  
  const customerName = []

  const totalAmount = []

  
  res.data.forEach(item => {

    customerName.push(item.customerName)

    totalAmount.push(item.totalAmount)

  })



// ✅ 正确响应式赋值：创建新的 xAxis 和 series 对象

// 正确响应式赋值：创建新的 xAxis 和 series 对象

  xAxis1.value = [

    {

      type: 'category',

      data: customerName

    }

  ]

  
  barSeries.value = [

    {

      type: 'bar',

@@ -353,12 +353,97 @@
    }

  ]

}

// 线形图

const getAmountHalfYearNum = async () => {

  const res = await getAmountHalfYear()

  console.log(res)

  const monthName = []

  const receiptAmount = []

  const invoiceAmount = []

  res.data.forEach(item => {

    monthName.push(item.month)

    receiptAmount.push(item.receiptAmount)

    invoiceAmount.push(item.invoiceAmount)

  })

// 正确响应式赋值：创建新的 xAxis 和 series 对象

  xAxis2.value = [

    {

      type: 'category',

      data: monthName

    }

  ]

  lineSeries.value = [

    {

      name: '开票',

      type: 'line',

      data: receiptAmount,

      smooth: true,

      stack: 'Total',

      areaStyle: {

        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

          {

            offset: 0,

            color: 'rgba(131, 207, 255, 1)'

          },

          {

            offset: 1,

            color: 'rgba(186, 228, 255, 1)'

          }

        ])

      },

      // 设置小圆点的颜色

      itemStyle: {

        color: '#2D99FF', // 小圆点颜色设置为#2D99FF

        borderColor: '#2D99FF' // 如果需要的话，可以设置边框颜色

      },

      emphasis: {

        focus: 'series'

      },

      lineStyle: {

        width: 0

      },

      showSymbol: false,

    },

    {

      name: '回款',

      type: 'line',

      data: invoiceAmount,

      smooth: true,

      stack: 'Total',

      lineStyle: {

        width: 0

      },

      // 设置小圆点的颜色

      itemStyle: {

        color: '#83CFFF', // 小圆点颜色设置为#83CFFF

        borderColor: '#83CFFF' // 如果需要的话，可以设置边框颜色

      },

      showSymbol: false,

      areaStyle: {

        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

          {

            offset: 0,

            color: 'rgba(54, 153, 255, 1)'

          },

          {

            offset: 1,

            color: 'rgba(89, 169, 254, 1)'

          }

        ])

      },

      emphasis: {

        focus: 'series'

      },

    }

  ]

}

getContractAmountNum()

getInvoiceAmountNum()

getReceiptAmountNum()

getTopFiveListNum()

getAmountMouthNum()

paymentMonthListNum()

getAmountHalfYearNum()

</script>



<style scoped>