|
|
@@ -0,0 +1,787 @@
|
|
|
+<template>
|
|
|
+ <div class="asj-container">
|
|
|
+ <div class="public-search">
|
|
|
+ <DateRangePicker v-model="dateRange"></DateRangePicker>
|
|
|
+ </div>
|
|
|
+ <div class="container-main">
|
|
|
+ <!--<div class="top-car" style="display: flex; justify-content: space-around">-->
|
|
|
+ <!-- <ShowCard :cardData="cardData"></ShowCard>-->
|
|
|
+ <!-- <ShowCard :cardData="cardData" style="margin: 0 5px"></ShowCard>-->
|
|
|
+ <!-- <ShowCard :cardData="cardData" style="margin-right: 5px;"></ShowCard>-->
|
|
|
+ <!-- <ShowCard :cardData="cardData"></ShowCard>-->
|
|
|
+ <!--</div>-->
|
|
|
+
|
|
|
+ <!-- 不要删除这个类 -->
|
|
|
+ <div class="home-container">
|
|
|
+ <el-row :gutter="15" class="home-card-one mb15">
|
|
|
+ <el-col
|
|
|
+ :xs="24"
|
|
|
+ :sm="12"
|
|
|
+ :md="12"
|
|
|
+ :lg="6"
|
|
|
+ :xl="6"
|
|
|
+ v-for="(v, k) in state.homeOne"
|
|
|
+ :key="k"
|
|
|
+ :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
|
|
|
+ >
|
|
|
+ <div class="home-card-item flex">
|
|
|
+ <div class="flex-margin flex w100" :class="` home-one-animation${k}`">
|
|
|
+ <div class="flex-auto" style="margin-top: -10px">
|
|
|
+ <div class="mt10">{{ v.cardTitle }}</div>
|
|
|
+ <div class="font30">{{ v.num1 }}</div>
|
|
|
+ <div style="display: inline-block; margin-right: 10px">
|
|
|
+ {{ v.compareNum }}
|
|
|
+ </div>
|
|
|
+ <el-icon :style="{ color: v.num2.includes('-') ? '#59b939' : '#e36f53' }" style="display: inline-block; padding-top: 2px">
|
|
|
+ <template v-if="v.num2.includes('-')" style="line-height: 25px;">
|
|
|
+ <Top/>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <Bottom/>
|
|
|
+ </template>
|
|
|
+ </el-icon>
|
|
|
+ <span class="ml5 font16" :style="{ color: v.num2.includes('-') ? '#59b939' : '#e36f53' }">{{ v.num2 }}%</span>
|
|
|
+ </div>
|
|
|
+ <div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
|
|
|
+ <i class="flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-card v-loading="loading" style="margin-top: -5px;">
|
|
|
+ <div style="height: 350px;" ref="chartRefOne"></div>
|
|
|
+ </el-card>
|
|
|
+ <el-row :gutter="5" style="margin-top: 10px">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card>
|
|
|
+ <div style="height: 350px;" ref="chartRefAcos"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card>
|
|
|
+ <div style="height: 350px;" ref="chartRefCPCandCTR"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="5" style="margin-top: 10px">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card>
|
|
|
+ <div style="height: 350px;" ref="chartRefTotalPurchases"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card>
|
|
|
+ <div style="height: 350px;" ref="chartRefImpandCli"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <!--<el-button @click="changeCardData">按钮</el-button>-->
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import {onBeforeMount, onMounted, provide, reactive, ref} from 'vue'
|
|
|
+import * as echarts from 'echarts'
|
|
|
+import {useShopInfo} from '/@/stores/shopInfo'
|
|
|
+import {usePublicData} from '/@/stores/publicData'
|
|
|
+import {storeToRefs} from 'pinia'
|
|
|
+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
|
|
|
+
|
|
|
+const shopInfo = useShopInfo()
|
|
|
+const publicData = usePublicData()
|
|
|
+const {dateRange} = storeToRefs(publicData)
|
|
|
+const tabActiveName = ref('Campaigns')
|
|
|
+provide('dateRange', dateRange)
|
|
|
+
|
|
|
+// 卡片相关功能
|
|
|
+const state = reactive({
|
|
|
+ homeOne: [
|
|
|
+ {
|
|
|
+ num1: '125,12',
|
|
|
+ compareNum: '140,23',
|
|
|
+ num2: '-12.32',
|
|
|
+ cardTitle: '订单统计信息',
|
|
|
+ num4: 'fa fa-meetup',
|
|
|
+ // color1: '#FF6462',
|
|
|
+ color2: '--next-color-primary-lighter',
|
|
|
+ color3: '--el-color-primary',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num1: '653,33',
|
|
|
+ compareNum: '1000,23',
|
|
|
+ num2: '-42.32',
|
|
|
+ cardTitle: '月度计划信息',
|
|
|
+ num4: 'iconfont icon-ditu',
|
|
|
+ color2: '--next-color-success-lighter',
|
|
|
+ color3: '--el-color-success',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num1: '125,65',
|
|
|
+ compareNum: '140,23',
|
|
|
+ num2: '17.32',
|
|
|
+ cardTitle: '年度计划信息',
|
|
|
+ num4: 'iconfont icon-zaosheng',
|
|
|
+ color2: '--next-color-warning-lighter',
|
|
|
+ color3: '--el-color-warning',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num1: '520,43',
|
|
|
+ compareNum: '590,23',
|
|
|
+ num2: '10.23',
|
|
|
+ cardTitle: '访问统计信息',
|
|
|
+ num4: 'fa fa-github-alt',
|
|
|
+ color2: '--next-color-danger-lighter',
|
|
|
+ color3: '--el-color-danger',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+ myCharts: [],
|
|
|
+ charts: {
|
|
|
+ theme: '',
|
|
|
+ bgColor: '',
|
|
|
+ color: '#303133',
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+let cardData = reactive({
|
|
|
+ cardTitle: '花费',
|
|
|
+ cardMiddle: 123,
|
|
|
+ cardBottom: 1123,
|
|
|
+ cardBottomRight: 12
|
|
|
+})
|
|
|
+
|
|
|
+// 接收一个newData对象，更新cardData
|
|
|
+function updateCardData(newData) {
|
|
|
+ for (const key in newData) {
|
|
|
+ if (cardData.hasOwnProperty(key)) {
|
|
|
+ cardData[key] = newData[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function changeCardData() {
|
|
|
+ updateCardData({
|
|
|
+ cardTitle: '新销量',
|
|
|
+ cardMiddle: 50,
|
|
|
+ cardBottom: 60,
|
|
|
+ cardBottomRight: 70
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 折线图相关功能
|
|
|
+const loading = ref(true)
|
|
|
+const chartRefOne = ref()
|
|
|
+let chartObjOne
|
|
|
+const option = {
|
|
|
+ title: {text: '花费 & 销售额'},
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ selected: {}, // 控制显隐
|
|
|
+ data: ['花费', '销售额'],
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 50, right: 65, bottom: 30, left: 65,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ // boundaryGap: false,
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3a83f7' // 第一个 Y 轴的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#f19a37' // 第二个 Y 轴的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '花费',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#3a83f7',
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
|
|
|
+ }, {
|
|
|
+ offset: 0.5, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
|
|
|
+ }, {
|
|
|
+ offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '销售额',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#f19a37',
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: 'rgba(241, 154, 55, 0.5)' // 顶部半透明
|
|
|
+ }, {
|
|
|
+ offset: 0.5, color: 'rgba(241, 154, 55, 0.2)' // 中间更透明
|
|
|
+ }, {
|
|
|
+ offset: 1, color: 'rgba(241, 154, 55, 0)' // 底部完全透明
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+const chartRefAcos = ref()
|
|
|
+let chartObjAcos
|
|
|
+const option2 = {
|
|
|
+ title: {text: 'Acos'},
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ selected: {}, // 控制显隐
|
|
|
+ data: ['Acos'],
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 50, right: 65, bottom: 30, left: 65,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ // boundaryGap: false,
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3a83f7'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Acos',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed'
|
|
|
+ },
|
|
|
+ legendHoverLink: false,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#3a83f7',
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
|
|
|
+ }, {
|
|
|
+ offset: 0.5, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
|
|
|
+ }, {
|
|
|
+ offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+const chartRefCPCandCTR = ref()
|
|
|
+let chartObjCPCandCTR
|
|
|
+const option3 = {
|
|
|
+ title: {text: '点击成本 & 点击率'},
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ selected: {}, // 控制显隐
|
|
|
+ data: ['点击成本', '点击率'],
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 50, right: 65, bottom: 30, left: 65,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ // boundaryGap: false,
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3a83f7' // 第一个 Y 轴的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#f19a37' // 第二个 Y 轴的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '点击成本',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#3a83f7',
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
|
|
|
+ }, {
|
|
|
+ offset: 0.5, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
|
|
|
+ }, {
|
|
|
+ offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '点击率',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#f19a37',
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: 'rgba(241, 154, 55, 0.5)' // 顶部半透明
|
|
|
+ }, {
|
|
|
+ offset: 0.5, color: 'rgba(241, 154, 55, 0.2)' // 中间更透明
|
|
|
+ }, {
|
|
|
+ offset: 1, color: 'rgba(241, 154, 55, 0)' // 底部完全透明
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+const chartRefTotalPurchases = ref()
|
|
|
+let chartObjTotalPurchases
|
|
|
+const option4 = {
|
|
|
+ title: {text: '订单数'},
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ selected: {}, // 控制显隐
|
|
|
+ data: ['订单数'],
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 50, right: 65, bottom: 30, left: 65,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ // boundaryGap: false,
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3a83f7'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '订单数',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed'
|
|
|
+ },
|
|
|
+ legendHoverLink: false,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#3a83f7',
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
|
|
|
+ }, {
|
|
|
+ offset: 0.5, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
|
|
|
+ }, {
|
|
|
+ offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+const chartRefImpandCli = ref()
|
|
|
+let chartObjImpandCli
|
|
|
+const option5 = {
|
|
|
+ title: {text: '曝光量 & 点击量'},
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ selected: {}, // 控制显隐
|
|
|
+ data: ['曝光量', '点击量'],
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 50, right: 65, bottom: 30, left: 65,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ // boundaryGap: false,
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3a83f7' // 第一个 Y 轴的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#f19a37' // 第二个 Y 轴的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '曝光量',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#3a83f7',
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
|
|
|
+ }, {
|
|
|
+ offset: 0.5, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
|
|
|
+ }, {
|
|
|
+ offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '点击量',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#f19a37',
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: 'rgba(241, 154, 55, 0.5)' // 顶部半透明
|
|
|
+ }, {
|
|
|
+ offset: 0.5, color: 'rgba(241, 154, 55, 0.2)' // 中间更透明
|
|
|
+ }, {
|
|
|
+ offset: 1, color: 'rgba(241, 154, 55, 0)' // 底部完全透明
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const initLine = async () => {
|
|
|
+ chartObjOne = echarts.init(chartRefOne.value)
|
|
|
+ chartObjAcos = echarts.init(chartRefAcos.value)
|
|
|
+ chartObjCPCandCTR = echarts.init(chartRefCPCandCTR.value)
|
|
|
+ chartObjTotalPurchases = echarts.init(chartRefTotalPurchases.value)
|
|
|
+ chartObjImpandCli = echarts.init(chartRefImpandCli.value)
|
|
|
+ // const items = await getDataset()
|
|
|
+ // option.dataset.source = items
|
|
|
+ chartObjOne.setOption(option)
|
|
|
+ chartObjAcos.setOption(option2)
|
|
|
+ chartObjCPCandCTR.setOption(option3)
|
|
|
+ chartObjTotalPurchases.setOption(option4)
|
|
|
+ chartObjImpandCli.setOption(option5)
|
|
|
+ loading.value = false
|
|
|
+}
|
|
|
+
|
|
|
+function resizeChart() {
|
|
|
+ chartObjOne.resize()
|
|
|
+ chartObjAcos.resize()
|
|
|
+ chartObjCPCandCTR.resize()
|
|
|
+ chartObjTotalPurchases.resize()
|
|
|
+ chartObjImpandCli.resize()
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ await initLine()
|
|
|
+ window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
|
|
|
+ setTimeout(() => {
|
|
|
+ resizeChart()
|
|
|
+ }, 0)
|
|
|
+})
|
|
|
+
|
|
|
+onBeforeMount(async () => {
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+$homeNavLengh: 8;
|
|
|
+.home-container {
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .home-card-one,
|
|
|
+ .home-card-two,
|
|
|
+ .home-card-three {
|
|
|
+ .home-card-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 130px;
|
|
|
+ border-radius: 4px;
|
|
|
+ transition: all ease 0.3s;
|
|
|
+ padding: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: var(--el-box-shadow-light);
|
|
|
+ color: var(--el-text-color-primary);
|
|
|
+ border: 1px solid var(--next-border-color-light);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
|
|
+ transition: all ease 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-icon {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ border-radius: 100%;
|
|
|
+ flex-shrink: 1;
|
|
|
+
|
|
|
+ i {
|
|
|
+ color: var(--el-text-color-placeholder);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-card-one {
|
|
|
+ @for $i from 0 through 3 {
|
|
|
+ .home-one-animation#{$i} {
|
|
|
+ opacity: 0;
|
|
|
+ animation-name: error-num;
|
|
|
+ animation-duration: 0.5s;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ animation-delay: calc($i/10) + s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-card-two,
|
|
|
+ .home-card-three {
|
|
|
+ .home-card-item {
|
|
|
+ height: 400px;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .home-monitor {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .flex-warp-item {
|
|
|
+ width: 25%;
|
|
|
+ height: 111px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .flex-warp-item-box {
|
|
|
+ margin: auto;
|
|
|
+ text-align: center;
|
|
|
+ color: var(--el-text-color-primary);
|
|
|
+ display: flex;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: var(--next-bg-color);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--el-color-primary-light-9);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @for $i from 0 through $homeNavLengh {
|
|
|
+ .home-animation#{$i} {
|
|
|
+ opacity: 0;
|
|
|
+ animation-name: error-num;
|
|
|
+ animation-duration: 0.5s;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ animation-delay: calc($i/10) + s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.down {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+</style>
|
