🐞 fix: 修复SP, SB, SD广告结构柱状图切换后鼠标悬浮文本不会变化的问题以及表格合计栏样式冲突的问题

src/views/adManage/sb/campaigns/CreateCampaigns/component/ProductSetCreativity1.vue

@@ -347,7 +347,6 @@ const imageUrl = ref('')
 
 const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
   imageUrl.value = URL.createObjectURL(uploadFile.raw!)
-  console.log('success!')
 }
 
 const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {

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

@@ -5,38 +5,41 @@
         <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-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>
+        <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;"/>
+          <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>
+        <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/sb/campaigns/api"
+import * as echarts from 'echarts'
+import { computed, inject, onMounted, ref, watch } from 'vue'
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
-import { sbBarOptions1, sbBarOptions2, barOptionsMap, metricMap, pieOptions } from '/@/views/adManage/utils/enum'
+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()
@@ -56,7 +59,7 @@ onMounted(async () => {
   barChart = echarts.init(bar.value)
   pieChart = echarts.init(pie.value)
 
-  window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
   setTimeout(() => {
     resizeChart()
   }, 0)
@@ -90,23 +93,21 @@ async function initPieBarData() {
     { value: pieBarData.pie_data[2].Spend, name: '视频' },
   ]
   barData = pieBarData.line_data
+  console.log('🚀 ~ barData', barData)
   // 柱状图初始化数据
-  ACOSList = barData.map(item => item.ACOS)
-  SpendList = barData.map(item => item.Spend)
+  ACOSList = barData.map((item) => item.ACOS)
+  SpendList = barData.map((item) => item.Spend)
   // 将x轴映射为中文
-  xAxisList = barData.map(item => item.Classification)
+  xAxisList = barData.map((item) => item.Classification)
+  console.log('🚀 ~ xAxisList', xAxisList)
   const classificationMap = {
-    'BROAD': '关键词-广泛',
-    'category': '品类',
-    'EXACT': '关键词-精准',
-    'asin': '商品',
-    'PHRASE': '关键词-词组',
-    'close-match': '紧密匹配',
-    'loose-match': '广泛匹配',
-    'substitutes': '同类商品',
-    'complements': '关联商品'
+    BROAD: '关键词-广泛',
+    category: '品类',
+    EXACT: '关键词-精准',
+    asin: '商品',
+    PHRASE: '关键词-词组',
   }
-  xAxisMapList = xAxisList.map(item => classificationMap[item])
+  xAxisMapList = xAxisList.map((item) => classificationMap[item])
   loading.value = false
 }
 
@@ -139,11 +140,14 @@ function changeBarTwo(newValue) {
 }
 
 function updateBarChart() {
-  const barValues1 = barData.map(item => item[barModelValue1.value])
-  const barValues2 = barData.map(item => item[barModelValue2.value])
+  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)
 }
 
@@ -170,8 +174,8 @@ function updatePieChartData(resp) {
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-  const barValues1 = resp.line_data.map(item => item[barModelValue1.value])
-  const barValues2 = resp.line_data.map(item => item[barModelValue2.value])
+  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
@@ -196,16 +200,16 @@ function initChart() {
           color: '#4C5058',
           fontSize: 15,
           fontWeight: 'bold',
-          lineHeight: 33
+          lineHeight: 33,
         },
-      }
+      },
     },
     toolbox: {
       feature: {
-        saveAsImage: { yAxisIndex: 'none' }
-      }
+        saveAsImage: { yAxisIndex: 'none' },
+      },
     },
-    grid: { top: 55, right: 60, bottom: 55, left: 55, },
+    grid: { top: 55, right: 60, bottom: 55, left: 55 },
     xAxis: [
       {
         type: 'category',
@@ -215,7 +219,7 @@ function initChart() {
         //   rotate: -30, // 将标签旋转
         //   fontSize: 13
         // }
-      }
+      },
     ],
     yAxis: [
       {
@@ -227,15 +231,15 @@ function initChart() {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#3a83f7' // 第一个 Y 轴的颜色
-          }
-        }
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
+        },
       },
       {
         type: 'value',
         // name: '数据2',
         splitLine: {
-          show: false
+          show: false,
         },
         // axisLabel: {
         //     formatter: '{value} 单位2'
@@ -243,10 +247,10 @@ function initChart() {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#f19a37' // 第一个 Y 轴的颜色
-          }
-        }
-      }
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
     ],
     series: [
       {
@@ -259,7 +263,7 @@ function initChart() {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: '#3a83f7' }, // 起始的鲜亮蓝色
             { offset: 0.5, color: '#5a9ef4' }, // 中间色，中度蓝色
-            { offset: 1, color: '#8ab6f1' } // 结束的浅蓝色
+            { offset: 1, color: '#8ab6f1' }, // 结束的浅蓝色
           ]),
           // 柱状图圆角
           borderRadius: [4, 4, 4, 4],
@@ -275,7 +279,7 @@ function initChart() {
           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)' } // 结束的浅黄色
+            { offset: 1, color: 'rgb(234, 207, 135)' }, // 结束的浅黄色
           ]),
           // 柱状图圆角
           borderRadius: [4, 4, 4, 4],
@@ -305,7 +309,7 @@ function initChart() {
             show: true,
             // fontSize: 40,
             fontWeight: 'bold',
-          }
+          },
         },
         label: {
           show: true,
@@ -319,18 +323,18 @@ function initChart() {
               color: '#4C5058',
               fontSize: 15,
               fontWeight: 'bold',
-              lineHeight: 33
+              lineHeight: 33,
             },
-          }
+          },
         },
         labelLine: {
           normal: {
-            show: true
-          }
+            show: true,
+          },
         },
-        data: pieData
-      }
-    ]
+        data: pieData,
+      },
+    ],
   }
   pieChart.setOption(option2)
   resizeChart()
@@ -342,9 +346,6 @@ function resizeChart() {
 }
 
 defineExpose({ resizeChart })
-
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/adManage/sb/index.vue

@@ -25,19 +25,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onBeforeMount, Ref, watch, provide } from 'vue'
-import { useShopInfo } from '/@/stores/shopInfo'
-import { usePublicData } from '/@/stores/publicData'
 import { storeToRefs } from 'pinia'
-import { GetAllPortfolios } from '/@/views/adManage/portfolios/api'
+import { Ref, onBeforeMount, provide, ref } from 'vue'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
+import { usePublicData } from '/@/stores/publicData'
+import { GetAllPortfolios } from '/@/views/adManage/portfolios/api'
 import Campaigns from '/@/views/adManage/sb/campaigns/index.vue'
 import Keywords from '/@/views/adManage/sb/keywords/index.vue'
-import Targets from '/@/views/adManage/sb/targets/index.vue'
-import SearchTerm from '/@/views/adManage/sb/searchTerm/index.vue'
-import AdvertisedProducts from './advertisedProducts/index.vue'
-import PurchasedOtherProducts from './purchasedOtherProducts/index.vue'
 import Placement from '/@/views/adManage/sb/placement/index.vue'
+import SearchTerm from '/@/views/adManage/sb/searchTerm/index.vue'
+import Targets from '/@/views/adManage/sb/targets/index.vue'
 
 // const shopInfo = useShopInfo()
 const publicData = usePublicData()
@@ -77,4 +74,7 @@ onBeforeMount(async () => {
 ::v-deep(.el-table .el-table__header-wrapper .cell) {
   border-right: 1px solid rgb(218, 221, 223);
 }
+::v-deep(.el-table__footer-wrapper .el-table__footer tr) {
+  background-color: #f5f7fa;
+}
 </style>

src/views/adManage/sb/keywords/chartComponents/adStruct.vue

@@ -3,33 +3,41 @@
     <el-row :gutter="5">
       <el-col :span="24">
         <div style="margin-left: 45%">
-          <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;"/>
+          <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>
+        <div ref="bar" style="height: 400px"></div>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from "vue"
-import * as echarts from "echarts"
+import { computed, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
 import TextSelector from '/@/components/TextSelector/index.vue'
-import { getAdStructureData } from "/@/views/adManage/sb/keywords/api"
+import { getAdStructureData } from '/@/views/adManage/sb/keywords/api'
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
-import { barOptions1, barOptions2, barOptionsMap } from "/@/views/adManage/utils/enum"
+import { barOptions1, barOptions2, barOptionsMap } from '/@/views/adManage/utils/enum'
 import { useShopInfo } from '/@/stores/shopInfo'
-import { usePublicData } from "/@/stores/publicData"
+import { usePublicData } from '/@/stores/publicData'
 import { storeToRefs } from 'pinia'
 
-
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
-const {dateRange} = storeToRefs(publicData)
-const {profile} = storeToRefs(shopInfo)
+const { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
 let barChart = ref()
 const pie = ref()
 const bar = ref()
@@ -44,7 +52,7 @@ let barModelValue2 = ref(barOptions2[2].value)
 onMounted(async () => {
   barChart = echarts.init(bar.value)
 
-  window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
   setTimeout(() => {
     resizeChart()
   }, 0)
@@ -74,22 +82,22 @@ async function initBarData() {
   responseData = await setAdStructureData()
   barData = responseData
   // 柱状图初始化数据
-  ACOSList = barData.map(item => item.ACOS)
-  SpendList = barData.map(item => item.Spend)
+  ACOSList = barData.map((item) => item.ACOS)
+  SpendList = barData.map((item) => item.Spend)
   // 将x轴映射为中文
-  xAxisList = barData.map(item => item.matchType)
+  xAxisList = barData.map((item) => item.matchType)
   const classificationMap = {
-    'BROAD': '关键词-广泛',
-    'category': '品类',
-    'EXACT': '关键词-精准',
-    'asin': '商品',
-    'PHRASE': '关键词-词组',
+    BROAD: '关键词-广泛',
+    category: '品类',
+    EXACT: '关键词-精准',
+    asin: '商品',
+    PHRASE: '关键词-词组',
     'close-match': '紧密匹配',
     'loose-match': '广泛匹配',
-    'substitutes': '同类商品',
-    'complements': '关联商品'
+    substitutes: '同类商品',
+    complements: '关联商品',
   }
-  xAxisMapList = xAxisList.map(item => classificationMap[item])
+  xAxisMapList = xAxisList.map((item) => classificationMap[item])
   loading.value = false
 }
 
@@ -110,11 +118,14 @@ function changeBarTwo(newValue) {
 }
 
 function updateBarChart() {
-  const barValues1 = barData.map(item => item[barModelValue1.value])
-  const barValues2 = barData.map(item => item[barModelValue2.value])
+  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)
 }
 
@@ -130,8 +141,8 @@ watch(dateRange, async () => {
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-  const barValues1 = resp.map(item => item[barModelValue1.value])
-  const barValues2 = resp.map(item => item[barModelValue2.value])
+  const barValues1 = resp.map((item) => item[barModelValue1.value])
+  const barValues2 = resp.map((item) => item[barModelValue2.value])
 
   option.series[0].data = barValues1
   option.series[1].data = barValues2
@@ -150,15 +161,15 @@ function initChart() {
       axisPointer: {
         type: 'shadow',
         label: {
-          backgroundColor: '#6a7985'
-        }
-      }
+          backgroundColor: '#6a7985',
+        },
+      },
     },
     // legend: {data: ['数据1', '数据2'],},
     toolbox: {
       feature: {
-        saveAsImage: { yAxisIndex: 'none' }
-      }
+        saveAsImage: { yAxisIndex: 'none' },
+      },
     },
     grid: { top: 50, right: 60, bottom: 50, left: 60 },
     xAxis: [
@@ -174,22 +185,22 @@ function initChart() {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#3a83f7' // 第一个 Y 轴的颜色
-          }
-        }
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
+        },
       },
       {
         type: 'value',
         splitLine: {
-          show: false
+          show: false,
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#f19a37' // 第一个 Y 轴的颜色
-          }
-        }
-      }
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
     ],
     series: [
       {
@@ -202,7 +213,7 @@ function initChart() {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: '#3a83f7' }, // 起始的鲜亮蓝色
             { offset: 0.5, color: '#5a9ef4' }, // 中间色，中度蓝色
-            { offset: 1, color: '#8ab6f1' } // 结束的浅蓝色
+            { offset: 1, color: '#8ab6f1' }, // 结束的浅蓝色
           ]),
           // 柱状图圆角
           borderRadius: [4, 4, 4, 4],
@@ -218,7 +229,7 @@ function initChart() {
           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)' } // 结束的浅黄色
+            { offset: 1, color: 'rgb(234, 207, 135)' }, // 结束的浅黄色
           ]),
           // 柱状图圆角
           borderRadius: [4, 4, 4, 4],
