|
@@ -53,24 +53,49 @@ echarts.use([
|
|
|
LineChart
|
|
|
])
|
|
|
|
|
|
-const lineChartOption = (xAxisData: any, seriesData: any) => {
|
|
|
+const lineChartOption = (
|
|
|
+ xAxisData: any,
|
|
|
+ seriesData: any,
|
|
|
+ countMaxCount = 5
|
|
|
+) => {
|
|
|
return {
|
|
|
- title: {
|
|
|
- text: '单位:次',
|
|
|
- textStyle: {
|
|
|
- color: '#777777',
|
|
|
- fontSize: 13,
|
|
|
- fontWeight: 400
|
|
|
- }
|
|
|
- },
|
|
|
+ // title: {
|
|
|
+ // text: '单位:次',
|
|
|
+ // textStyle: {
|
|
|
+ // color: '#777777',
|
|
|
+ // fontSize: 13,
|
|
|
+ // fontWeight: 400
|
|
|
+ // }
|
|
|
+ // },
|
|
|
legend: { show: false },
|
|
|
emphasis: { lineStyle: { width: 2 } },
|
|
|
xAxis: {
|
|
|
- boundaryGap: false,
|
|
|
data: xAxisData,
|
|
|
type: 'category',
|
|
|
axisLine: { lineStyle: { color: '#8C8C8C' } },
|
|
|
- lineStyle: { color: '#F2F2F2' }
|
|
|
+ lineStyle: { color: '#F2F2F2' },
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ // formatter: function (value, index) {
|
|
|
+ // // 第一个和最后一个标签分别居左和居右显示
|
|
|
+ // if (index === 0) {
|
|
|
+ // return '{left|' + value + '}'
|
|
|
+ // } else if (index === xAxisData.length - 1) {
|
|
|
+ // return '{right|' + value + '}'
|
|
|
+ // } else {
|
|
|
+ // return value
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // rich: {
|
|
|
+ // left: {
|
|
|
+ // align: 'left'
|
|
|
+ // },
|
|
|
+ // right: {
|
|
|
+ // align: 'right'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // align: 'left'
|
|
|
+ }
|
|
|
},
|
|
|
color: [
|
|
|
'#2DC7AA',
|
|
@@ -88,17 +113,19 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- lineStyle: { width: 1 },
|
|
|
+ lineStyle: { width: 2 },
|
|
|
data: seriesData[0],
|
|
|
symbol: 'circle',
|
|
|
+ showSymbol: false,
|
|
|
name: '浏览次数',
|
|
|
type: 'line',
|
|
|
- emphasis: { lineStyle: { width: 1 } }
|
|
|
+ emphasis: { lineStyle: { width: 2 } }
|
|
|
},
|
|
|
{
|
|
|
- lineStyle: { width: 1 },
|
|
|
+ lineStyle: { width: 2 },
|
|
|
data: seriesData[1],
|
|
|
symbol: 'circle',
|
|
|
+ showSymbol: false,
|
|
|
name: '购买次数',
|
|
|
type: 'line',
|
|
|
areaStyle: {
|
|
@@ -122,18 +149,22 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
- emphasis: { lineStyle: { width: 1 } }
|
|
|
+ emphasis: { lineStyle: { width: 2 } }
|
|
|
}
|
|
|
],
|
|
|
grid: {
|
|
|
bottom: '3%',
|
|
|
containLabel: true,
|
|
|
- left: '3%',
|
|
|
- right: '5%',
|
|
|
- top: '40'
|
|
|
+ left: '4%',
|
|
|
+ right: '4%',
|
|
|
+ top: '20'
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
+ position: function (point) {
|
|
|
+ // 固定在顶部
|
|
|
+ return [point[0], '10%']
|
|
|
+ },
|
|
|
confine: true,
|
|
|
formatter: function (params: any) {
|
|
|
return params[0].name
|
|
@@ -145,17 +176,24 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
|
|
|
textStyle: {
|
|
|
color: '#FFFFFF',
|
|
|
fontSize: 12
|
|
|
+ },
|
|
|
+ extraCssText: 'z-index: 2',
|
|
|
+ axisPointer: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#FF6079'
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
splitLine: {
|
|
|
- axisLine: { lineStyle: { color: '#8C8C8C' } },
|
|
|
+ axisLine: { lineStyle: { color: '#F2F2F2' } },
|
|
|
lineStyle: { color: ['#f2f2f2'], type: 'dashed' }
|
|
|
- }
|
|
|
+ },
|
|
|
+ splitNumber: countMaxCount
|
|
|
},
|
|
|
- dataZoom: [{ type: 'inside', throttle: 100 }],
|
|
|
- toolbox: { feature: { saveAsImage: { show: false } } }
|
|
|
+ dataZoom: [{ type: 'inside', throttle: 100 }]
|
|
|
+ // toolbox: { feature: { saveAsImage: { show: false } } }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -196,7 +234,8 @@ export default defineComponent({
|
|
|
const timeRange = ref(getTimeRange(currentType.value))
|
|
|
const statisticCounts = ref({
|
|
|
browseCount: 0,
|
|
|
- buyCount: 0
|
|
|
+ buyCount: 0,
|
|
|
+ time: ''
|
|
|
})
|
|
|
let myChart: echarts.ECharts
|
|
|
nextTick(() => {
|
|
@@ -237,12 +276,17 @@ export default defineComponent({
|
|
|
const exposure = data.exposure || []
|
|
|
const xAxisData: string[] = []
|
|
|
const exposureList: number[] = []
|
|
|
+ let maxCount = 0 // 最大人数 - 用记设置练习人数分割线
|
|
|
exposure.forEach((item: any, index: number) => {
|
|
|
xAxisData.push(item.date)
|
|
|
exposureList.push(item.exposureNum)
|
|
|
|
|
|
+ if (maxCount < (item.exposureNum || 0)) {
|
|
|
+ maxCount = item.exposureNum
|
|
|
+ }
|
|
|
if (exposure.length - 1 === index) {
|
|
|
statisticCounts.value.browseCount = item.exposureNum
|
|
|
+ statisticCounts.value.time = item.date
|
|
|
}
|
|
|
})
|
|
|
const buyList: number[] = []
|
|
@@ -254,24 +298,39 @@ export default defineComponent({
|
|
|
}
|
|
|
})
|
|
|
const yAxisData = [exposureList, buyList]
|
|
|
-
|
|
|
+ const countMaxCount = maxCount >= 5 ? 5 : Math.max(maxCount, 1)
|
|
|
myChart.clear()
|
|
|
lineChartOption &&
|
|
|
- myChart.setOption(lineChartOption(xAxisData, yAxisData))
|
|
|
+ myChart.setOption(
|
|
|
+ lineChartOption(xAxisData, yAxisData, countMaxCount),
|
|
|
+ true
|
|
|
+ )
|
|
|
+
|
|
|
myChart.on('highlight', function (params: any) {
|
|
|
const batch = params.batch || []
|
|
|
const options: any = myChart.getOption()
|
|
|
batch.forEach((item: any) => {
|
|
|
const batchIndex = item.dataIndex
|
|
|
-
|
|
|
const browseCount = options.series[0].data[batchIndex]
|
|
|
const buyCount = options.series[1].data[batchIndex]
|
|
|
+ const time = options.xAxis[0].data[batchIndex]
|
|
|
statisticCounts.value = {
|
|
|
browseCount,
|
|
|
- buyCount
|
|
|
+ buyCount,
|
|
|
+ time
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
+
|
|
|
+ // 可能出现多个时,图表同时渲染,提示有问题
|
|
|
+ setTimeout(() => {
|
|
|
+ const lastIndex = yAxisData[0].length - 1
|
|
|
+ myChart.dispatchAction({
|
|
|
+ type: 'showTip',
|
|
|
+ seriesIndex: 0, // 系列索引
|
|
|
+ dataIndex: lastIndex // 数据索引
|
|
|
+ })
|
|
|
+ }, 0)
|
|
|
} catch {
|
|
|
//
|
|
|
}
|
|
@@ -327,23 +386,37 @@ export default defineComponent({
|
|
|
<div class={styles.eChartSection}>
|
|
|
<div class={styles.eChartTitle}>
|
|
|
<div class={styles.left}>
|
|
|
- <div class={styles.item} style="--color: #2DC7AA">
|
|
|
- <span class={styles.line}></span>
|
|
|
- <span class={styles.text}>浏览次数</span>
|
|
|
- <span class={styles.num}>
|
|
|
- {statisticCounts.value.browseCount}次
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class={styles.item} style="--color: #FF6079">
|
|
|
- <span class={styles.line}></span>
|
|
|
- <span class={styles.text}>购买次数</span>
|
|
|
- <span class={styles.num}>
|
|
|
- {statisticCounts.value.buyCount}次
|
|
|
- </span>
|
|
|
+ {statisticCounts.value.time && (
|
|
|
+ <div class={styles.time}>{statisticCounts.value.time}</div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <div class={styles.twoItem}>
|
|
|
+ <div class={styles.item} style="--color: #2DC7AA">
|
|
|
+ <span class={styles.line}></span>
|
|
|
+ <span class={styles.text}>浏览次数</span>
|
|
|
+ <span class={styles.num}>
|
|
|
+ {statisticCounts.value.browseCount}次
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class={styles.item} style="--color: #FF6079">
|
|
|
+ <span class={styles.line}></span>
|
|
|
+ <span class={styles.text}>购买次数</span>
|
|
|
+ <span class={styles.num}>
|
|
|
+ {statisticCounts.value.buyCount}次
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.unit}>
|
|
|
+ <div class={styles.unitText}>单位:次</div>
|
|
|
<div class={styles.right}>
|
|
|
- <Popover v-model:show={popoverStatus.value} showArrow={false}>
|
|
|
+ <Popover
|
|
|
+ v-model:show={popoverStatus.value}
|
|
|
+ showArrow={false}
|
|
|
+ placement="bottom-end"
|
|
|
+ >
|
|
|
{{
|
|
|
default: () => (
|
|
|
<div class={'select-time'}>
|