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

async function setAdStructureData() {
  allData = await getAdStructureData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: shopInfo.profile.profile_id })
  return allData.data
}

// 饼图总数据和柱状图总数据
let pieData
let barData
let pieBarData
// 柱状图初始数据
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

  // 同时更新系列的name属性，以确保鼠标悬停时显示的文本正确
  option.series[0].name = barOptionsMap[barModelValue1.value] || barModelValue1.value
  option.series[1].name = barOptionsMap[barModelValue2.value] || barModelValue2.value

  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>