@@ -236,6 +247,4 @@ function resizeChart() {
 defineExpose({ resizeChart })
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/adManage/sb/placement/chartComponents/adStruct.vue

@@ -3,30 +3,37 @@
     <el-row :gutter="5">
       <el-col :span="24">
         <div style="margin-left: 45%">
-          <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: #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;"/>
+            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>
+        <div ref="bar" style="height: 400px"></div>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from "vue"
-import * as echarts from "echarts"
+import { computed, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
 import TextSelector from '/@/components/TextSelector/index.vue'
-import { getAdStructureData } from "/@/views/adManage/sp/placement/api"
+import { getAdStructureData } from '/@/views/adManage/sp/placement/api'
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
-import { barOptions1, barOptions2, barOptionsMap } from "/@/views/adManage/utils/enum"
+import { barOptions1, barOptions2, barOptionsMap } from '/@/views/adManage/utils/enum'
 import { useShopInfo } from '/@/stores/shopInfo'
-import { usePublicData } from "/@/stores/publicData"
+import { usePublicData } from '/@/stores/publicData'
 import { storeToRefs } from 'pinia'
 
-
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
 const { dateRange } = storeToRefs(publicData)
@@ -43,7 +50,7 @@ let barModelValue2 = ref(barOptions2[2].value)
 onMounted(async () => {
   barChart = echarts.init(bar.value)
 
-  window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
   setTimeout(() => {
     resizeChart()
   }, 0)
@@ -73,25 +80,25 @@ async function initBarData() {
   responseData = await setAdStructureData()
   barData = responseData
   // 柱状图初始化数据
-  ACOSList = barData.map(item => item.ACOS)
-  SpendList = barData.map(item => item.Spend)
+  ACOSList = barData.map((item) => item.ACOS)
+  SpendList = barData.map((item) => item.Spend)
   // 将x轴映射为中文
-  xAxisList = barData.map(item => item.placement)
+  xAxisList = barData.map((item) => item.placement)
   const classificationMap = {
-    'BROAD': '关键词-广泛',
-    'category': '品类',
-    'EXACT': '关键词-精准',
-    'asin': '商品',
-    'PHRASE': '关键词-词组',
+    BROAD: '关键词-广泛',
+    category: '品类',
+    EXACT: '关键词-精准',
+    asin: '商品',
+    PHRASE: '关键词-词组',
     'close-match': '紧密匹配',
     'loose-match': '广泛匹配',
-    'substitutes': '同类商品',
-    'complements': '关联商品',
-    'top': '首页',
-    'rest_of_search': '其他页面',
-    'product_page': '产品页面'
+    substitutes: '同类商品',
+    complements: '关联商品',
+    top: '首页',
+    rest_of_search: '其他页面',
+    product_page: '产品页面',
   }
-  xAxisMapList = xAxisList.map(item => classificationMap[item])
+  xAxisMapList = xAxisList.map((item) => classificationMap[item])
   loading.value = false
 }
 
@@ -112,11 +119,14 @@ function changeBarTwo(newValue) {
 }
 
 function updateBarChart() {
-  const barValues1 = barData.map(item => item[barModelValue1.value])
-  const barValues2 = barData.map(item => item[barModelValue2.value])
+  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)
 }
 
@@ -132,8 +142,8 @@ watch(dateRange, async () => {
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-  const barValues1 = resp.map(item => item[barModelValue1.value])
-  const barValues2 = resp.map(item => item[barModelValue2.value])
+  const barValues1 = resp.map((item) => item[barModelValue1.value])
+  const barValues2 = resp.map((item) => item[barModelValue2.value])
 
   option.series[0].data = barValues1
   option.series[1].data = barValues2
@@ -152,15 +162,15 @@ function initChart() {
       axisPointer: {
         type: 'shadow',
         label: {
-          backgroundColor: '#6a7985'
-        }
-      }
+          backgroundColor: '#6a7985',
+        },
+      },
     },
     // legend: {data: ['数据1', '数据2'],},
     toolbox: {
       feature: {
-        saveAsImage: { yAxisIndex: 'none' }
-      }
+        saveAsImage: { yAxisIndex: 'none' },
+      },
     },
     grid: { top: 50, right: 60, bottom: 50, left: 60 },
     xAxis: [
@@ -176,22 +186,22 @@ function initChart() {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#3a83f7' // 第一个 Y 轴的颜色
-          }
-        }
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
+        },
       },
       {
         type: 'value',
         splitLine: {
-          show: false
+          show: false,
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#f19a37' // 第一个 Y 轴的颜色
-          }
-        }
-      }
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
     ],
     series: [
       {
@@ -233,9 +243,6 @@ function initChart() {
 function resizeChart() {
   barChart.resize()
 }
-
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/adManage/sb/targets/chartComponents/adStruct.vue

@@ -1,29 +1,37 @@
 <template>
-    <div v-loading="loading">
-        <el-row :gutter="5">
-            <el-col :span="24">
-                <div style="margin-left: 45%">
-                    <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>
+  <div v-loading="loading">
+    <el-row :gutter="5">
+      <el-col :span="24">
+        <div style="margin-left: 45%">
+          <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 { onMounted, ref, inject, computed, watch } from "vue"
-import * as echarts from "echarts"
+import { onMounted, ref, inject, computed, watch } from 'vue'
+import * as echarts from 'echarts'
 import TextSelector from '/@/components/TextSelector/index.vue'
-import { getAdStructureData } from "/@/views/adManage/sp/targets/api"
+import { getAdStructureData } from '/@/views/adManage/sp/targets/api'
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
-import { barOptions1, barOptions2, barOptionsMap } from "/@/views/adManage/utils/enum"
+import { barOptions1, barOptions2, barOptionsMap } from '/@/views/adManage/utils/enum'
 import { useShopInfo } from '/@/stores/shopInfo'
 
-
 const shopInfo = useShopInfo()
 let barChart = ref()
 const pie = ref()
@@ -37,23 +45,23 @@ let barModelValue1 = ref(barOptions1[0].value)
 let barModelValue2 = ref(barOptions2[2].value)
 
 onMounted(async () => {
-    barChart = echarts.init(bar.value)
+  barChart = echarts.init(bar.value)
 
-    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
-    setTimeout(() => {
-        resizeChart()
-    }, 0)
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
+  setTimeout(() => {
+    resizeChart()
+  }, 0)
 
-    await initBarData()
-    initChart()
+  await initBarData()
+  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
+  allData = await getAdStructureData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: shopInfo.profile.profile_id })
+  return allData.data
 }
 
 // 柱状图总数据
@@ -66,26 +74,26 @@ let xAxisList
 let xAxisMapList
 
 async function initBarData() {
-    responseData = await setAdStructureData()
-    barData = responseData
-    // 柱状图初始化数据
-    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
+  responseData = await setAdStructureData()
+  barData = responseData
+  // 柱状图初始化数据
+  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
 }
 
 // 重置图像
@@ -95,42 +103,45 @@ let option2
 
 // 点击下拉框后重新渲染柱状图
 function changeBarOne(newValue) {
-    barModelValue1.value = newValue
-    updateBarChart()
+  barModelValue1.value = newValue
+  updateBarChart()
 }
 
 function changeBarTwo(newValue) {
-    barModelValue2.value = newValue
-    updateBarChart()
+  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)
+  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()
-        updateBarChartData(resp)
-        loading.value = false
-    }
+  if (dateRange.value) {
+    loading.value = true
+    const resp = await setAdStructureData()
+    updateBarChartData(resp)
+    loading.value = false
+  }
 })
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-    const barValues1 = resp.map(item => item[barModelValue1.value])
-    const barValues2 = resp.map(item => item[barModelValue2.value])
+  const barValues1 = resp.map((item) => item[barModelValue1.value])
+  const barValues2 = resp.map((item) => item[barModelValue2.value])
 
-    option.series[0].data = barValues1
-    option.series[1].data = barValues2
-    barChart.setOption(option)
+  option.series[0].data = barValues1
+  option.series[1].data = barValues2
+  barChart.setOption(option)
 }
 
 const computedBarOptions1 = computed(() => createDisabledOptions(barOptions1, barModelValue2.value, barModelValue1.value))
@@ -138,99 +149,97 @@ const computedBarOptions2 = computed(() => createDisabledOptions(barOptions2, ba
 
 // 初始化图表
 function initChart() {
-    // 柱状图配置
-    option = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-                label: {
-                    backgroundColor: '#6a7985'
-                }
-            }
+  // 柱状图配置
+  option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        label: {
+          backgroundColor: '#6a7985',
         },
-        // legend: {data: ['数据1', '数据2'],},
-        toolbox: {
-            feature: {
-                saveAsImage: { yAxisIndex: 'none' }
-            }
+      },
+    },
+    // legend: {data: ['数据1', '数据2'],},
+    toolbox: {
+      feature: {
+        saveAsImage: { yAxisIndex: 'none' },
+      },
+    },
+    grid: { top: 50, right: 60, bottom: 50, left: 60 },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        data: xAxisMapList,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
         },
-        grid: { top: 50, right: 60, bottom: 50, left: 60 },
-        xAxis: [
-            {
-                type: 'category',
-                boundaryGap: true,
-                data: xAxisMapList,
-            },
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#3a83f7' // 第一个 Y 轴的颜色
-                    }
-                }
-            },
-            {
-                type: 'value',
-                splitLine: {
-                    show: false
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#f19a37' // 第一个 Y 轴的颜色
-                    }
-                }
-            }
-        ],
-        series: [
-            {
-                name: barOptionsMap[barModelValue1.value],
-                type: 'bar',
-                barWidth: '3%',
-                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: [6, 6, 6, 6],
-                },
-            },
-            {
-                name: barOptionsMap[barModelValue2.value],
-                type: 'bar',
-                barWidth: '3%',
-                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: [6, 6, 6, 6],
-                },
-            },
-        ],
-    }
-    barChart.setOption(option)
-    resizeChart()
+      },
+      {
+        type: 'value',
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: barOptionsMap[barModelValue1.value],
+        type: 'bar',
+        barWidth: '3%',
+        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: [6, 6, 6, 6],
+        },
+      },
+      {
+        name: barOptionsMap[barModelValue2.value],
+        type: 'bar',
+        barWidth: '3%',
+        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: [6, 6, 6, 6],
+        },
+      },
+    ],
+  }
+  barChart.setOption(option)
+  resizeChart()
 }
 
 function resizeChart() {
-    barChart.resize()
+  barChart.resize()
 }
 defineExpose({ resizeChart })
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/adManage/sd/audiences/chartComponents/adStruct.vue

@@ -1,29 +1,37 @@
 <template>
-    <div v-loading="loading">
-        <el-row :gutter="5">
-            <el-col :span="24">
-                <div style="margin-left: 45%">
-                    <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>
+  <div v-loading="loading">
+    <el-row :gutter="5">
+      <el-col :span="24">
+        <div style="margin-left: 45%">
+          <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 { onMounted, ref, inject, computed, watch } from "vue"
-import * as echarts from "echarts"
+import { onMounted, ref, inject, computed, watch } from 'vue'
+import * as echarts from 'echarts'
 import TextSelector from '/@/components/TextSelector/index.vue'
-import { getAdStructureData } from "/@/views/adManage/sp/targets/api"
+import { getAdStructureData } from '/@/views/adManage/sp/targets/api'
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
-import { barOptions1, barOptions2, barOptionsMap } from "/@/views/adManage/utils/enum"
+import { barOptions1, barOptions2, barOptionsMap } from '/@/views/adManage/utils/enum'
 import { useShopInfo } from '/@/stores/shopInfo'
 
-
 const shopInfo = useShopInfo()
 let barChart = ref()
 const pie = ref()
@@ -37,23 +45,23 @@ let barModelValue1 = ref(barOptions1[0].value)
 let barModelValue2 = ref(barOptions2[2].value)
 
 onMounted(async () => {
-    barChart = echarts.init(bar.value)
+  barChart = echarts.init(bar.value)
 
-    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
-    setTimeout(() => {
-        resizeChart()
-    }, 0)
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
+  setTimeout(() => {
+    resizeChart()
+  }, 0)
 
-    await initBarData()
-    initChart()
+  await initBarData()
+  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
+  allData = await getAdStructureData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: shopInfo.profile.profile_id })
+  return allData.data
 }
 
 // 柱状图总数据
@@ -66,26 +74,26 @@ let xAxisList
 let xAxisMapList
 
 async function initBarData() {
-    responseData = await setAdStructureData()
-    barData = responseData
-    // 柱状图初始化数据
-    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
+  responseData = await setAdStructureData()
+  barData = responseData
+  // 柱状图初始化数据
+  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
 }
 
 // 重置图像
