ads_web/src/views/adManage/sb/campaigns/chartComponents/dataTendency.vue

<template>
    <div v-loading="loading">
        <MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric"></MetricsCards>
        <div style="height: 350px;" ref="chartRef"></div>
    </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, onBeforeUnmount, Ref, onBeforeMount, watch, computed} from 'vue'
import * as echarts from 'echarts'
import {useShopInfo} from '/@/stores/shopInfo'
import {getLineData, getCardData} from '../api'
import {spCampaignMetricsEnum} from '/@/views/adManage/utils/enum.js'
import MetricsCards from '/@/components/MetricsCards/index.vue'
import XEUtils from 'xe-utils'
import {buildChartOpt} from '/@/views/adManage/utils/tools.js'
import {usePublicData} from '/@/stores/publicData'
import {storeToRefs} from 'pinia'

defineOptions({
    name: 'DataTendencyChart'
})

onMounted(() => {
    getMetricsItems()
    addResize()
    // initLine()
    setTimeout(() => {
        initLine()
    }, 0)
})
onBeforeUnmount(() => {
    if (chartObj) {
        chartObj.dispose()
        chartObj = null
    }
    removeResize()
})

const publicData = usePublicData()
const metrics = ref([
    {metric: 'Impression', color: '#0085ff', 'label': '曝光量'},
    {metric: 'Click', color: '#3fd4cf', 'label': '点击量'},
    {metric: 'Spend', color: '#ff9500', 'label': '花费'},
])
const shopInfo = useShopInfo()
const metricsItems: Ref<MetricData[]> = ref([])
let chartObj: any
const chartRef = ref()
const option: any = {
    dataset: {
        source: []
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        selected: {},  // 控制显隐
        show: false
    },
    grid: {
        top: 50, right: 150, bottom: 30, left: 55,
    },
    xAxis: {
        type: 'category'
    },
    yAxis: [
        {
            id: 0,
            type: 'value',
            name: '曝光量',
            splitLine: {
                show: true // 设置显示分割线
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#0085ff'
                }
            },
            show: true
        },
        {
            id: 1,
            type: 'value',
            name: '点击量',
            position: 'right',
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#3fd4cf'
                }
            },
            show: true
        },
        {
            id: 2,
            type: 'value',
            position: 'right',
            offset: 90,
            name: '花费',
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#ff9500'
                }
            },
            show: true
        }
    ],
    series: [
        {
            id: 0,
            name: '曝光量',
            type: 'bar',
            encode: {
                x: 'date',
                y: 'Impression'
            },
            barWidth: '20px',
            yAxisIndex: 0,
            itemStyle: {
                color: '#0085ff',
                borderRadius: 4,
            }
        },
        {
            id: 1,
            name: '点击量',
            type: 'line',
            encode: {
                x: 'date',
                y: 'Click'
            },
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 1,
            itemStyle: {color: '#3fd4cf', borderColor: '#3fd4cf'},
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: '#3fd4cf53'},
                    {offset: 1, color: '#3fd4cf03'},
                ]),
            },
            emphasis: {
                focus: 'series'
            }
        },
        {
            id: 2,
            name: '花费',
            type: 'line',
            encode: {
                x: 'date',
                y: 'Spend'
            },
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 2,
            itemStyle: {color: '#ff9500', borderColor: '#ff9500'},
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: '#ff950053'},
                    {offset: 1, color: '#ff950003'},
                ]),
            },
            emphasis: {
                focus: 'series'
            }
        }
    ]
}
const {dateRange} = storeToRefs(publicData)
const loading = ref(true)

const getDataset = async () => {
    const resp = await getLineData({profile: shopInfo.profile.profile_id, start: dateRange.value[0], end: dateRange.value[1]})
    return resp.data
}
const initLine = async () => {
    chartObj = echarts.init(chartRef.value)
    const items = await getDataset()
    option.dataset.source = items
    XEUtils.arrayEach(metricsItems.value, info => {
        option.legend.selected[info.label] = false
    })
    for (const info of metrics.value) {
        option.legend.selected[info.label] = true
    }
    chartObj.setOption(option)
    loading.value = false
}

const getMetricsItems = async () => {
    const resp = await getCardData({start: dateRange.value[0], end: dateRange.value[1], profile: shopInfo.profile.profile_id})
    const data = resp.data
    metricsItems.value.length = 0
    XEUtils.arrayEach(spCampaignMetricsEnum, info => {
        const tmp: MetricData = {
            label: info.label,
            value: info.value,
            metricVal: data[info.value],
            gapVal: data[`gap${info.value}`],
            preVal: data[`prev${info.value}`],
        }
        metricsItems.value.push(tmp)
    })
}

const changeMetric = () => {
    const opt = buildChartOpt(option, metrics.value)
    chartObj.setOption(opt)
}

watch(
        dateRange,
        async () => {
            loading.value = true
            await getMetricsItems()
            const items = await getDataset()
            const opt = {dataset: {source: items}}
            chartObj.setOption(opt)
            loading.value = false
        }
)

const resizeChart = () => {
    chartObj.resize()
}
const addResize = () => {
    window.addEventListener('resize', resizeChart)
}
const removeResize = () => {
    window.removeEventListener('resize', resizeChart)
}


</script>

<style scoped>
.metrics-cards {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}
</style>