init

src/components/chartCard.vue

@@ -0,0 +1,226 @@
+<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 } 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 = [], 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: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二'],
+                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 sevenData = ''
+        let sevenDataTime = ''
+        if (chartType.value == 1) {
+            // 收益
+            const res1 = await getChartData(4, props.userId)
+            const res2 = await getChartData(2, props.userId)
+            yearData = res1.map(item => item.price)
+            sevenData = res2.map(item => item.price)
+            sevenDataTime = res2.map(item => dayjs(item.times).format('MM/DD'))
+        } else {
+            // 流水
+            const res1 = await getChartData(3, props.userId)
+            const res2 = await getChartData(1, props.userId)
+            yearData = res1.map(item => item.consumeFee)
+            sevenData = res2.map(item => item.consumeFee)
+            sevenDataTime = res2.map(item => dayjs(item.times).format('MM/DD'))
+        }
+        initDeicount(yearData, sevenData, sevenDataTime)
+        chartLoading.value = false
+    } catch (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>