@@ -95,42 +103,45 @@ let option2
 
 // 点击下拉框后重新渲染柱状图
 function changeBarOne(newValue) {
-    barModelValue1.value = newValue
-    updateBarChart()
+  barModelValue1.value = newValue
+  updateBarChart()
 }
 
 function changeBarTwo(newValue) {
-    barModelValue2.value = newValue
-    updateBarChart()
+  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)
+  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()
-        updateBarChartData(resp)
-        loading.value = false
-    }
+  if (dateRange.value) {
+    loading.value = true
+    const resp = await setAdStructureData()
+    updateBarChartData(resp)
+    loading.value = false
+  }
 })
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-    const barValues1 = resp.map(item => item[barModelValue1.value])
-    const barValues2 = resp.map(item => item[barModelValue2.value])
+  const barValues1 = resp.map((item) => item[barModelValue1.value])
+  const barValues2 = resp.map((item) => item[barModelValue2.value])
 
-    option.series[0].data = barValues1
-    option.series[1].data = barValues2
-    barChart.setOption(option)
+  option.series[0].data = barValues1
+  option.series[1].data = barValues2
+  barChart.setOption(option)
 }
 
 const computedBarOptions1 = computed(() => createDisabledOptions(barOptions1, barModelValue2.value, barModelValue1.value))
@@ -138,99 +149,97 @@ const computedBarOptions2 = computed(() => createDisabledOptions(barOptions2, ba
 
 // 初始化图表
 function initChart() {
-    // 柱状图配置
-    option = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-                label: {
-                    backgroundColor: '#6a7985'
-                }
-            }
+  // 柱状图配置
+  option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        label: {
+          backgroundColor: '#6a7985',
         },
-        // legend: {data: ['数据1', '数据2'],},
-        toolbox: {
-            feature: {
-                saveAsImage: { yAxisIndex: 'none' }
-            }
+      },
+    },
+    // legend: {data: ['数据1', '数据2'],},
+    toolbox: {
+      feature: {
+        saveAsImage: { yAxisIndex: 'none' },
+      },
+    },
+    grid: { top: 50, right: 60, bottom: 50, left: 60 },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        data: xAxisMapList,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
         },
-        grid: { top: 50, right: 60, bottom: 50, left: 60 },
-        xAxis: [
-            {
-                type: 'category',
-                boundaryGap: true,
-                data: xAxisMapList,
-            },
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#3a83f7' // 第一个 Y 轴的颜色
-                    }
-                }
-            },
-            {
-                type: 'value',
-                splitLine: {
-                    show: false
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#f19a37' // 第一个 Y 轴的颜色
-                    }
-                }
-            }
-        ],
-        series: [
-            {
-                name: barOptionsMap[barModelValue1.value],
-                type: 'bar',
-                barWidth: '3%',
-                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: [6, 6, 6, 6],
-                },
-            },
-            {
-                name: barOptionsMap[barModelValue2.value],
-                type: 'bar',
-                barWidth: '3%',
-                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: [6, 6, 6, 6],
-                },
-            },
-        ],
-    }
-    barChart.setOption(option)
-    resizeChart()
+      },
+      {
+        type: 'value',
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: barOptionsMap[barModelValue1.value],
+        type: 'bar',
+        barWidth: '3%',
+        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: [6, 6, 6, 6],
+        },
+      },
+      {
+        name: barOptionsMap[barModelValue2.value],
+        type: 'bar',
+        barWidth: '3%',
+        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: [6, 6, 6, 6],
+        },
+      },
+    ],
+  }
+  barChart.setOption(option)
+  resizeChart()
 }
 
 function resizeChart() {
-    barChart.resize()
+  barChart.resize()
 }
 defineExpose({ resizeChart })
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/adManage/sd/campaigns/CreateCampaigns/api/index.ts

@@ -107,4 +107,28 @@ export function postCustomOperation(body) {
       method: 'post',
       data: body,
   })
+}
+export function uploadFile(obj) {
+  return request({
+      url: '/api/ad_manage/assets/upload/',
+      method: 'post',
+      data: obj,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+  })
+}
+export function checkAsset(obj) {
+  return request({
+      url: '/api/ad_manage/assets/checkasset/',
+      method: 'post',
+      data: obj,
+  })
+}
+export function postCreative(obj) {
+  return request({
+      url: '/api/ad_manage/sdcreative/create/',
+      method: 'post',
+      data: obj,
+  })
 }

src/views/adManage/sd/campaigns/CreateCampaigns/component/Creativity.vue

@@ -5,39 +5,145 @@
         <span class="custom-card-icon">|</span>
         <span class="custom-card-Text">创意</span>
       </div>
-      <div style="display: flex;">
+      <div class="main-container">
         <div class="left-container">
           <p class="left-part-title">请选择您想要自定义商品广告的方式</p>
-          <div class="demo-collapse">
-            <el-collapse v-model="activeNames" @change="handleCollapseChange" style="border: none;">
-              <el-collapse-item title="徽标" name="logo">
-                <div>
-                  Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are
-                  used to;
-                </div>
-                <div>
-                  Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
-                </div>
-              </el-collapse-item>
-              <el-collapse-item title="标题" name="title">
-                <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
-                <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
-              </el-collapse-item>
-              <el-collapse-item title="图片" name="image">
-                <div>Simplify the process: keep operating process simple and intuitive;</div>
-                <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
-                <div>
-                  Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and
-                  recalling.
-                </div>
-              </el-collapse-item>
-            </el-collapse>
-          </div>
+          <el-scrollbar height="640px">
+            <div class="demo-collapse">
+              <el-collapse v-model="activeNames" @change="handleCollapseChange" style="border: none">
+                <el-collapse-item title="徽标" name="logo">
+                  <div style="display: flex; margin-bottom: 5px">
+                    <p style="font-weight: 700; color: #1d2129; margin-right: 8px">品牌标识</p>
+                    <el-switch v-model="isOpenLogo" size="small" />
+                  </div>
+                  <el-upload
+                    v-model:file-list="fileList"
+                    :on-change="changeFile"
+                    v-loading="upLoading"
+                    :on-remove="handleRemove"
+                    action="#"
+                    accept=".png, .jpg"
+                    :limit="1"
+                    list-type="picture-card"
+                    :auto-upload="false">
+                    <el-icon><Plus /></el-icon>
+                    <template #file="{ file }">
+                      <div>
+                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                        <span class="el-upload-list__item-actions">
+                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                            <el-icon><zoom-in /></el-icon>
+                          </span>
+                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                            <el-icon><Delete /></el-icon>
+                          </span>
+                        </span>
+                      </div>
+                    </template>
+                    <template #tip>
+                      <div style="margin-top: 10px">
+                        <div style="display: flex; align-items: center; justify-content: space-between">
+                          <span style="line-height: 17px; font-weight: 600; color: #1e2128">徽标要求</span>
+                          <!-- <el-button type="primary" :icon="Picture" @click="openDialog">从素材库中选择</el-button> -->
+                        </div>
+                        <div class="introduce-item">1、图片大小: 至少600x100像素</div>
+                        <div class="introduce-item">2、文件大小: 小于1MB</div>
+                        <div style="display: flex; justify-content: space-between">
+                          <span class="introduce-item">3、文件格式: PNG 或 JPG</span>
+                          <span style="margin-left: 25px; position: relative">
+                            <el-icon size="14" style="position: absolute; left: -14px; top: 6px"><Link /></el-icon>
+                            <el-link
+                              type="primary"
+                              :underline="false"
+                              href="https://advertising.amazon.com/resources/ad-policy/sponsored-ads-policies#brandlogo"
+                              target="_blank"
+                              >查看要求</el-link
+                            >
+                          </span>
+                        </div>
+                      </div>
+                    </template>
+                  </el-upload>
+                  <!-- 预览弹窗 -->
+                  <el-dialog v-model="dialogVisible">
+                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
+                  </el-dialog>
+                </el-collapse-item>
+                <el-collapse-item title="标题" name="title">
+                  <template #title style="position: relative">
+                    <span>标题</span>
+
+                    <el-icon size="14" style="position: absolute; right: 85px"><Link /></el-icon>
+                    <el-link
+                      type="primary"
+                      href="https://advertising.amazon.com/resources/ad-policy/creative-acceptance#editorialguidelines"
+                      target="_blank"
+                      :underline="false"
+                      style="position: absolute; right: 30px">
+                      查看政策
+                    </el-link>
+                  </template>
+                  <div style="display: flex">
+                    <el-switch v-model="isOpenTitle" style="margin-right: 10px" />
+                    <el-input v-model="titleInp" maxlength="50" show-word-limit placeholder="Please input" type="text" />
+                  </div>
+                </el-collapse-item>
+                <el-collapse-item title="图片" name="image">
+                  <div style="display: flex; margin-bottom: 5px">
+                    <p style="font-weight: 700; color: #1d2129; margin-right: 8px">添加图片</p>
+                    <el-switch v-model="isOpenPicture" size="small" />
+                  </div>
+                  <el-upload
+                    v-model:file-list="pictureFile"
+                    :on-change="changePicture"
+                    v-loading="pictureLoading"
+                    :on-remove="handleRemovePicture"
+                    action="#"
+                    accept=".png, .jpeg, .gif"
+                    :limit="1"
+                    list-type="picture-card"
+                    :auto-upload="false">
+                    <el-icon><Plus /></el-icon>
+                    <template #file="{ file }">
+                      <div>
+                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                        <span class="el-upload-list__item-actions">
+                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                            <el-icon><zoom-in /></el-icon>
+                          </span>
+                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                            <el-icon><Delete /></el-icon>
+                          </span>
+                        </span>
+                      </div>
+                    </template>
+                    <template #tip>
+                      <div style="margin-top: 10px">
+                        <div style="display: flex; align-items: center; justify-content: space-between">
+                          <span style="line-height: 17px; font-weight: 600; color: #1e2128">徽标要求</span>
+                          <!-- <el-button type="primary" :icon="Picture" @click="openDialog">从素材库中选择</el-button> -->
+                        </div>
+                        <div class="introduce-item">1、图片大小: 至少 1200x628 像素</div>
+                        <div class="introduce-item">2、文件大小: 小于5MB</div>
+                        <div class="introduce-item">3、文件格式: PNG, JPEG 或GIF</div>
+                        <div class="introduce-item">4、没有在图片上添加文字, 图形或徽标</div>
+                      </div>
+                    </template>
+                  </el-upload>
+                  <!-- 预览弹窗 -->
+                  <el-dialog v-model="dialogVisible">
+                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
+                  </el-dialog>
+                </el-collapse-item>
+              </el-collapse>
+            </div>
+          </el-scrollbar>
         </div>
         <div class="right-container">
           <div class="preview-title-line">
             <p class="right-part-title">广告预览</p>
             <el-select></el-select>
+            <el-button style="margin-left: 10px">保存</el-button>
           </div>
         </div>
       </div>
@@ -46,14 +152,192 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, inject, Ref, onMounted, watch } from 'vue'
+import { Delete, Picture, Plus, ZoomIn } from '@element-plus/icons-vue'
+import type { UploadFile } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { uploadFile, checkAsset, postCreative } from '../api/index'
+import { useShopInfo } from '/@/stores/shopInfo'
+import { storeToRefs } from 'pinia'
+import emitter from '/@/utils/emitter'
+
+const respAdGroupId = inject<Ref>('respAdGroupId')
+const shopInfo = useShopInfo()
+const { profile } = storeToRefs(shopInfo)
 
 // 折叠面板相关
 const activeNames = ref([''])
 
 function handleCollapseChange(val: string[]) {
-  console.log(val)
+  // console.log(val)
+}
+
+// logo相关
+const fileList = ref([])
+const upLoading = ref(false)
+const disabled = ref(false)
+const dialogVisible = ref(false)
+const dialogImageUrl = ref('')
+const centerDialogVisible = ref(false)
+
+function changeFile(file: UploadFile) {
+  handleUpload(file)
+}
+
+function handleRemove(file: UploadFile) {
+  fileList.value = []
 }
