|
|
@@ -1,55 +1,509 @@
|
|
|
<template>
|
|
|
- <div style="height: 500px;" ref="lineRef"></div>
|
|
|
+ <div v-loading="loading">
|
|
|
+ <el-row :gutter="5">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div>
|
|
|
+ <TextSelector v-model="modelValue" :options="pieOptions" @change="changePie" style="margin-top: 5px"/>
|
|
|
+ </div>
|
|
|
+ <div ref="pie" style="height: 500px;"></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <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="barOptions1" @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="barOptions2" @change="changeBarTwo" style="margin-top: 5px; margin-left: 8px;"/>
|
|
|
+ </div>
|
|
|
+ <div ref="bar" style="height: 500px;"></div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts" setup>
|
|
|
-import {ref, onMounted, onBeforeUnmount} from 'vue'
|
|
|
-import * as echarts from 'echarts'
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref, inject } from "vue"
|
|
|
+import * as echarts from "echarts"
|
|
|
+import TextSelector from '/@/components/TextSelector/index.vue'
|
|
|
+import { getAdStructureData } from "/@/views/adManage/sp/campaigns/api"
|
|
|
|
|
|
-defineOptions({
|
|
|
- name: 'AdStructChart'
|
|
|
+let pieChart = ref()
|
|
|
+let barChart = ref()
|
|
|
+const pie = ref()
|
|
|
+const bar = ref()
|
|
|
+const loading = ref(true)
|
|
|
+
|
|
|
+let dateRange = inject('dateRange')
|
|
|
+console.log('dateRange', dateRange.value)
|
|
|
+
|
|
|
+// 下拉框相关
|
|
|
+const pieOptions = [
|
|
|
+ {
|
|
|
+ value: 'Spend',
|
|
|
+ label: '花费',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalSales',
|
|
|
+ label: '销售额',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalPurchases',
|
|
|
+ label: '订单数',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalUnitOrdered',
|
|
|
+ label: '销量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Impression',
|
|
|
+ label: '曝光量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Click',
|
|
|
+ label: '点击量',
|
|
|
+ },
|
|
|
+]
|
|
|
+const metricMap = {
|
|
|
+ 'Spend': '花费',
|
|
|
+ 'TotalSales': '销售额',
|
|
|
+ 'TotalPurchases': '订单数',
|
|
|
+ 'TotalUnitOrdered': '销量',
|
|
|
+ 'Impression': '曝光量',
|
|
|
+ 'Click': '点击量',
|
|
|
+}
|
|
|
+let modelValue = ref(pieOptions[0].value)
|
|
|
+
|
|
|
+const barOptions1 = [
|
|
|
+ {
|
|
|
+ value: 'ACOS',
|
|
|
+ label: 'ACOS',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'ROAS',
|
|
|
+ label: 'ROAS',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Spend',
|
|
|
+ label: '花费',
|
|
|
+ units: '$',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalSales',
|
|
|
+ label: '销售额',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalPurchases',
|
|
|
+ label: '订单数',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalUnitOrdered',
|
|
|
+ label: '销量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'CPC',
|
|
|
+ label: '点击成本'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'CPA',
|
|
|
+ label: '订单成本'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Impression',
|
|
|
+ label: '曝光量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Click',
|
|
|
+ label: '点击量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'qwe',
|
|
|
+ label: '点击率'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '转化率',
|
|
|
+ label: '转化率'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalSalesSameSKU',
|
|
|
+ label: '推广商品销售额'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalSalesOtherSKU',
|
|
|
+ label: '其他商品销售额'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalPurchasesSameSKU',
|
|
|
+ label: '推广商品订单数'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalPurchasesOtherSKU',
|
|
|
+ label: '其他商品订单数'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalUnitOrderedSameSKU',
|
|
|
+ label: '推广商品销量'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalUnitOrderedOtherSKU',
|
|
|
+ label: '其他商品销量'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TopOfSearchImpressionShare',
|
|
|
+ label: '搜索结果顶部展示份额'
|
|
|
+ },
|
|
|
+]
|
|
|
+let barModelValue1 = ref(barOptions1[0].value)
|
|
|
+
|
|
|
+const barOptions2 = [
|
|
|
+ {
|
|
|
+ value: 'ACOS',
|
|
|
+ label: 'ACOS',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'ROAS',
|
|
|
+ label: 'ROAS',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Spend',
|
|
|
+ label: '花费',
|
|
|
+ units: '$',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalSales',
|
|
|
+ label: '销售额',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalPurchases',
|
|
|
+ label: '订单数',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalUnitOrdered',
|
|
|
+ label: '销量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'CPC',
|
|
|
+ label: '点击成本'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'CPA',
|
|
|
+ label: '订单成本'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Impression',
|
|
|
+ label: '曝光量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Click',
|
|
|
+ label: '点击量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'qwe',
|
|
|
+ label: '点击率'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '转化率',
|
|
|
+ label: '转化率'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalSalesSameSKU',
|
|
|
+ label: '推广商品销售额'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalSalesOtherSKU',
|
|
|
+ label: '其他商品销售额'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalPurchasesSameSKU',
|
|
|
+ label: '推广商品订单数'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalPurchasesOtherSKU',
|
|
|
+ label: '其他商品订单数'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalUnitOrderedSameSKU',
|
|
|
+ label: '推广商品销量'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TotalUnitOrderedOtherSKU',
|
|
|
+ label: '其他商品销量'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'TopOfSearchImpressionShare',
|
|
|
+ label: '搜索结果顶部展示份额'
|
|
|
+ },
|
|
|
+]
|
|
|
+let barModelValue2 = ref(barOptions2[2].value)
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ barChart = echarts.init(bar.value)
|
|
|
+ pieChart = echarts.init(pie.value)
|
|
|
+
|
|
|
+ window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
|
|
|
+ setTimeout(() => {
|
|
|
+ resizeChart()
|
|
|
+ }, 0)
|
|
|
+
|
|
|
+ await initPieBarData()
|
|
|
+ initChart()
|
|
|
})
|
|
|
|
|
|
-let chartObj: any
|
|
|
-const lineRef = ref()
|
|
|
-const resizeChart = () => {
|
|
|
- chartObj.resize()
|
|
|
+// 获取总数据
|
|
|
+let allData = null
|
|
|
+
|
|
|
+async function setAdStructureData() {
|
|
|
+ allData = await getAdStructureData({ start: dateRange.value[0], end: dateRange.value[1], profile: '3006125408623189' })
|
|
|
+ console.log('allData.data', allData.data)
|
|
|
+ return allData.data
|
|
|
+}
|
|
|
+
|
|
|
+// 饼图总数据和柱状图总数据
|
|
|
+let pieData = null
|
|
|
+let barData = null
|
|
|
+let pieBarData = null
|
|
|
+// 柱状图初始数据
|
|
|
+let ACOSList
|
|
|
+let SpendList
|
|
|
+let ClassificationList
|
|
|
+let classificationMapList
|
|
|
+
|
|
|
+async function initPieBarData() {
|
|
|
+ pieBarData = await setAdStructureData()
|
|
|
+ pieData = [
|
|
|
+ { value: pieBarData.pie_data[0].Spend, name: '自动' },
|
|
|
+ { value: pieBarData.pie_data[1].Spend, name: '手动' },
|
|
|
+ ]
|
|
|
+ barData = pieBarData.line_data
|
|
|
+ // 柱状图初始化数据
|
|
|
+ ACOSList = barData.map(item => item.ACOS)
|
|
|
+ SpendList = barData.map(item => item.Spend)
|
|
|
+ ClassificationList = barData.map(item => item.Classification)
|
|
|
+ const classificationMap = {
|
|
|
+ 'BROAD': '关键词-广泛',
|
|
|
+ 'category': '品类',
|
|
|
+ 'EXACT': '关键词-精准',
|
|
|
+ 'asin': '商品',
|
|
|
+ 'PHRASE': '关键词-词组',
|
|
|
+ 'close-match': '紧密匹配',
|
|
|
+ 'loose-match': '广泛匹配',
|
|
|
+ 'substitutes': '同类商品',
|
|
|
+ 'complements': '关联商品'
|
|
|
+ }
|
|
|
+ classificationMapList = ClassificationList.map(item => classificationMap[item])
|
|
|
+ console.log(ClassificationList)
|
|
|
+ loading.value = false
|
|
|
}
|
|
|
-const addResize = () => {
|
|
|
- window.addEventListener('resize', resizeChart)
|
|
|
+
|
|
|
+// 重置图像
|
|
|
+let flag = ref()
|
|
|
+let barFlag = ref()
|
|
|
+let barFlag2 = ref()
|
|
|
+let option
|
|
|
+let option2
|
|
|
+
|
|
|
+function changePie(newValue) {
|
|
|
+ modelValue.value = newValue
|
|
|
+ flag.value = modelValue.value
|
|
|
+ option2.series[0].data = [
|
|
|
+ { value: pieBarData.pie_data[0][flag.value], name: '自动' },
|
|
|
+ { value: pieBarData.pie_data[1][flag.value], name: '手动' },
|
|
|
+ ]
|
|
|
+ // pieChart.clear() // 清除当前饼图的配置
|
|
|
+ // option2.series[0].data = newPieData // 确保更新的是数组中的正确位置
|
|
|
+ // pieChart.setOption(option2, true) // 使用 true 强制合并选项
|
|
|
+ pieChart.setOption(option2)
|
|
|
}
|
|
|
-const removeResize = () => {
|
|
|
- window.removeEventListener('resize', resizeChart)
|
|
|
+
|
|
|
+function changeBarOne(newValue) {
|
|
|
+ barModelValue1.value = newValue
|
|
|
+ barFlag.value = barModelValue1.value
|
|
|
+ const barValues = []
|
|
|
+ try {
|
|
|
+ for (let i = 0; i < barData.length; i++) {
|
|
|
+ const value = barData[i][barFlag.value]
|
|
|
+ barValues.push(value)
|
|
|
+ }
|
|
|
+ // barChart.clear()
|
|
|
+ option.series[0].data = barValues
|
|
|
+ barChart.setOption(option)
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- initLine()
|
|
|
- addResize()
|
|
|
-})
|
|
|
-onBeforeUnmount(() => {
|
|
|
- if (chartObj) {
|
|
|
- chartObj.dispose()
|
|
|
- chartObj = null
|
|
|
+function changeBarTwo(newValue) {
|
|
|
+ barModelValue2.value = newValue
|
|
|
+ barFlag2.value = barModelValue2.value
|
|
|
+ const barValues = []
|
|
|
+ try {
|
|
|
+ for (let i = 0; i < barData.length; i++) {
|
|
|
+ const value = barData[i][barFlag2.value]
|
|
|
+ barValues.push(value)
|
|
|
+ }
|
|
|
+ // barChart.clear()
|
|
|
+ option.series[1].data = barValues
|
|
|
+ barChart.setOption(option)
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
}
|
|
|
- removeResize()
|
|
|
-})
|
|
|
-const initLine = () => {
|
|
|
- chartObj = echarts.init(lineRef.value)
|
|
|
- const option = {
|
|
|
- xAxis: {
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化图表
|
|
|
+function initChart() {
|
|
|
+ // 柱状图配置
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // legend: {data: ['数据1', '数据2'],},
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: { yAxisIndex: 'none' }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 55, right: 60, bottom: 55, left: 55,
|
|
|
+
|
|
|
},
|
|
|
- yAxis: {},
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: true,
|
|
|
+ data: classificationMapList,
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 30, // 将标签旋转45度
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ // name: '数据1',
|
|
|
+ // axisLabel: {
|
|
|
+ // formatter: '{value} %'
|
|
|
+ // },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3a83f7' // 第一个 Y 轴的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ // name: '数据2',
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ // axisLabel: {
|
|
|
+ // formatter: '{value} 单位2'
|
|
|
+ // },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#f19a37' // 第一个 Y 轴的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
series: [
|
|
|
{
|
|
|
+ // name: '数据1',
|
|
|
type: 'bar',
|
|
|
- data: [23, 24, 18, 25, 27, 28, 25]
|
|
|
+ barWidth: '15%',
|
|
|
+ data: ACOSList,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: '#3a83f7' },
|
|
|
+ { offset: 1, color: 'rgb(111, 209, 206)' },
|
|
|
+ ]),
|
|
|
+ // 柱状图圆角
|
|
|
+ borderRadius: [15, 15, 0, 0],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // name: '数据2',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '15%',
|
|
|
+ data: SpendList,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: '#f19a37' },
|
|
|
+ { offset: 1, color: 'rgb(234,207,135)' },
|
|
|
+ ]),
|
|
|
+ // 柱状图圆角
|
|
|
+ borderRadius: [15, 15, 0, 0],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ barChart.setOption(option)
|
|
|
+ // 饼图配置
|
|
|
+ option2 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // name: modelValue.value,
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['20%', '40%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ itemStyle: {
|
|
|
+ // borderRadius: 10,
|
|
|
+ borderWidth: 1, // 设置边框的宽度
|
|
|
+ borderColor: '#fff', // 将边框颜色设置为白色或图表背景颜色
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ // fontSize: 40,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'outside', // 标签显示在外侧
|
|
|
+ // formatter: `{b}\n{b|${metricMap[modelValue.value]}:{c}}\n{d}%`, // 标签文本格式器
|
|
|
+ formatter: (params) => {
|
|
|
+ return params.name + '\n' + '{b|' + metricMap[modelValue.value] + ':}' + '{b|' + params.data.value + '}' + '\n' + params.percent + '%'
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ b: {
|
|
|
+ color: '#4C5058',
|
|
|
+ fontSize: 15,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ lineHeight: 33
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: pieData
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
- chartObj.setOption(option)
|
|
|
+ pieChart.setOption(option2)
|
|
|
+ resizeChart()
|
|
|
+}
|
|
|
+
|
|
|
+function resizeChart() {
|
|
|
+ barChart.resize()
|
|
|
+ pieChart.resize()
|
|
|
}
|
|
|
-defineExpose({resizeChart})
|
|
|
+
|
|
|
+defineExpose({ resizeChart })
|
|
|
|
|
|
</script>
|
|
|
|
