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

<template>
  <div v-loading="loading">
    <el-row :gutter="5">
      <el-col :span="7">
        <div>
          <!--<TextSelector v-model="modelValue" :options="computedPieOptions" @change="changePie" style="margin-top: 5px"/>-->
          <el-select v-model="modelValue" class="m-2" size="small" @change="changePie" style="width: 120px">
            <el-option v-for="item in computedPieOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div ref="pie" style="height: 400px"></div>
      </el-col>
      <el-col :span="17">
        <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 * as echarts from 'echarts'
import { computed, inject, onMounted, ref, watch } from 'vue'
import { createDisabledOptions } from '../../../utils/dropdowndisable'
import TextSelector from '/@/components/TextSelector/index.vue'
import { useShopInfo } from '/@/stores/shopInfo'
import { getAdStructureData } from '/@/views/adManage/sb/campaigns/api'
import { barOptionsMap, metricMap, pieOptions, sbBarOptions1, sbBarOptions2 } from '/@/views/adManage/utils/enum'

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

const dateRange = inject('dateRange')

// 下拉框相关
let modelValue = ref(pieOptions[0].value)
let barModelValue1 = ref(sbBarOptions1[0].value)
let barModelValue2 = ref(sbBarOptions2[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({ 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: '商品集' },
    { value: pieBarData.pie_data[2].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: '关键词-广泛',
    THEME: '主题',
    category: '品类',
    EXACT: '关键词-精准',
    asin: '商品',
    PHRASE: '关键词-词组',
  }
  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: '商品集' },
    { value: pieBarData.pie_data[2][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: '商品集' },
    { value: resp.pie_data[2][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(sbBarOptions1, barModelValue2.value, barModelValue1.value))
const computedBarOptions2 = computed(() => createDisabledOptions(sbBarOptions2, 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: 0.5, color: '#5a9ef4' }, // 中间色，中度蓝色
            { offset: 1, color: '#8ab6f1' }, // 结束的浅蓝色
          ]),
          // 柱状图圆角
          borderRadius: [4, 4, 4, 4],
        },
      },
      {
        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: 0.5, color: '#f7b96c' }, // 中间色，浅橙色
            { offset: 1, color: 'rgb(234, 207, 135)' }, // 结束的浅黄色
          ]),
          // 柱状图圆角
          borderRadius: [4, 4, 4, 4],
        },
      },
    ],
  }
  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>