+
+function handlePictureCardPreview(file: UploadFile) {
+  dialogImageUrl.value = file.url!
+  dialogVisible.value = true
+}
+// 文件上传相关
+const brandEntityId = ref('')
+let brandLogoAssetID = ''
+let brandLogoAssetVersion = ''
+let brandLogoCrop = {}
+const isOpenLogo = ref(false)
+
+async function handleUpload(file: UploadFile) {
+  const formData = new FormData()
+  formData.append('file', file.raw)
+  formData.append('profile_id', profile.value.profile_id)
+  formData.append('brandEntityId', brandEntityId.value)
+  formData.append('assetType', 'IMAGE')
+  formData.append('assetSubTypeList', JSON.stringify(['LOGO']))
+  upLoading.value = true
+  try {
+    const response = await uploadFile(formData)
+    brandLogoAssetVersion = response.data.versionId
+    const fileName = response.data.file_name
+    const obj = {
+      profile_id: profile.value.profile_id,
+      file_name: fileName,
+    }
+    const resp = await checkAsset(obj)
+    brandLogoAssetID = resp.data.assetId
+
+    const { width, height } = resp.data.fileMetadata
+    brandLogoCrop = {
+      width,
+      height,
+      top: 0,
+      left: 0,
+    }
+    if (resp.data.checkresult == 'success') {
+      ElMessage({ message: '上传成功', type: 'success' })
+    } else {
+      ElMessage.error('上传失败')
+    }
+  } catch (error) {
+    console.error('上传失败:', error)
+  } finally {
+    upLoading.value = false
+  }
+}
+
+function openDialog() {
+  centerDialogVisible.value = true
+  // getAssetsData()
+}
+
+// title相关
+const titleInp = ref('')
+const isOpenTitle = ref(false)
+
+// 图片相关
+const pictureFile = ref([])
+const pictureLoading = ref(false)
+const isOpenPicture = ref(false)
+let pictureAssetVersion = ''
+let pictureAssetID = ''
+
+function changePicture(file: UploadFile) {
+  handleUploadPicture(file)
+}
+
+function handleRemovePicture(file: UploadFile) {
+  fileList.value = []
+}
+
+async function handleUploadPicture(file: UploadFile) {
+  const formData = new FormData()
+  formData.append('file', file.raw)
+  formData.append('profile_id', profile.value.profile_id)
+  formData.append('brandEntityId', brandEntityId.value)
+  formData.append('assetType', 'IMAGE')
+  formData.append('assetSubTypeList', JSON.stringify(['LOGO']))
+  upLoading.value = true
+  try {
+    const response = await uploadFile(formData)
+    pictureAssetVersion = response.data.versionId
+    const fileName = response.data.file_name
+    const obj = {
+      profile_id: profile.value.profile_id,
+      file_name: fileName,
+    }
+    const resp = await checkAsset(obj)
+    pictureAssetID = resp.data.assetId
+
+    const { width, height } = resp.data.fileMetadata
+    brandLogoCrop = {
+      width,
+      height,
+      top: 0,
+      left: 0,
+    }
+    if (resp.data.checkresult == 'success') {
+      ElMessage({ message: '上传成功', type: 'success' })
+    } else {
+      ElMessage.error('上传失败')
+    }
+  } catch (error) {
+    console.error('上传失败:', error)
+  } finally {
+    upLoading.value = false
+  }
+}
+
+const createLoading = ref(false)
+
+async function createCreativity() {
+  createLoading.value = true
+  const obj = {
+    profile_id: profile.value.profile_id,
+    adGroupId: respAdGroupId.value,
+    properties_logo: isOpenLogo.value,
+    properties_head: isOpenTitle.value,
+    properties_custom: isOpenPicture.value,
+    headline: '',
+    brandLogo_assetId: '',
+    brandLogo_assetVersion: '',
+    brandLogo_croppingCoordinates: brandLogoCrop,
+    contentType: '',
+    rectCustomImage_assetId: '',
+    rectCustomImage_assetVersion: '',
+    squareCustomImage_assetId: '',
+    squareCustomImage_assetVersion: '',
+  }
+  try {
+    const response = await postCreative(obj)
+    if (response.data.creative_state == 'success') {
+      ElMessage({ message: '创建成功', type: 'success' })
+    } else {
+      ElMessage.error('上传失败')
+    }
+  } catch (error) {
+    console.error('error:', error)
+  } finally {
+    createLoading.value = false
+  }
+}
+
+onMounted(() => {
+  emitter.on('send-brandEntityId', (value: any) => {
+    brandEntityId.value = value.brandEntityId[0].brandEntityId
+  })
+})
 </script>
 
 <style scoped>
@@ -72,8 +356,17 @@ function handleCollapseChange(val: string[]) {
   color: #306cd7;
   font-size: 26px;
 }
+.main-container {
+  display: flex;
+  border: 1px solid #e5e7eb;
+  height: 700px;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
 .left-container {
   width: 50%;
+  padding: 10px;
+  border-right: 1px solid #e5e7eb;
 }
 .left-part-title {
   color: #4e5969;
@@ -94,4 +387,9 @@ function handleCollapseChange(val: string[]) {
   font-weight: 700;
   line-height: 32px;
 }
+.introduce-item {
+  line-height: 17px;
+  font-size: 12px;
+  color: #88909b;
+}
 </style>

src/views/adManage/sd/campaigns/CreateCampaigns/component/PromoteProduct.vue

@@ -96,7 +96,7 @@
           <template #header>
             <div class="card-header">
               <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ addedTableData.length }}</span>
-              <el-button class="button" type="danger" text bg @click="delAllGoods">全部删除</el-button>
+              <el-button class="button" type="danger" text @click="delAllProduct">全部删除</el-button>
             </div>
           </template>
           <div class="card-body"></div>
@@ -249,9 +249,8 @@ function delSingleGoods(scope) {
   }
 }
 
-function delAllGoods() {
-  addedTableData.value = []
-  // addedTableData.value.splice(0, addedTableData.value.length)
+function delAllProduct() {
+  addedTableData.value.splice(0, addedTableData.value.length)
 }
 
 // 删除第二个table中已经选中的项
@@ -272,7 +271,6 @@ function inpChange(e) {
 }
 
 function selChange(e) {
-  console.log('e', e)
   const value = e
   if (leftSelect.value === 'asin' && searchInp.value) {
     loading.value = true
@@ -312,8 +310,7 @@ function isItemInList(item, list) {
 // 监听商品右侧表格已添加的数据并转化数据格式
 let firstAsin = ''
 watch(
-  addedTableData,
-  (newValue, oldValue) => {
+  addedTableData, (newValue, oldValue) => {
     newValue.forEach((item) => {
       if (!isItemInList(item, addedAdsTableItems.value)) {
         addedAdsTableItems.value.push({ sku: item.sku, asin: item.asin })
@@ -321,8 +318,9 @@ watch(
         emitter.emit('send-firstAsin', firstAsin)
       }
     })
+    emitter.emit('send-tableData', addedTableData.value)
   },
-  { deep: true }
+  { deep: true, immediate: true }
 )
 
 async function createAds() {

src/views/adManage/sd/campaigns/CreateCampaigns/component/SingleSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 490px" v-loading="containerLoading">
+  <div style="height: 525px" v-loading="containerLoading">
     <el-input v-model="searchInput" @change="handleChange" placeholder="按ASIN搜索"></el-input>
     <hr style="margin-top: 5px" />
     <el-table :data="commodityData" :show-header="false" @selection-change="handleSelectionChange" height="450" style="width: 100%">
@@ -30,13 +30,10 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch, reactive, CSSProperties, defineEmits } from 'vue'
-import { request } from '/@/utils/service'
-import type { FormInstance, FormRules, TabsPaneContext } from 'element-plus'
+import { storeToRefs } from 'pinia'
+import { defineEmits, ref } from 'vue'
 import { getCommodityCard } from '../api/index'
 import { useShopInfo } from '/@/stores/shopInfo'
-import { storeToRefs } from 'pinia'
-import emitter from '/@/utils/emitter'
 
 const shopInfo = useShopInfo()
 const { profile } = storeToRefs(shopInfo)

src/views/adManage/sd/campaigns/CreateCampaigns/index.vue

@@ -3,7 +3,8 @@
     <AdCampaign @send-campaign="getCampaign" @send-targetType="getTargetType"></AdCampaign>
     <AdGroup @send-groupId="getGroupId"></AdGroup>
     <component :is="currentComponent"></component>
-    <Creativity v-if="product"></Creativity>
+    <!-- <Creativity v-if="product.length !== 0"></Creativity> -->
+    <Creativity></Creativity>
   </div>
 </template>
 
@@ -51,8 +52,8 @@ function getGroupId(data) {
 }
 
 // 若有商品被添加显示创意
-const product = ref('')
-emitter.on('send-firstAsin', (value: any) => {
+const product = ref([])
+emitter.on('send-tableData', (value: any) => {
   product.value = value
 })
 

src/views/adManage/sd/campaigns/chartComponents/adStruct.vue

@@ -5,39 +5,42 @@
         <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-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>
+        <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="computedsdBarOptions1" @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="computedsdBarOptions2" @change="changeBarTwo" style="margin-top: 5px; margin-left: 8px;"/>
+          <span style="background: #3a83f7; width: 18px; height: 10px; margin-top: 8px; display: inline-block; border-radius: 3px"></span>
+          <TextSelector v-model="barModelValue1" :options="computedsdBarOptions1" @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="computedsdBarOptions2" @change="changeBarTwo" style="margin-top: 5px; margin-left: 8px" />
         </div>
-        <div ref="bar" style="height: 400px;"></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 { computed, inject, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
 import TextSelector from '/@/components/TextSelector/index.vue'
-import { getAdStructureData } from "/@/views/adManage/sd/campaigns/api"
+import { getAdStructureData } from '/@/views/adManage/sd/campaigns/api'
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
 import { sdBarOptions1, sdBarOptions2, sdBarOptionsMap, metricMap, pieOptions } from '/@/views/adManage/utils/enum'
 import { useShopInfo } from '/@/stores/shopInfo'
 
-
 const shopInfo = useShopInfo()
 let pieChart = ref()
 let barChart = ref()
@@ -56,7 +59,7 @@ onMounted(async () => {
   barChart = echarts.init(bar.value)
   pieChart = echarts.init(pie.value)
 
-  window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
   setTimeout(() => {
     resizeChart()
   }, 0)
@@ -90,18 +93,18 @@ async function initPieBarData() {
   ]
   barData = pieBarData.target_data
   // 柱状图初始化数据
-  ACOSList = barData.map(item => item.ACOS)
-  SpendList = barData.map(item => item.Spend)
+  ACOSList = barData.map((item) => item.ACOS)
+  SpendList = barData.map((item) => item.Spend)
   // 将x轴映射为中文
-  xAxisList = barData.map(item => item.Name)
+  xAxisList = barData.map((item) => item.Name)
   const classificationMap = {
-    'views': '浏览再营销',
-    'audience': '亚马逊人群',
-    'category': '品类',
-    'purchases': '购买再营销',
-    'asin': '商品'
+    views: '浏览再营销',
+    audience: '亚马逊人群',
+    category: '品类',
+    purchases: '购买再营销',
+    asin: '商品',
   }
-  xAxisMapList = xAxisList.map(item => classificationMap[item])
+  xAxisMapList = xAxisList.map((item) => classificationMap[item])
   loading.value = false
 }
 
@@ -133,11 +136,14 @@ function changeBarTwo(newValue) {
 }
 
 function updateBarChart() {
-  const barValues1 = barData.map(item => item[barModelValue1.value])
-  const barValues2 = barData.map(item => item[barModelValue2.value])
+  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
+  // 更新柱状图的系列名称以反映当前的指标
+  option.series[0].name = sdBarOptionsMap[barModelValue1.value] || barModelValue1.value
+  option.series[1].name = sdBarOptionsMap[barModelValue2.value] || barModelValue2.value
   barChart.setOption(option)
 }
 
@@ -163,8 +169,8 @@ function updatePieChartData(resp) {
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-  const barValues1 = resp.target_data.map(item => item[barModelValue1.value])
-  const barValues2 = resp.target_data.map(item => item[barModelValue2.value])
+  const barValues1 = resp.target_data.map((item) => item[barModelValue1.value])
+  const barValues2 = resp.target_data.map((item) => item[barModelValue2.value])
 
   option.series[0].data = barValues1
   option.series[1].data = barValues2
@@ -189,16 +195,16 @@ function initChart() {
           color: '#4C5058',
           fontSize: 15,
           fontWeight: 'bold',
-          lineHeight: 33
+          lineHeight: 33,
         },
-      }
+      },
     },
     toolbox: {
       feature: {
-        saveAsImage: { yAxisIndex: 'none' }
-      }
+        saveAsImage: { yAxisIndex: 'none' },
+      },
     },
-    grid: { top: 55, right: 60, bottom: 55, left: 55, },
+    grid: { top: 55, right: 60, bottom: 55, left: 55 },
     xAxis: [
       {
         type: 'category',
@@ -208,7 +214,7 @@ function initChart() {
         //   rotate: -30, // 将标签旋转
         //   fontSize: 13
         // }
-      }
+      },
     ],
     yAxis: [
       {
@@ -220,15 +226,15 @@ function initChart() {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#3a83f7' // 第一个 Y 轴的颜色
-          }
-        }
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
+        },
       },
       {
         type: 'value',
         // name: '数据2',
         splitLine: {
-          show: false
+          show: false,
         },
         // axisLabel: {
         //     formatter: '{value} 单位2'
@@ -236,10 +242,10 @@ function initChart() {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#f19a37' // 第一个 Y 轴的颜色
-          }
-        }
-      }
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
     ],
     series: [
       {
@@ -252,7 +258,7 @@ function initChart() {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: '#3a83f7' }, // 起始的鲜亮蓝色
             { offset: 0.5, color: '#5a9ef4' }, // 中间色，中度蓝色
-            { offset: 1, color: '#8ab6f1' } // 结束的浅蓝色
+            { offset: 1, color: '#8ab6f1' }, // 结束的浅蓝色
           ]),
           // 柱状图圆角
           borderRadius: [4, 4, 4, 4],
@@ -268,7 +274,7 @@ function initChart() {
           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)' } // 结束的浅黄色
+            { offset: 1, color: 'rgb(234, 207, 135)' }, // 结束的浅黄色
           ]),
           // 柱状图圆角
           borderRadius: [4, 4, 4, 4],
@@ -298,7 +304,7 @@ function initChart() {
             show: true,
             // fontSize: 40,
             fontWeight: 'bold',
-          }
+          },
         },
         label: {
           show: true,
@@ -312,18 +318,18 @@ function initChart() {
               color: '#4C5058',
               fontSize: 15,
               fontWeight: 'bold',
-              lineHeight: 33
+              lineHeight: 33,
             },
-          }
+          },
         },
         labelLine: {
           normal: {
-            show: true
-          }
+            show: true,
+          },
         },
