organization-manage/src/components/chartCard.vue

<template>
    <div class="chart_header">
        <div class="item" :class="{ active1: chartType == 1 }" @click="chartTypeChange(1)">
            <div class="icon"></div>
            <span>收益</span>
        </div>
        <div class="item" :class="{ active2: chartType == 2 }" @click="chartTypeChange(2)">
            <div class="icon"></div>
            <span>流水</span>
        </div>
    </div>
    <div class="chart_wrap" v-loading="chartLoading">
        <div ref="lineRef1" class="item" style="height: 600px;"></div>
        <div ref="lineRef2" class="item" style="height: 600px;"></div>
    </div>
</template>

<script setup>
import { getChartData,agentamount } from '@/api/home.js'
import * as echarts from "echarts"
import { dayjs } from 'element-plus'
import hooks from '@/hooks'

// 定义变量内容
const lineRef1 = ref();
const lineRef2 = ref();
const chartsObj = {
    lineRef1: '',
    lineRef2: '',
    myCharts: [],
};

const chartLoading = ref(true)
const chartType = ref(1)
const chartYear = ref(dayjs().format('YYYY'))
const props = defineProps({
    userId: {
        type: [String, Number],
        default: hooks.useLocalStorage.get('userInfo').userId
    }
})

// 初始化折线图
function initDeicount(yearData = [], yearDataTime = [], sevenData = [], sevenDataTime = []) {
    if (!chartsObj.lineRef1 && !chartsObj.lineRef2) {
        chartsObj.lineRef1 = echarts.init(lineRef1.value);
        chartsObj.lineRef2 = echarts.init(lineRef2.value);
    }
    const option1 = {
        title: {
            text: chartType.value == 1 ? '年度收益' : '年度流水',
            x: 'center',
            y: '95%'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [
            {
                type: 'category',
                data: yearDataTime,
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    interval: 0
                }
            }
        ],
        yAxis: {
            type: "value"
        },
        series: [
            {
                type: 'bar',
                data: yearData,
                barWidth: '20',
                itemStyle: {
                    color: chartType.value == 1 ? '#5470C6' : '#91CB75'
                }
            }
        ]
    };
    const option2 = {
        title: {
            text: chartType.value == 1 ? '七日收益' : '七日流水',
            x: 'center',
            y: '95%'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: "category",
            data: sevenDataTime
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                type: "line",
                data: sevenData,
                itemStyle: {
                    color: chartType.value == 1 ? '#5470C6' : '#91CB75'
                }
            }
        ]
    };
    chartsObj.lineRef1.setOption(option1)
    chartsObj.lineRef2.setOption(option2)
    chartsObj.myCharts.push(chartsObj.lineRef1)
    chartsObj.myCharts.push(chartsObj.lineRef2)
}

// 改变chart类型
function chartTypeChange(t) {
    chartType.value = t
    chartLoading.value = true
    getChartDataMethod()
}

// 获取chart数据
async function getChartDataMethod() {
    try {
        let yearData = ''
        let yearDataTime = ''
        let sevenData = ''
        let sevenDataTime = ''
        if (chartType.value == 1) {
            // 收益
            const res = await getChartData()
            yearData = res.year_profit.map(item => item.profit)
            yearDataTime = res.year_profit.map(item => item.date)
            sevenData = res.m_profit.map(item => item.profit)
            sevenDataTime = res.m_profit.map(item => item.date)
        } else {
            // 流水agentamount
            const res = await agentamount()
            yearData = res.year_amount.map(item => item.amount)
            yearDataTime = res.year_amount.map(item => item.date)
            sevenData = res.m_amount.map(item => item.amount)
            sevenDataTime = res.m_amount.map(item => item.date)
        }
        initDeicount(yearData, yearDataTime, sevenData, sevenDataTime)
        chartLoading.value = false
    } catch (error) {
        console.log(error)
    }
}

// 批量设置 echarts resize
function initEChartsResize() {
    var myEvent = new Event("resize");
    window.addEventListener("resize", () => {
        nextTick(() => {
            for (let i = 0; i < chartsObj.myCharts.length; i++) {
                setTimeout(() => {
                    chartsObj.myCharts[i].resize();
                }, 1000);
            }
        });
    });
    window.dispatchEvent(myEvent);
}

onMounted(() => {
    getChartDataMethod()
})

onActivated(() => {
    initEChartsResize();
});
</script>

<style scoped lang="scss">
.chart_header {
    display: flex;
    justify-content: center;
    padding-top: 20px;

    .item {
        display: flex;
        align-items: center;

        &:last-child {
            margin-left: 20px;
        }

        &:hover {
            cursor: pointer;
        }

        &.active1 {
            .icon {
                background-color: #5470C6;
            }
        }

        &.active2 {
            .icon {
                background-color: #91CB75;
            }
        }

        .icon {
            width: 40px;
            height: 20px;
            border-radius: 2px;
            background-color: #ccc;
        }

        span {
            font-size: 14px;
            color: #999;
            margin-left: 8px;
        }
    }
}

.chart_wrap {
    display: flex;
    padding-bottom: 20px;

    .item {
        flex: 1;
    }
}
</style>