ads_web/src/views/adManage/sp/campaigns/chartComponents/adStruct.vue

<template>
    <div v-loading="loading">
        <el-row :gutter="5">
            <el-col :span="9">
                <div>
                    <TextSelector v-model="modelValue" :options="computedPieOptions" @change="changePie" style="margin-top: 5px"/>
                </div>
                <div ref="pie" style="height: 400px;"></div>
            </el-col>
            <el-col :span="15">
                <div style="margin-left: 40%">
                    <span style="background: #3a83f7; width: 18px; height: 10px; margin-top: 8px; display: inline-block; border-radius: 3px;"></span>
                    <TextSelector v-model="barModelValue1" :options="computedBarOptions1" @change="changeBarOne"
                                  style="margin-top: 5px; margin-left: 8px;"/>
                    <span style="background: #f19a37; width: 18px; height: 10px; margin-top: 8px; margin-left: 20px; display: inline-block; border-radius: 3px;"></span>
                    <TextSelector v-model="barModelValue2" :options="computedBarOptions2" @change="changeBarTwo"
                                  style="margin-top: 5px; margin-left: 8px;"/>
                </div>
                <div ref="bar" style="height: 400px;"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { computed, inject, onMounted, ref, watch } from "vue"
import * as echarts from "echarts"
import TextSelector from '/@/components/TextSelector/index.vue'
import { getAdStructureData } from "/@/views/adManage/sp/campaigns/api"
import { createDisabledOptions } from '../../../utils/dropdowndisable'
import { barOptionsMap, metricMap } from '/@/views/adManage/utils/enum'
import { useShopInfo } from '/@/stores/shopInfo'

const shopInfo = useShopInfo()
let pieChart = ref()
let barChart = ref()
const pie = ref()
const bar = ref()
const loading = ref(true)

const dateRange = inject('dateRange')

// 下拉框相关
const pieOptions = [
    {
        value: 'Spend',
        label: '花费',
    },
    {
        value: 'TotalSales',
        label: '销售额',
    },
    {
        value: 'TotalPurchases',
        label: '订单数',
    },
    {
        value: 'TotalUnitOrdered',
        label: '销量',
    },
    {
        value: 'Impression',
        label: '曝光量',
    },
    {
        value: 'Click',
        label: '点击量',
    },
]
let modelValue = ref(pieOptions[0].value)

const barOptions1 = [
    {
        value: 'ACOS',
        label: 'ACOS',
    },
    {
        value: 'ROAS',
        label: 'ROAS',
    },
    {
        value: 'Spend',
        label: '花费',
        units: '$',
    },
    {
        value: 'TotalSales',
        label: '销售额',
    },
    {
        value: 'TotalPurchases',
        label: '订单数',
    },
    {
        value: 'TotalUnitOrdered',
        label: '销量',
    },
    {
        value: 'CPC',
        label: '点击成本'
    },
    {
        value: 'CPA',
        label: '订单成本'
    },
    {
        value: 'Impression',
        label: '曝光量',
    },
    {
        value: 'Click',
        label: '点击量',
    },
    {
        value: 'qwe',
        label: '点击率'
    },
    {
        value: '转化率',
        label: '转化率'
    },
    {
        value: 'TotalSalesSameSKU',
        label: '推广商品销售额'
    },
    {
        value: 'TotalSalesOtherSKU',
        label: '其他商品销售额'
    },
    {
        value: 'TotalPurchasesSameSKU',
        label: '推广商品订单数'
    },
    {
        value: 'TotalPurchasesOtherSKU',
        label: '其他商品订单数'
    },
    {
        value: 'TotalUnitOrderedSameSKU',
        label: '推广商品销量'
    },
    {
        value: 'TotalUnitOrderedOtherSKU',
        label: '其他商品销量'
    },
    {
        value: 'TopOfSearchImpressionShare',
        label: '搜索结果顶部展示份额'
    },
]
let barModelValue1 = ref(barOptions1[0].value)