-        data: pieData
-      }
-    ]
+        data: pieData,
+      },
+    ],
   }
   pieChart.setOption(option2)
   resizeChart()
@@ -335,7 +341,6 @@ function resizeChart() {
 }
 
 defineExpose({ resizeChart })
-
 </script>
 
 <style scoped>

src/views/adManage/sd/index.vue

@@ -3,14 +3,14 @@
     <div class="public-search">
       <DateRangePicker v-model="dateRange"></DateRangePicker>
       <el-select
-          v-model="selectedPortfolios"
-          placeholder="广告组合"
-          clearable
-          multiple
-          style="width: 400px"
-          collapse-tags
-          collapse-tags-tooltip
-          :max-collapse-tags="3">
+        v-model="selectedPortfolios"
+        placeholder="广告组合"
+        clearable
+        multiple
+        style="width: 400px"
+        collapse-tags
+        collapse-tags-tooltip
+        :max-collapse-tags="3">
         <el-option v-for="info of portfolios" :label="info.name" :value="info.portfolioId"></el-option>
       </el-select>
     </div>
@@ -24,19 +24,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onBeforeMount, Ref, watch, provide } from 'vue'
-import { useShopInfo } from '/@/stores/shopInfo'
-import { usePublicData } from '/@/stores/publicData'
 import { storeToRefs } from 'pinia'
-import { GetAllPortfolios } from '/@/views/adManage/portfolios/api'
+import { Ref, onBeforeMount, provide, ref } from 'vue'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
-import Campaigns from '/@/views/adManage/sd/campaigns/index.vue'
+import { usePublicData } from '/@/stores/publicData'
+import { GetAllPortfolios } from '/@/views/adManage/portfolios/api'
 import Audiences from '/@/views/adManage/sd/audiences/index.vue'
-import Targets from '/@/views/adManage/sd/targets/index.vue'
+import Campaigns from '/@/views/adManage/sd/campaigns/index.vue'
 import MatchedDelivery from '/@/views/adManage/sd/matchedDelivery/index.vue'
 import PromoteProducts from '/@/views/adManage/sd/promoteProducts/index.vue'
-import PurchasedOtherProducts from './purchasedOtherProducts/index.vue'
-import Placement from '/@/views/adManage/sb/placement/index.vue'
+import Targets from '/@/views/adManage/sd/targets/index.vue'
 
 // const shopInfo = useShopInfo()
 const publicData = usePublicData()
@@ -51,7 +48,7 @@ const tabsComponents: any = {
   MatchedDelivery,
   PromoteProducts,
   // PurchasedOtherProducts,
-  
+
   // Placement
 }
 const tabs = [
@@ -71,11 +68,13 @@ onBeforeMount(async () => {
   const resp: APIResponseData = await GetAllPortfolios()
   portfolios.value = resp.data
 })
-
 </script>
 
 <style scoped>
 ::v-deep(.el-table .el-table__header-wrapper .cell) {
   border-right: 1px solid rgb(218, 221, 223);
 }
+::v-deep(.el-table__footer-wrapper .el-table__footer tr) {
+  background-color: #f5f7fa;
+}
 </style>

src/views/adManage/sd/matchedDelivery/chartComponents/adStruct.vue

@@ -1,29 +1,37 @@
 <template>
-    <div v-loading="loading">
-        <el-row :gutter="5">
-            <el-col :span="24">
-                <div style="margin-left: 45%">
-                    <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>
+  <div v-loading="loading">
+    <el-row :gutter="5">
+      <el-col :span="24">
+        <div style="margin-left: 45%">
+          <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 { onMounted, ref, inject, computed, watch } from "vue"
-import * as echarts from "echarts"
+import { onMounted, ref, inject, computed, watch } from 'vue'
+import * as echarts from 'echarts'
 import TextSelector from '/@/components/TextSelector/index.vue'
-import { getAdStructureData } from "/@/views/adManage/sp/targets/api"
+import { getAdStructureData } from '/@/views/adManage/sp/targets/api'
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
-import { barOptions1, barOptions2, barOptionsMap } from "/@/views/adManage/utils/enum"
+import { barOptions1, barOptions2, barOptionsMap } from '/@/views/adManage/utils/enum'
 import { useShopInfo } from '/@/stores/shopInfo'
 
-
 const shopInfo = useShopInfo()
 let barChart = ref()
 const pie = ref()
@@ -37,23 +45,23 @@ let barModelValue1 = ref(barOptions1[0].value)
 let barModelValue2 = ref(barOptions2[2].value)
 
 onMounted(async () => {
-    barChart = echarts.init(bar.value)
+  barChart = echarts.init(bar.value)
 
-    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
-    setTimeout(() => {
-        resizeChart()
-    }, 0)
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
+  setTimeout(() => {
+    resizeChart()
+  }, 0)
 
-    await initBarData()
-    initChart()
+  await initBarData()
+  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
+  allData = await getAdStructureData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: shopInfo.profile.profile_id })
+  return allData.data
 }
 
 // 柱状图总数据
@@ -66,26 +74,26 @@ let xAxisList
 let xAxisMapList
 
 async function initBarData() {
-    responseData = await setAdStructureData()
-    barData = responseData
-    // 柱状图初始化数据
-    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
+  responseData = await setAdStructureData()
+  barData = responseData
+  // 柱状图初始化数据
+  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
 }
 
 // 重置图像
@@ -95,42 +103,45 @@ let option2
 
 // 点击下拉框后重新渲染柱状图
 function changeBarOne(newValue) {
-    barModelValue1.value = newValue
-    updateBarChart()
+  barModelValue1.value = newValue
+  updateBarChart()
 }
 
 function changeBarTwo(newValue) {
-    barModelValue2.value = newValue
-    updateBarChart()
+  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)
+  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()
-        updateBarChartData(resp)
-        loading.value = false
-    }
+  if (dateRange.value) {
+    loading.value = true
+    const resp = await setAdStructureData()
+    updateBarChartData(resp)
+    loading.value = false
+  }
 })
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-    const barValues1 = resp.map(item => item[barModelValue1.value])
-    const barValues2 = resp.map(item => item[barModelValue2.value])
+  const barValues1 = resp.map((item) => item[barModelValue1.value])
+  const barValues2 = resp.map((item) => item[barModelValue2.value])
 
-    option.series[0].data = barValues1
-    option.series[1].data = barValues2
-    barChart.setOption(option)
+  option.series[0].data = barValues1
+  option.series[1].data = barValues2
+  barChart.setOption(option)
 }
 
 const computedBarOptions1 = computed(() => createDisabledOptions(barOptions1, barModelValue2.value, barModelValue1.value))
@@ -138,99 +149,97 @@ const computedBarOptions2 = computed(() => createDisabledOptions(barOptions2, ba
 
 // 初始化图表
 function initChart() {
-    // 柱状图配置
-    option = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-                label: {
-                    backgroundColor: '#6a7985'
-                }
-            }
+  // 柱状图配置
+  option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        label: {
+          backgroundColor: '#6a7985',
         },
-        // legend: {data: ['数据1', '数据2'],},
-        toolbox: {
-            feature: {
-                saveAsImage: { yAxisIndex: 'none' }
-            }
+      },
+    },
+    // legend: {data: ['数据1', '数据2'],},
+    toolbox: {
+      feature: {
+        saveAsImage: { yAxisIndex: 'none' },
+      },
+    },
+    grid: { top: 50, right: 60, bottom: 50, left: 60 },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        data: xAxisMapList,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
         },
-        grid: { top: 50, right: 60, bottom: 50, left: 60 },
-        xAxis: [
-            {
-                type: 'category',
-                boundaryGap: true,
-                data: xAxisMapList,
-            },
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#3a83f7' // 第一个 Y 轴的颜色
-                    }
-                }
-            },
-            {
-                type: 'value',
-                splitLine: {
-                    show: false
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#f19a37' // 第一个 Y 轴的颜色
-                    }
-                }
-            }
-        ],
-        series: [
-            {
-                name: barOptionsMap[barModelValue1.value],
-                type: 'bar',
-                barWidth: '3%',
-                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: [6, 6, 6, 6],
-                },
-            },
-            {
-                name: barOptionsMap[barModelValue2.value],
-                type: 'bar',
-                barWidth: '3%',
-                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: [6, 6, 6, 6],
-                },
-            },
-        ],
-    }
-    barChart.setOption(option)
-    resizeChart()
+      },
+      {
+        type: 'value',
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: barOptionsMap[barModelValue1.value],
+        type: 'bar',
+        barWidth: '3%',
+        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: [6, 6, 6, 6],
+        },
+      },
+      {
+        name: barOptionsMap[barModelValue2.value],
+        type: 'bar',
+        barWidth: '3%',
+        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: [6, 6, 6, 6],
+        },
+      },
+    ],
+  }
+  barChart.setOption(option)
+  resizeChart()
 }
 
 function resizeChart() {
-    barChart.resize()
+  barChart.resize()
 }
 defineExpose({ resizeChart })
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/adManage/sd/promoteProducts/chartComponents/adStruct.vue

@@ -1,29 +1,37 @@
 <template>
-    <div v-loading="loading">
-        <el-row :gutter="5">
-            <el-col :span="24">
-                <div style="margin-left: 45%">
-                    <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>
+  <div v-loading="loading">
+    <el-row :gutter="5">
+      <el-col :span="24">
+        <div style="margin-left: 45%">
+          <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 { onMounted, ref, inject, computed, watch } from "vue"
-import * as echarts from "echarts"
+import { onMounted, ref, inject, computed, watch } from 'vue'
+import * as echarts from 'echarts'
 import TextSelector from '/@/components/TextSelector/index.vue'
-import { getAdStructureData } from "/@/views/adManage/sp/targets/api"
+import { getAdStructureData } from '/@/views/adManage/sp/targets/api'
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
-import { barOptions1, barOptions2, barOptionsMap } from "/@/views/adManage/utils/enum"
+import { barOptions1, barOptions2, barOptionsMap } from '/@/views/adManage/utils/enum'
 import { useShopInfo } from '/@/stores/shopInfo'
 
-
 const shopInfo = useShopInfo()
 let barChart = ref()
 const pie = ref()
@@ -37,23 +45,23 @@ let barModelValue1 = ref(barOptions1[0].value)
 let barModelValue2 = ref(barOptions2[2].value)
 
 onMounted(async () => {
-    barChart = echarts.init(bar.value)
+  barChart = echarts.init(bar.value)
 
-    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
-    setTimeout(() => {
-        resizeChart()
-    }, 0)
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
+  setTimeout(() => {
+    resizeChart()
+  }, 0)
 
-    await initBarData()
-    initChart()
+  await initBarData()
+  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
+  allData = await getAdStructureData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: shopInfo.profile.profile_id })
+  return allData.data
 }
 
 // 柱状图总数据
@@ -66,26 +74,26 @@ let xAxisList
 let xAxisMapList
 
 async function initBarData() {
-    responseData = await setAdStructureData()
-    barData = responseData
-    // 柱状图初始化数据
-    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
+  responseData = await setAdStructureData()
+  barData = responseData
+  // 柱状图初始化数据
+  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
 }
 
 // 重置图像
@@ -95,42 +103,45 @@ let option2
 
 // 点击下拉框后重新渲染柱状图
 function changeBarOne(newValue) {
-    barModelValue1.value = newValue
-    updateBarChart()
+  barModelValue1.value = newValue
+  updateBarChart()
 }
 
 function changeBarTwo(newValue) {
-    barModelValue2.value = newValue
-    updateBarChart()
+  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)
+  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()
-        updateBarChartData(resp)
-        loading.value = false
-    }
+  if (dateRange.value) {
+    loading.value = true
+    const resp = await setAdStructureData()
+    updateBarChartData(resp)
+    loading.value = false
+  }
 })
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-    const barValues1 = resp.map(item => item[barModelValue1.value])
-    const barValues2 = resp.map(item => item[barModelValue2.value])
+  const barValues1 = resp.map((item) => item[barModelValue1.value])
+  const barValues2 = resp.map((item) => item[barModelValue2.value])
 
-    option.series[0].data = barValues1
-    option.series[1].data = barValues2
-    barChart.setOption(option)
+  option.series[0].data = barValues1
+  option.series[1].data = barValues2
+  barChart.setOption(option)
 }
 
 const computedBarOptions1 = computed(() => createDisabledOptions(barOptions1, barModelValue2.value, barModelValue1.value))
@@ -138,99 +149,97 @@ const computedBarOptions2 = computed(() => createDisabledOptions(barOptions2, ba
 
 // 初始化图表
 function initChart() {
-    // 柱状图配置
-    option = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-                label: {
-                    backgroundColor: '#6a7985'
-                }
-            }
+  // 柱状图配置
+  option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        label: {
+          backgroundColor: '#6a7985',
         },
-        // legend: {data: ['数据1', '数据2'],},
-        toolbox: {
-            feature: {
-                saveAsImage: { yAxisIndex: 'none' }
-            }
+      },
+    },
+    // legend: {data: ['数据1', '数据2'],},
+    toolbox: {
+      feature: {
+        saveAsImage: { yAxisIndex: 'none' },
+      },
+    },
+    grid: { top: 50, right: 60, bottom: 50, left: 60 },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        data: xAxisMapList,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
         },
-        grid: { top: 50, right: 60, bottom: 50, left: 60 },
-        xAxis: [
-            {
-                type: 'category',
-                boundaryGap: true,
-                data: xAxisMapList,
-            },
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#3a83f7' // 第一个 Y 轴的颜色
-                    }
-                }
-            },
-            {
-                type: 'value',
-                splitLine: {
-                    show: false
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#f19a37' // 第一个 Y 轴的颜色
-                    }
-                }
-            }
-        ],
-        series: [
-            {
-                name: barOptionsMap[barModelValue1.value],
-                type: 'bar',
-                barWidth: '3%',
-                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: [6, 6, 6, 6],
-                },
-            },
-            {
-                name: barOptionsMap[barModelValue2.value],
-                type: 'bar',
-                barWidth: '3%',
-                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: [6, 6, 6, 6],
-                },
-            },
-        ],
-    }
-    barChart.setOption(option)
-    resizeChart()
+      },
+      {
+        type: 'value',
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: barOptionsMap[barModelValue1.value],
+        type: 'bar',
+        barWidth: '3%',
+        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: [6, 6, 6, 6],
+        },
+      },
+      {
+        name: barOptionsMap[barModelValue2.value],
+        type: 'bar',
+        barWidth: '3%',
+        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: [6, 6, 6, 6],
+        },
+      },
+    ],
+  }
+  barChart.setOption(option)
+  resizeChart()
 }
 
 function resizeChart() {
-    barChart.resize()
+  barChart.resize()
 }
 defineExpose({ resizeChart })
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/adManage/sd/targets/chartComponents/adStruct.vue

@@ -1,29 +1,37 @@
 <template>
-    <div v-loading="loading">
-        <el-row :gutter="5">
-            <el-col :span="24">
-                <div style="margin-left: 45%">
-                    <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>
+  <div v-loading="loading">
+    <el-row :gutter="5">
+      <el-col :span="24">
+        <div style="margin-left: 45%">
+          <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 { onMounted, ref, inject, computed, watch } from "vue"
-import * as echarts from "echarts"
+import { onMounted, ref, inject, computed, watch } from 'vue'
+import * as echarts from 'echarts'
 import TextSelector from '/@/components/TextSelector/index.vue'
-import { getAdStructureData } from "/@/views/adManage/sp/targets/api"
+import { getAdStructureData } from '/@/views/adManage/sp/targets/api'
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
-import { barOptions1, barOptions2, barOptionsMap } from "/@/views/adManage/utils/enum"
+import { barOptions1, barOptions2, barOptionsMap } from '/@/views/adManage/utils/enum'
 import { useShopInfo } from '/@/stores/shopInfo'
 
-
 const shopInfo = useShopInfo()
 let barChart = ref()
 const pie = ref()
@@ -37,23 +45,23 @@ let barModelValue1 = ref(barOptions1[0].value)
 let barModelValue2 = ref(barOptions2[2].value)
 
 onMounted(async () => {
-    barChart = echarts.init(bar.value)
+  barChart = echarts.init(bar.value)
 
-    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
-    setTimeout(() => {
-        resizeChart()
-    }, 0)
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
+  setTimeout(() => {
+    resizeChart()
+  }, 0)
 
-    await initBarData()
-    initChart()
+  await initBarData()
+  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
+  allData = await getAdStructureData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: shopInfo.profile.profile_id })
+  return allData.data
 }
 
 // 柱状图总数据
@@ -66,26 +74,26 @@ let xAxisList
 let xAxisMapList
 
 async function initBarData() {
-    responseData = await setAdStructureData()
-    barData = responseData
-    // 柱状图初始化数据
-    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
+  responseData = await setAdStructureData()
+  barData = responseData
+  // 柱状图初始化数据
+  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
 }
 
 // 重置图像
@@ -95,42 +103,45 @@ let option2
 
 // 点击下拉框后重新渲染柱状图
 function changeBarOne(newValue) {
-    barModelValue1.value = newValue
-    updateBarChart()
+  barModelValue1.value = newValue
+  updateBarChart()
 }
 
 function changeBarTwo(newValue) {
-    barModelValue2.value = newValue
-    updateBarChart()
+  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)
+  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()
-        updateBarChartData(resp)
-        loading.value = false
-    }
+  if (dateRange.value) {
+    loading.value = true
+    const resp = await setAdStructureData()
+    updateBarChartData(resp)
+    loading.value = false
+  }
 })
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-    const barValues1 = resp.map(item => item[barModelValue1.value])
-    const barValues2 = resp.map(item => item[barModelValue2.value])
+  const barValues1 = resp.map((item) => item[barModelValue1.value])
+  const barValues2 = resp.map((item) => item[barModelValue2.value])
 
-    option.series[0].data = barValues1
-    option.series[1].data = barValues2
-    barChart.setOption(option)
+  option.series[0].data = barValues1
+  option.series[1].data = barValues2
+  barChart.setOption(option)
 }
 
 const computedBarOptions1 = computed(() => createDisabledOptions(barOptions1, barModelValue2.value, barModelValue1.value))
@@ -138,99 +149,97 @@ const computedBarOptions2 = computed(() => createDisabledOptions(barOptions2, ba
 
 // 初始化图表
 function initChart() {
-    // 柱状图配置
-    option = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-                label: {
-                    backgroundColor: '#6a7985'
-                }
-            }
+  // 柱状图配置
+  option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        label: {
+          backgroundColor: '#6a7985',
         },
-        // legend: {data: ['数据1', '数据2'],},
-        toolbox: {
-            feature: {
-                saveAsImage: { yAxisIndex: 'none' }
-            }
+      },
+    },
+    // legend: {data: ['数据1', '数据2'],},
+    toolbox: {
+      feature: {
+        saveAsImage: { yAxisIndex: 'none' },
+      },
+    },
+    grid: { top: 50, right: 60, bottom: 50, left: 60 },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        data: xAxisMapList,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
         },
-        grid: { top: 50, right: 60, bottom: 50, left: 60 },
-        xAxis: [
-            {
-                type: 'category',
-                boundaryGap: true,
-                data: xAxisMapList,
-            },
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#3a83f7' // 第一个 Y 轴的颜色
-                    }
-                }
-            },
-            {
-                type: 'value',
-                splitLine: {
-                    show: false
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#f19a37' // 第一个 Y 轴的颜色
-                    }
-                }
-            }
-        ],
-        series: [
-            {
-                name: barOptionsMap[barModelValue1.value],
-                type: 'bar',
-                barWidth: '3%',
-                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: [6, 6, 6, 6],
-                },
-            },
-            {
-                name: barOptionsMap[barModelValue2.value],
-                type: 'bar',
-                barWidth: '3%',
-                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: [6, 6, 6, 6],
-                },
-            },
-        ],
-    }
-    barChart.setOption(option)
-    resizeChart()
+      },
+      {
+        type: 'value',
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: barOptionsMap[barModelValue1.value],
+        type: 'bar',
+        barWidth: '3%',
+        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: [6, 6, 6, 6],
+        },
+      },
+      {
+        name: barOptionsMap[barModelValue2.value],
+        type: 'bar',
+        barWidth: '3%',
+        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: [6, 6, 6, 6],
+        },
+      },
+    ],
+  }
+  barChart.setOption(option)
+  resizeChart()
 }
 
 function resizeChart() {
-    barChart.resize()
+  barChart.resize()
 }
 defineExpose({ resizeChart })
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -3,33 +3,41 @@
     <el-row :gutter="5">
       <el-col :span="9">
         <div>
-          <TextSelector v-model="modelValue" :options="computedPieOptions" @change="changePie" style="margin-top: 5px"/>
+          <TextSelector v-model="modelValue" :options="computedPieOptions" @change="changePie" style="margin-top: 5px" />
         </div>
-        <div ref="pie" style="height: 400px;"></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;"/>
+          <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>
+        <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 { 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 { 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()
@@ -96,11 +104,11 @@ const barOptions1 = [
   },
   {
     value: 'CPC',
-    label: '点击成本'
+    label: '点击成本',
   },
   {
     value: 'CPA',
-    label: '订单成本'
+    label: '订单成本',
   },
   {
     value: 'Impression',
@@ -112,39 +120,39 @@ const barOptions1 = [
   },
   {
     value: 'qwe',
-    label: '点击率'
+    label: '点击率',
   },
   {
     value: '转化率',
-    label: '转化率'
+    label: '转化率',
   },
   {
     value: 'TotalSalesSameSKU',
-    label: '推广商品销售额'
+    label: '推广商品销售额',
   },
   {
     value: 'TotalSalesOtherSKU',
-    label: '其他商品销售额'
+    label: '其他商品销售额',
   },
   {
     value: 'TotalPurchasesSameSKU',
-    label: '推广商品订单数'
+    label: '推广商品订单数',
   },
   {
     value: 'TotalPurchasesOtherSKU',
-    label: '其他商品订单数'
+    label: '其他商品订单数',
   },
   {
     value: 'TotalUnitOrderedSameSKU',
-    label: '推广商品销量'
+    label: '推广商品销量',
   },
   {
     value: 'TotalUnitOrderedOtherSKU',
-    label: '其他商品销量'
+    label: '其他商品销量',
   },
   {
     value: 'TopOfSearchImpressionShare',
-    label: '搜索结果顶部展示份额'
+    label: '搜索结果顶部展示份额',
   },
 ]
 let barModelValue1 = ref(barOptions1[0].value)
@@ -177,11 +185,11 @@ const barOptions2 = [
   },
   {
     value: 'CPC',
-    label: '点击成本'
+    label: '点击成本',
   },
   {
     value: 'CPA',
-    label: '订单成本'
+    label: '订单成本',
   },
   {
     value: 'Impression',
@@ -193,39 +201,39 @@ const barOptions2 = [
   },
   {
     value: 'qwe',
-    label: '点击率'
+    label: '点击率',
   },
   {
     value: '转化率',
-    label: '转化率'
+    label: '转化率',
   },
   {
     value: 'TotalSalesSameSKU',
-    label: '推广商品销售额'
+    label: '推广商品销售额',
   },
   {
     value: 'TotalSalesOtherSKU',
-    label: '其他商品销售额'
+    label: '其他商品销售额',
   },
   {
     value: 'TotalPurchasesSameSKU',
-    label: '推广商品订单数'
+    label: '推广商品订单数',
   },
   {
     value: 'TotalPurchasesOtherSKU',
-    label: '其他商品订单数'
+    label: '其他商品订单数',
   },
   {
     value: 'TotalUnitOrderedSameSKU',
-    label: '推广商品销量'
+    label: '推广商品销量',
   },
   {
     value: 'TotalUnitOrderedOtherSKU',
-    label: '其他商品销量'
+    label: '其他商品销量',
   },
   {
     value: 'TopOfSearchImpressionShare',
-    label: '搜索结果顶部展示份额'
+    label: '搜索结果顶部展示份额',
   },
 ]
 let barModelValue2 = ref(barOptions2[2].value)
@@ -234,7 +242,7 @@ onMounted(async () => {
   barChart = echarts.init(bar.value)
   pieChart = echarts.init(pie.value)
 
-  window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
   setTimeout(() => {
     resizeChart()
   }, 0)
@@ -268,22 +276,22 @@ async function initPieBarData() {
   ]
   barData = pieBarData.line_data
   // 柱状图初始化数据
-  ACOSList = barData.map(item => item.ACOS)
-  SpendList = barData.map(item => item.Spend)
+  ACOSList = barData.map((item) => item.ACOS)
+  SpendList = barData.map((item) => item.Spend)
   // 将x轴映射为中文
-  xAxisList = barData.map(item => item.Classification)
+  xAxisList = barData.map((item) => item.Classification)
   const classificationMap = {
-    'BROAD': '关键词-广泛',
-    'category': '品类',
-    'EXACT': '关键词-精准',
-    'asin': '商品',
-    'PHRASE': '关键词-词组',
+    BROAD: '关键词-广泛',
+    category: '品类',
+    EXACT: '关键词-精准',
+    asin: '商品',
+    PHRASE: '关键词-词组',
     'close-match': '紧密匹配',
     'loose-match': '广泛匹配',
-    'substitutes': '同类商品',
-    'complements': '关联商品'
+    substitutes: '同类商品',
+    complements: '关联商品',
   }
-  xAxisMapList = xAxisList.map(item => classificationMap[item])
+  xAxisMapList = xAxisList.map((item) => classificationMap[item])
   loading.value = false
 }
 
@@ -315,11 +323,16 @@ function changeBarTwo(newValue) {
 }
 
 function updateBarChart() {
-  const barValues1 = barData.map(item => item[barModelValue1.value])
-  const barValues2 = barData.map(item => item[barModelValue2.value])
+  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)
 }
 
@@ -345,8 +358,8 @@ function updatePieChartData(resp) {
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-  const barValues1 = resp.line_data.map(item => item[barModelValue1.value])
-  const barValues2 = resp.line_data.map(item => item[barModelValue2.value])
+  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
@@ -371,16 +384,16 @@ function initChart() {
           color: '#4C5058',
           fontSize: 15,
           fontWeight: 'bold',
-          lineHeight: 33
+          lineHeight: 33,
         },
-      }
+      },
     },
     toolbox: {
       feature: {
-        saveAsImage: { yAxisIndex: 'none' }
-      }
+        saveAsImage: { yAxisIndex: 'none' },
+      },
     },