const barOptions2 = [
    {
        value: 'ACOS',
        label: 'ACOS',
    },
    {
        value: 'ROAS',
        label: 'ROAS',
    },
    {
        value: 'Spend',
        label: '花费',
        units: '$',
    },
    {
        value: 'TotalSales',
        label: '销售额',
    },
    {
        value: 'TotalPurchases',
        label: '订单数',
    },
    {
        value: 'TotalUnitOrdered',
        label: '销量',
    },
    {
        value: 'CPC',
        label: '点击成本'
    },
    {
        value: 'CPA',
        label: '订单成本'
    },
    {
        value: 'Impression',
        label: '曝光量',
    },
    {
        value: 'Click',
        label: '点击量',
    },
    {
        value: 'qwe',
        label: '点击率'
    },
    {
        value: '转化率',
        label: '转化率'
    },
    {
        value: 'TotalSalesSameSKU',
        label: '推广商品销售额'
    },
    {
        value: 'TotalSalesOtherSKU',
        label: '其他商品销售额'
    },
    {
        value: 'TotalPurchasesSameSKU',
        label: '推广商品订单数'
    },
    {
        value: 'TotalPurchasesOtherSKU',
        label: '其他商品订单数'
    },
    {
        value: 'TotalUnitOrderedSameSKU',
        label: '推广商品销量'
    },
    {
        value: 'TotalUnitOrderedOtherSKU',
        label: '其他商品销量'
    },
    {
        value: 'TopOfSearchImpressionShare',
        label: '搜索结果顶部展示份额'
    },
]
let barModelValue2 = ref(barOptions2[2].value)

onMounted(async () => {
    barChart = echarts.init(bar.value)
    pieChart = echarts.init(pie.value)

    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
    setTimeout(() => {
        resizeChart()
    }, 0)

    await initPieBarData()
    initChart()
})

// 获取总数据
let allData = null

async function setAdStructureData() {
    allData = await getAdStructureData({ start: dateRange.value[0], end: dateRange.value[1], profile: shopInfo.profile.profile_id })
    console.log('allData.data', allData.data)
    return allData.data
}

// 饼图总数据和柱状图总数据
let pieData = null
let barData = null
let pieBarData = null
// 柱状图初始数据
let ACOSList
let SpendList
let xAxisList
let xAxisMapList

async function initPieBarData() {
    pieBarData = await setAdStructureData()
    pieData = [
        { value: pieBarData.pie_data[0].Spend, name: '自动' },
        { value: pieBarData.pie_data[1].Spend, name: '手动' },
    ]
    barData = pieBarData.line_data
    // 柱状图初始化数据
    ACOSList = barData.map(item => item.ACOS)
    SpendList = barData.map(item => item.Spend)
    // 将x轴映射为中文
    xAxisList = barData.map(item => item.Classification)
    const classificationMap = {
        'BROAD': '关键词-广泛',
        'category': '品类',
        'EXACT': '关键词-精准',
        'asin': '商品',
        'PHRASE': '关键词-词组',
        'close-match': '紧密匹配',
        'loose-match': '广泛匹配',
        'substitutes': '同类商品',
        'complements': '关联商品'
    }
    xAxisMapList = xAxisList.map(item => classificationMap[item])
    loading.value = false
}

// 重置图像
let flag = ref()
let option
let option2

// 点击下拉框后重新渲染饼图
function changePie(newValue) {
    modelValue.value = newValue
    flag.value = modelValue.value
    option2.series[0].data = [
        { value: pieBarData.pie_data[0][flag.value], name: '自动' },
        { value: pieBarData.pie_data[1][flag.value], name: '手动' },
    ]
    pieChart.setOption(option2)
}

// 点击下拉框后重新渲染柱状图
function changeBarOne(newValue) {
    barModelValue1.value = newValue
    updateBarChart()
}

function changeBarTwo(newValue) {
    barModelValue2.value = newValue
    updateBarChart()
}

function updateBarChart() {
    const barValues1 = barData.map(item => item[barModelValue1.value])
    const barValues2 = barData.map(item => item[barModelValue2.value])

    option.series[0].data = barValues1
    option.series[1].data = barValues2
    barChart.setOption(option)
}

// 监听时间变化重新渲染表格
watch(dateRange, async () => {
    if (dateRange.value) {
        loading.value = true
        const resp = await setAdStructureData()
        updatePieChartData(resp)
        updateBarChartData(resp)
        loading.value = false
    }
})