-    grid: { top: 55, right: 60, bottom: 55, left: 55, },
+    grid: { top: 55, right: 60, bottom: 55, left: 55 },
     xAxis: [
       {
         type: 'category',
@@ -388,9 +401,9 @@ function initChart() {
         data: xAxisMapList,
         axisLabel: {
           rotate: -30, // 将标签旋转
-          fontSize: 13
-        }
-      }
+          fontSize: 13,
+        },
+      },
     ],
     yAxis: [
       {
@@ -402,15 +415,15 @@ function initChart() {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#3a83f7' // 第一个 Y 轴的颜色
-          }
-        }
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
+        },
       },
       {
         type: 'value',
         // name: '数据2',
         splitLine: {
-          show: false
+          show: false,
         },
         // axisLabel: {
         //     formatter: '{value} 单位2'
@@ -418,10 +431,10 @@ function initChart() {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#f19a37' // 第一个 Y 轴的颜色
-          }
-        }
-      }
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
     ],
     series: [
       {
@@ -478,7 +491,7 @@ function initChart() {
             show: true,
             // fontSize: 40,
             fontWeight: 'bold',
-          }
+          },
         },
         label: {
           show: true,
@@ -492,18 +505,18 @@ function initChart() {
               color: '#4C5058',
               fontSize: 15,
               fontWeight: 'bold',
-              lineHeight: 33
+              lineHeight: 33,
             },
-          }
+          },
         },
         labelLine: {
           normal: {
-            show: true
-          }
+            show: true,
+          },
         },
-        data: pieData
-      }
-    ]
+        data: pieData,
+      },
+    ],
   }
   pieChart.setOption(option2)
   resizeChart()
@@ -515,9 +528,6 @@ function resizeChart() {
 }
 
 defineExpose({ resizeChart })
-
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/adManage/sp/campaigns/index.vue

@@ -114,7 +114,9 @@ watch(
 ::v-deep(.el-table--border .el-table__footer-wrapper) {
   border: none;
 }
-
+::v-deep(.el-table__footer-wrapper .el-table__footer tr) {
+  background-color: #f5f7fa;
+}
 .en-text {
   max-width: 100%;
   font-size: 13px;

src/views/adManage/sp/index.vue

@@ -78,4 +78,7 @@ onBeforeMount(async () => {
 ::v-deep(.el-table .el-table__header-wrapper .cell) {
   border-right: 1px solid rgb(218, 221, 223);
 }
+::v-deep(.el-table__footer-wrapper .el-table__footer tr) {
+  background-color: #f5f7fa;
+}
 </style>

src/views/adManage/sp/keywords/chartComponents/adStruct.vue

@@ -1,36 +1,43 @@
 <template>
-    <div v-loading="loading">
-        <el-row :gutter="5">
-            <el-col :span="24">
-                <div style="margin-left: 45%">
-                    <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>
+  <div v-loading="loading">
+    <el-row :gutter="5">
+      <el-col :span="24">
+        <div style="margin-left: 45%">
+          <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 { onMounted, ref, inject, computed, watch } from "vue"
-import * as echarts from "echarts"
+import { onMounted, ref, inject, computed, watch } from 'vue'
+import * as echarts from 'echarts'
 import TextSelector from '/@/components/TextSelector/index.vue'
-import { getAdStructureData } from "/@/views/adManage/sp/keywords/api"
+import { getAdStructureData } from '/@/views/adManage/sp/keywords/api'
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
-import { barOptionsMap } from "/@/views/adManage/utils/enum"
+import { barOptionsMap } from '/@/views/adManage/utils/enum'
 import { useShopInfo } from '/@/stores/shopInfo'
-import { usePublicData } from "/@/stores/publicData"
-import {storeToRefs} from 'pinia'
-
-
+import { usePublicData } from '/@/stores/publicData'
+import { storeToRefs } from 'pinia'
 
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
-const {dateRange} = storeToRefs(publicData)
-const {profile} = storeToRefs(shopInfo)
+const { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
 let barChart = ref()
 const pie = ref()
 const bar = ref()
@@ -40,185 +47,185 @@ const loading = ref(true)
 
 // 下拉框相关
 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: '搜索结果顶部展示份额'
-    },
+  {
+    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: '搜索结果顶部展示份额'
-    },
+  {
+    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)
+  barChart = echarts.init(bar.value)
 
-    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
-    setTimeout(() => {
-        resizeChart()
-    }, 0)
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
+  setTimeout(() => {
+    resizeChart()
+  }, 0)
 
-    await initBarData()
-    initChart()
+  await initBarData()
+  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
+  allData = await getAdStructureData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: shopInfo.profile.profile_id })
+  return allData.data
 }
 
 // 饼图总数据和柱状图总数据
@@ -231,26 +238,26 @@ let xAxisList
 let xAxisMapList
 
 async function initBarData() {
-    responseData = await setAdStructureData()
-    barData = responseData
-    // 柱状图初始化数据
-    ACOSList = barData.map(item => item.ACOS)
-    SpendList = barData.map(item => item.Spend)
-    // 将x轴映射为中文
-    xAxisList = barData.map(item => item.matchType)
-    const classificationMap = {
-        'BROAD': '关键词-广泛',
-        'category': '品类',
-        'EXACT': '关键词-精准',
-        'asin': '商品',
-        'PHRASE': '关键词-词组',
-        'close-match': '紧密匹配',
-        'loose-match': '广泛匹配',
-        'substitutes': '同类商品',
-        'complements': '关联商品'
-    }
-    xAxisMapList = xAxisList.map(item => classificationMap[item])
-    loading.value = false
+  responseData = await setAdStructureData()
+  barData = responseData
+  // 柱状图初始化数据
+  ACOSList = barData.map((item) => item.ACOS)
+  SpendList = barData.map((item) => item.Spend)
+  // 将x轴映射为中文
+  xAxisList = barData.map((item) => item.matchType)
+  const classificationMap = {
+    BROAD: '关键词-广泛',
+    category: '品类',
+    EXACT: '关键词-精准',
+    asin: '商品',
+    PHRASE: '关键词-词组',
+    'close-match': '紧密匹配',
+    'loose-match': '广泛匹配',
+    substitutes: '同类商品',
+    complements: '关联商品',
+  }
+  xAxisMapList = xAxisList.map((item) => classificationMap[item])
+  loading.value = false
 }
 
 // 重置图像
@@ -260,42 +267,45 @@ let option2
 
 // 点击下拉框后重新渲染柱状图
 function changeBarOne(newValue) {
-    barModelValue1.value = newValue
-    updateBarChart()
+  barModelValue1.value = newValue
+  updateBarChart()
 }
 
 function changeBarTwo(newValue) {
-    barModelValue2.value = newValue
-    updateBarChart()
+  barModelValue2.value = newValue
+  updateBarChart()
 }
 
 function updateBarChart() {
-    const barValues1 = barData.map(item => item[barModelValue1.value])
-    const barValues2 = barData.map(item => item[barModelValue2.value])
+  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)
+  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()
-        updateBarChartData(resp)
-        loading.value = false
-    }
+  if (dateRange.value) {
+    loading.value = true
+    const resp = await setAdStructureData()
+    updateBarChartData(resp)
+    loading.value = false
+  }
 })
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-    const barValues1 = resp.map(item => item[barModelValue1.value])
-    const barValues2 = resp.map(item => item[barModelValue2.value])
+  const barValues1 = resp.map((item) => item[barModelValue1.value])
+  const barValues2 = resp.map((item) => item[barModelValue2.value])
 
-    option.series[0].data = barValues1
-    option.series[1].data = barValues2
-    barChart.setOption(option)
+  option.series[0].data = barValues1
+  option.series[1].data = barValues2
+  barChart.setOption(option)
 }
 
 const computedBarOptions1 = computed(() => createDisabledOptions(barOptions1, barModelValue2.value, barModelValue1.value))
@@ -303,97 +313,95 @@ const computedBarOptions2 = computed(() => createDisabledOptions(barOptions2, ba
 
 // 初始化图表
 function initChart() {
-    // 柱状图配置
-    option = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-                label: {
-                    backgroundColor: '#6a7985'
-                }
-            }
+  // 柱状图配置
+  option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        label: {
+          backgroundColor: '#6a7985',
         },
-        // legend: {data: ['数据1', '数据2'],},
-        toolbox: {
-            feature: {
-                saveAsImage: { yAxisIndex: 'none' }
-            }
+      },
+    },
+    // legend: {data: ['数据1', '数据2'],},
+    toolbox: {
+      feature: {
+        saveAsImage: { yAxisIndex: 'none' },
+      },
+    },
+    grid: { top: 50, right: 60, bottom: 50, left: 60 },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        data: xAxisMapList,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
         },
-        grid: { top: 50, right: 60, bottom: 50, left: 60 },
-        xAxis: [
-            {
-                type: 'category',
-                boundaryGap: true,
-                data: xAxisMapList,
-            },
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#3a83f7' // 第一个 Y 轴的颜色
-                    }
-                }
-            },
-            {
-                type: 'value',
-                splitLine: {
-                    show: false
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#f19a37' // 第一个 Y 轴的颜色
-                    }
-                }
-            }
-        ],
-        series: [
-            {
-                name: barOptionsMap[barModelValue1.value],
-                type: 'bar',
-                barWidth: '3%',
-                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: '3%',
-                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)
-    resizeChart()
+      },
+      {
+        type: 'value',
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: barOptionsMap[barModelValue1.value],
+        type: 'bar',
+        barWidth: '3%',
+        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: '3%',
+        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)
+  resizeChart()
 }
 
 function resizeChart() {
-    barChart.resize()
+  barChart.resize()
 }
 defineExpose({ resizeChart })
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/adManage/sp/placement/chartComponents/adStruct.vue

@@ -3,28 +3,36 @@
     <el-row :gutter="5">
       <el-col :span="24">
         <div style="margin-left: 45%">
-          <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: #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;"/>
+            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>
+        <div ref="bar" style="height: 400px"></div>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, inject, computed, watch } from "vue"
-import * as echarts from "echarts"
-import TextSelector from '/@/components/TextSelector/index.vue'
-import { getAdStructureData } from "/@/views/adManage/sp/placement/api"
+import * as echarts from 'echarts'
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, ref, watch } from 'vue'
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
-import { barOptionsMap } from "/@/views/adManage/utils/enum"
+import TextSelector from '/@/components/TextSelector/index.vue'
+import { usePublicData } from '/@/stores/publicData'
 import { useShopInfo } from '/@/stores/shopInfo'
-import { usePublicData } from "/@/stores/publicData"
-import { storeToRefs } from 'pinia'
+import { getAdStructureData } from '/@/views/adManage/sp/placement/api'
+import { barOptionsMap } from '/@/views/adManage/utils/enum'
 
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
@@ -63,11 +71,11 @@ const barOptions1 = [
   },
   {
     value: 'CPC',
-    label: '点击成本'
+    label: '点击成本',
   },
   {
     value: 'CPA',
-    label: '订单成本'
+    label: '订单成本',
   },
   {
     value: 'Impression',
@@ -79,39 +87,39 @@ const barOptions1 = [
   },
   {
     value: 'qwe',
-    label: '点击率'
+    label: '点击率',
   },
   {
     value: '转化率',
-    label: '转化率'
+    label: '转化率',
   },
   {
     value: 'TotalSalesSameSKU',
-    label: '推广商品销售额'
+    label: '推广商品销售额',
   },
   {
     value: 'TotalSalesOtherSKU',
-    label: '其他商品销售额'
+    label: '其他商品销售额',
   },
   {
     value: 'TotalPurchasesSameSKU',
-    label: '推广商品订单数'
+    label: '推广商品订单数',
   },
   {
     value: 'TotalPurchasesOtherSKU',
-    label: '其他商品订单数'
+    label: '其他商品订单数',
   },
   {
     value: 'TotalUnitOrderedSameSKU',
-    label: '推广商品销量'
+    label: '推广商品销量',
   },
   {
     value: 'TotalUnitOrderedOtherSKU',
-    label: '其他商品销量'
+    label: '其他商品销量',
   },
   {
     value: 'TopOfSearchImpressionShare',
-    label: '搜索结果顶部展示份额'
+    label: '搜索结果顶部展示份额',
   },
 ]
 let barModelValue1 = ref(barOptions1[0].value)
@@ -144,11 +152,11 @@ const barOptions2 = [
   },
   {
     value: 'CPC',
-    label: '点击成本'
+    label: '点击成本',
   },
   {
     value: 'CPA',
-    label: '订单成本'
+    label: '订单成本',
   },
   {
     value: 'Impression',
@@ -160,39 +168,39 @@ const barOptions2 = [
   },
   {
     value: 'qwe',
-    label: '点击率'
+    label: '点击率',
   },
   {
     value: '转化率',
-    label: '转化率'
+    label: '转化率',
   },
   {
     value: 'TotalSalesSameSKU',
-    label: '推广商品销售额'
+    label: '推广商品销售额',
   },
   {
     value: 'TotalSalesOtherSKU',
-    label: '其他商品销售额'
+    label: '其他商品销售额',
   },
   {
     value: 'TotalPurchasesSameSKU',
-    label: '推广商品订单数'
+    label: '推广商品订单数',
   },
   {
     value: 'TotalPurchasesOtherSKU',
-    label: '其他商品订单数'
+    label: '其他商品订单数',
   },
   {
     value: 'TotalUnitOrderedSameSKU',
-    label: '推广商品销量'
+    label: '推广商品销量',
   },
   {
     value: 'TotalUnitOrderedOtherSKU',
-    label: '其他商品销量'
+    label: '其他商品销量',
   },
   {
     value: 'TopOfSearchImpressionShare',
-    label: '搜索结果顶部展示份额'
+    label: '搜索结果顶部展示份额',
   },
 ]
 let barModelValue2 = ref(barOptions2[2].value)
@@ -200,7 +208,7 @@ let barModelValue2 = ref(barOptions2[2].value)
 onMounted(async () => {
   barChart = echarts.init(bar.value)
 
-  window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
   setTimeout(() => {
     resizeChart()
   }, 0)
@@ -229,25 +237,25 @@ async function initBarData() {
   responseData = await setAdStructureData()
   barData = responseData
   // 柱状图初始化数据
-  ACOSList = barData.map(item => item.ACOS)
-  SpendList = barData.map(item => item.Spend)
+  ACOSList = barData.map((item) => item.ACOS)
+  SpendList = barData.map((item) => item.Spend)
   // 将x轴映射为中文
-  xAxisList = barData.map(item => item.placement)
+  xAxisList = barData.map((item) => item.placement)
   const classificationMap = {
-    'BROAD': '关键词-广泛',
-    'category': '品类',
-    'EXACT': '关键词-精准',
-    'asin': '商品',
-    'PHRASE': '关键词-词组',
+    BROAD: '关键词-广泛',
+    category: '品类',
+    EXACT: '关键词-精准',
+    asin: '商品',
+    PHRASE: '关键词-词组',
     'close-match': '紧密匹配',
     'loose-match': '广泛匹配',
-    'substitutes': '同类商品',
-    'complements': '关联商品',
-    'top': '搜索结果顶部(首页)',
-    'rest_of_search': '搜索结果的其余位置',
-    'product_page': '商品页面'
+    substitutes: '同类商品',
+    complements: '关联商品',
+    top: '搜索结果顶部(首页)',
+    rest_of_search: '搜索结果的其余位置',
+    product_page: '商品页面',
   }
-  xAxisMapList = xAxisList.map(item => classificationMap[item])
+  xAxisMapList = xAxisList.map((item) => classificationMap[item])
   loading.value = false
 }
 
@@ -268,11 +276,14 @@ function changeBarTwo(newValue) {
 }
 
 function updateBarChart() {
-  const barValues1 = barData.map(item => item[barModelValue1.value])
-  const barValues2 = barData.map(item => item[barModelValue2.value])
+  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)
 }
 
@@ -288,8 +299,8 @@ watch(dateRange, async () => {
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-  const barValues1 = resp.map(item => item[barModelValue1.value])
-  const barValues2 = resp.map(item => item[barModelValue2.value])
+  const barValues1 = resp.map((item) => item[barModelValue1.value])
+  const barValues2 = resp.map((item) => item[barModelValue2.value])
 
   option.series[0].data = barValues1
   option.series[1].data = barValues2
@@ -308,15 +319,15 @@ function initChart() {
       axisPointer: {
         type: 'shadow',
         label: {
-          backgroundColor: '#6a7985'
-        }
-      }
+          backgroundColor: '#6a7985',
+        },
+      },
     },
     // legend: {data: ['数据1', '数据2'],},
     toolbox: {
       feature: {
-        saveAsImage: { yAxisIndex: 'none' }
-      }
+        saveAsImage: { yAxisIndex: 'none' },
+      },
     },
     grid: { top: 50, right: 60, bottom: 50, left: 60 },
     xAxis: [
@@ -332,22 +343,22 @@ function initChart() {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#3a83f7' // 第一个 Y 轴的颜色
-          }
-        }
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
+        },
       },
       {
         type: 'value',
         splitLine: {
-          show: false
+          show: false,
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#f19a37' // 第一个 Y 轴的颜色
-          }
-        }
-      }
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
     ],
     series: [
       {
@@ -389,9 +400,6 @@ function initChart() {
 function resizeChart() {
   barChart.resize()
 }
-
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/adManage/sp/targets/chartComponents/adStruct.vue

@@ -1,28 +1,36 @@
 <template>
-    <div v-loading="loading">
-        <el-row :gutter="5">
-            <el-col :span="24">
-                <div style="margin-left: 45%">
-                    <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>
+  <div v-loading="loading">
+    <el-row :gutter="5">
+      <el-col :span="24">
+        <div style="margin-left: 45%">
+          <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 { onMounted, ref, inject, computed, watch } from "vue"
-import * as echarts from "echarts"
-import TextSelector from '/@/components/TextSelector/index.vue'
-import { getAdStructureData } from "/@/views/adManage/sp/targets/api"
+import * as echarts from 'echarts'
+import { computed, inject, onMounted, ref, watch } from 'vue'
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
-import { barOptionsMap } from "/@/views/adManage/utils/enum"
+import TextSelector from '/@/components/TextSelector/index.vue'
 import { useShopInfo } from '/@/stores/shopInfo'
-
+import { getAdStructureData } from '/@/views/adManage/sp/targets/api'
+import { barOptionsMap } from '/@/views/adManage/utils/enum'
 
 const shopInfo = useShopInfo()
 let barChart = ref()
@@ -34,185 +42,185 @@ const dateRange = inject('dateRange')
 
 // 下拉框相关
 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: '搜索结果顶部展示份额'
-    },
+  {
+    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: '搜索结果顶部展示份额'
-    },
+  {
+    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)
+  barChart = echarts.init(bar.value)
 
-    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
-    setTimeout(() => {
-        resizeChart()
-    }, 0)
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
+  setTimeout(() => {
+    resizeChart()
+  }, 0)
 
-    await initBarData()
-    initChart()
+  await initBarData()
+  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
+  allData = await getAdStructureData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: shopInfo.profile.profile_id })
+  return allData.data
 }
 
 // 柱状图总数据
@@ -225,26 +233,26 @@ let xAxisList
 let xAxisMapList
 
 async function initBarData() {
-    responseData = await setAdStructureData()
-    barData = responseData
-    // 柱状图初始化数据
-    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
+  responseData = await setAdStructureData()
+  barData = responseData
+  // 柱状图初始化数据
+  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
 }
 
 // 重置图像
@@ -254,42 +262,45 @@ let option2
 
 // 点击下拉框后重新渲染柱状图
 function changeBarOne(newValue) {
-    barModelValue1.value = newValue
-    updateBarChart()
+  barModelValue1.value = newValue
+  updateBarChart()
 }
 
 function changeBarTwo(newValue) {
-    barModelValue2.value = newValue
-    updateBarChart()
+  barModelValue2.value = newValue
+  updateBarChart()
 }
 
 function updateBarChart() {
-    const barValues1 = barData.map(item => item[barModelValue1.value])
-    const barValues2 = barData.map(item => item[barModelValue2.value])
+  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)
+  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()
-        updateBarChartData(resp)
-        loading.value = false
-    }
+  if (dateRange.value) {
+    loading.value = true
+    const resp = await setAdStructureData()
+    updateBarChartData(resp)
+    loading.value = false
+  }
 })
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-    const barValues1 = resp.map(item => item[barModelValue1.value])
-    const barValues2 = resp.map(item => item[barModelValue2.value])
+  const barValues1 = resp.map((item) => item[barModelValue1.value])
+  const barValues2 = resp.map((item) => item[barModelValue2.value])
 
-    option.series[0].data = barValues1
-    option.series[1].data = barValues2
-    barChart.setOption(option)
+  option.series[0].data = barValues1
+  option.series[1].data = barValues2
+  barChart.setOption(option)
 }
 
 const computedBarOptions1 = computed(() => createDisabledOptions(barOptions1, barModelValue2.value, barModelValue1.value))
@@ -297,97 +308,95 @@ const computedBarOptions2 = computed(() => createDisabledOptions(barOptions2, ba
 
 // 初始化图表
 function initChart() {
-    // 柱状图配置
-    option = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-                label: {
-                    backgroundColor: '#6a7985'
-                }
-            }
+  // 柱状图配置
+  option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        label: {
+          backgroundColor: '#6a7985',
         },
-        // legend: {data: ['数据1', '数据2'],},
-        toolbox: {
-            feature: {
-                saveAsImage: { yAxisIndex: 'none' }
-            }
+      },
+    },
+    // legend: {data: ['数据1', '数据2'],},
+    toolbox: {
+      feature: {
+        saveAsImage: { yAxisIndex: 'none' },
+      },
+    },
+    grid: { top: 50, right: 60, bottom: 50, left: 60 },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        data: xAxisMapList,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#3a83f7', // 第一个 Y 轴的颜色
+          },
         },
-        grid: { top: 50, right: 60, bottom: 50, left: 60 },
-        xAxis: [
-            {
-                type: 'category',
-                boundaryGap: true,
-                data: xAxisMapList,
-            },
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#3a83f7' // 第一个 Y 轴的颜色
-                    }
-                }
-            },
-            {
-                type: 'value',
-                splitLine: {
-                    show: false
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#f19a37' // 第一个 Y 轴的颜色
-                    }
-                }
-            }
-        ],
-        series: [
-            {
-                name: barOptionsMap[barModelValue1.value],
-                type: 'bar',
-                barWidth: '3%',
-                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: '3%',
-                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)
-    resizeChart()
+      },
+      {
+        type: 'value',
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#f19a37', // 第一个 Y 轴的颜色
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: barOptionsMap[barModelValue1.value],
+        type: 'bar',
+        barWidth: '3%',
+        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: '3%',
+        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)
+  resizeChart()
 }
 
 function resizeChart() {
-    barChart.resize()
+  barChart.resize()
 }
 defineExpose({ resizeChart })
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/system/login/index.vue

@@ -82,7 +82,6 @@ const state = reactive({
 
 // 获取布局配置信息
 const getThemeConfig = computed(() => {
-	console.log('11', getThemeConfig)
 	return themeConfig.value;
 });
 // 页面加载时