// 根据新数据和当前下拉框选择更新 饼图数据
function updatePieChartData(resp) {
    option2.series[0].data = [
        { value: resp.pie_data[0][modelValue.value], name: '自动' },
        { value: resp.pie_data[1][modelValue.value], name: '手动' },
    ]
    pieChart.setOption(option2)
}

// 根据新数据和当前下拉框选择更新 柱状图数据
function updateBarChartData(resp) {
    const barValues1 = resp.line_data.map(item => item[barModelValue1.value])
    const barValues2 = resp.line_data.map(item => item[barModelValue2.value])

    option.series[0].data = barValues1
    option.series[1].data = barValues2
    barChart.setOption(option)
}

const computedBarOptions1 = computed(() => createDisabledOptions(barOptions1, barModelValue2.value, barModelValue1.value))
const computedBarOptions2 = computed(() => createDisabledOptions(barOptions2, barModelValue1.value, barModelValue2.value))
const computedPieOptions = computed(() => createDisabledOptions(pieOptions, modelValue.value))

// 初始化图表
function initChart() {
    // 柱状图配置
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            rich: {
                b: {
                    color: '#4C5058',
                    fontSize: 15,
                    fontWeight: 'bold',
                    lineHeight: 33
                },
            }
        },
        toolbox: {
            feature: {
                saveAsImage: { yAxisIndex: 'none' }
            }
        },
        grid: { top: 55, right: 60, bottom: 55, left: 55, },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: xAxisMapList,
                axisLabel: {
                    rotate: -30, // 将标签旋转
                    fontSize: 13
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                // name: '数据1',
                // axisLabel: {
                //     formatter: '{value} %'
                // },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#3a83f7' // 第一个 Y 轴的颜色
                    }
                }
            },
            {
                type: 'value',
                // name: '数据2',
                splitLine: {
                    show: false
                },
                // axisLabel: {
                //     formatter: '{value} 单位2'
                // },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#f19a37' // 第一个 Y 轴的颜色
                    }
                }
            }
        ],
        series: [
            {
                name: barOptionsMap[barModelValue1.value],
                type: 'bar',
                barWidth: '15%',
                data: ACOSList,
                yAxisIndex: 0,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#3a83f7' },
                        { offset: 1, color: 'rgb(111, 209, 206)' },
                    ]),
                    // 柱状图圆角
                    borderRadius: [6, 6, 6, 6],
                },
            },
            {
                name: barOptionsMap[barModelValue2.value],
                type: 'bar',
                barWidth: '15%',
                data: SpendList,
                yAxisIndex: 1,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#f19a37' },
                        { offset: 1, color: 'rgb(234,207,135)' },
                    ]),
                    // 柱状图圆角
                    borderRadius: [6, 6, 6, 6],
                },
            },
        ],
    }
    barChart.setOption(option)
    // 饼图配置
    option2 = {
        tooltip: {
            show: false,
            trigger: 'item',
        },
        series: [
            {
                type: 'pie',
                radius: ['20%', '45%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    // borderRadius: 10,
                    borderWidth: 1, // 设置边框的宽度
                    borderColor: '#fff', // 将边框颜色设置为白色或图表背景颜色
                },
                emphasis: {
                    label: {
                        show: true,
                        // fontSize: 40,
                        fontWeight: 'bold',
                    }
                },
                label: {
                    show: true,
                    position: 'outside', // 标签显示在外侧
                    // formatter: `{b}\n{b|${metricMap[modelValue.value]}:{c}}\n{d}%`, // 标签文本格式器
                    formatter: (params) => {
                        return params.name + '\n' + '{b|' + metricMap[modelValue.value] + ':}' + '{b|' + params.data.value + '}' + '\n' + params.percent + '%'
                    },
                    rich: {
                        b: {
                            color: '#4C5058',
                            fontSize: 15,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                    }
                },
                labelLine: {
                    normal: {
                        show: true
                    }
                },
                data: pieData
            }
        ]
    }
    pieChart.setOption(option2)
    resizeChart()
}

function resizeChart() {
    barChart.resize()
    pieChart.resize()
}

defineExpose({ resizeChart })

</script>

<style scoped>

</style>