|
@@ -2,14 +2,20 @@
|
|
|
<moduleEnclosure title="趋势图">
|
|
|
<template v-slot:rightce>
|
|
|
<div class="classbtns">
|
|
|
- <div @click="cindex = 0;" :class="{
|
|
|
- select: cindex === 0,
|
|
|
- }">
|
|
|
+ <div
|
|
|
+ @click="cindex = 0"
|
|
|
+ :class="{
|
|
|
+ select: cindex === 0
|
|
|
+ }"
|
|
|
+ >
|
|
|
浏览量(PV)
|
|
|
</div>
|
|
|
- <div @click="cindex = 1;" :class="{
|
|
|
- select: cindex === 1,
|
|
|
- }">
|
|
|
+ <div
|
|
|
+ @click="cindex = 1"
|
|
|
+ :class="{
|
|
|
+ select: cindex === 1
|
|
|
+ }"
|
|
|
+ >
|
|
|
访客量(UV)
|
|
|
</div>
|
|
|
</div>
|
|
@@ -21,28 +27,28 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { bigGetLarge3 } from '@/api/common.js';
|
|
|
-import moduleEnclosure from '@/components/moduleEnclosure.vue';
|
|
|
-import * as echarts from 'echarts';
|
|
|
-import { csize } from '@/utils/const.js';
|
|
|
+import { bigGetLarge3 } from '@/api/common.js'
|
|
|
+import moduleEnclosure from '@/components/moduleEnclosure.vue'
|
|
|
+import * as echarts from 'echarts'
|
|
|
+import { csize } from '@/utils/const.js'
|
|
|
export default {
|
|
|
components: {
|
|
|
- moduleEnclosure,
|
|
|
+ moduleEnclosure
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- cindex: 0,
|
|
|
- };
|
|
|
+ cindex: 0
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
this.dingshishuaxin()
|
|
|
},
|
|
|
beforeUnmount() {
|
|
|
- this.mouseenter();
|
|
|
+ this.mouseenter()
|
|
|
},
|
|
|
watch: {
|
|
|
cindex() {
|
|
|
- this.mouseenter();
|
|
|
+ this.mouseenter()
|
|
|
this.dingshishuaxin()
|
|
|
}
|
|
|
},
|
|
@@ -66,30 +72,30 @@ export default {
|
|
|
eac(value) {
|
|
|
var that = this
|
|
|
if (that.myChart) {
|
|
|
- that.myChart.dispose();
|
|
|
+ that.myChart.dispose()
|
|
|
}
|
|
|
- var times = value.map((item) => {
|
|
|
- var str1 = item.dstr.split(' ')[0];
|
|
|
- return str1.slice(5);
|
|
|
- });
|
|
|
- var data = value.map((item) => {
|
|
|
- return item[["num", "userNum"][this.cindex]];
|
|
|
- });
|
|
|
+ var times = value.map(item => {
|
|
|
+ var str1 = item.dstr.split(' ')[0]
|
|
|
+ return str1.slice(5)
|
|
|
+ })
|
|
|
+ var data = value.map(item => {
|
|
|
+ return item[['num', 'userNum'][this.cindex]]
|
|
|
+ })
|
|
|
// 计算刻度的间隔
|
|
|
- var interval = Math.ceil((Math.max(...data) - Math.min(...data)) / 2); // 确保有 3 个刻度
|
|
|
+ var interval = Math.ceil((Math.max(...data) - Math.min(...data)) / 2) // 确保有 3 个刻度
|
|
|
interval = interval < 1 ? 1 : interval
|
|
|
// 计算 y 轴的最大值和最小值
|
|
|
- var maxY = Math.ceil(Math.max(...data) / interval) * interval;
|
|
|
+ var maxY = Math.ceil(Math.max(...data) / interval) * interval
|
|
|
maxY = maxY < 3 ? 3 : maxY
|
|
|
- var minY = Math.floor(Math.min(...data) / interval) * interval;
|
|
|
+ var minY = Math.floor(Math.min(...data) / interval) * interval
|
|
|
minY = minY < 1 ? 1 : minY
|
|
|
var option = {
|
|
|
tooltip: {
|
|
|
confine: true,
|
|
|
trigger: 'axis',
|
|
|
formatter: function (params) {
|
|
|
- var res = '' + params[1].name + ' : ' + params[1].value;
|
|
|
- return `<div style="color:#fff;">${res}</div>`;
|
|
|
+ var res = '' + params[1].name + ' : ' + params[1].value
|
|
|
+ return `<div style="color:#fff;">${res}</div>`
|
|
|
},
|
|
|
transitionDuration: 0,
|
|
|
backgroundColor: '#092a66',
|
|
@@ -101,19 +107,19 @@ export default {
|
|
|
type: 'line',
|
|
|
lineStyle: {
|
|
|
type: 'dashed',
|
|
|
- color: '#8AB1DC',
|
|
|
- },
|
|
|
- },
|
|
|
+ color: '#8AB1DC'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
title: {
|
|
|
text: '',
|
|
|
- subtext: '',
|
|
|
+ subtext: ''
|
|
|
},
|
|
|
grid: {
|
|
|
- x: csize(40),
|
|
|
- y: csize(40),
|
|
|
- x2: csize(20),
|
|
|
- y2: csize(20),
|
|
|
+ x: csize(50),
|
|
|
+ y: csize(50),
|
|
|
+ x2: csize(30),
|
|
|
+ y2: csize(30)
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: times,
|
|
@@ -121,10 +127,10 @@ export default {
|
|
|
interval: Math.floor(times.length / 15),
|
|
|
showMinLabel: true, //是否显示最小 tick 的 label
|
|
|
showMaxLabel: true, //是否显示最大 tick 的 label
|
|
|
- fontSize: csize(12),
|
|
|
+ fontSize: csize(12)
|
|
|
},
|
|
|
axisTick: {
|
|
|
- show: false,
|
|
|
+ show: false
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
@@ -132,10 +138,10 @@ export default {
|
|
|
symbolOffset: 12,
|
|
|
lineStyle: {
|
|
|
fontSize: csize(12),
|
|
|
- color: '#8AB1DC',
|
|
|
- },
|
|
|
+ color: '#8AB1DC'
|
|
|
+ }
|
|
|
},
|
|
|
- boundaryGap: false,
|
|
|
+ boundaryGap: false
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
@@ -145,99 +151,106 @@ export default {
|
|
|
type: 'value',
|
|
|
name: '人(次)',
|
|
|
nameTextStyle: {
|
|
|
- fontSize: csize(16),
|
|
|
+ fontSize: csize(16)
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
- color: '#8AB1DC',
|
|
|
- },
|
|
|
+ color: '#8AB1DC'
|
|
|
+ }
|
|
|
},
|
|
|
axisLabel: {
|
|
|
margin: 10,
|
|
|
textStyle: {
|
|
|
- fontSize: csize(12),
|
|
|
+ fontSize: csize(12)
|
|
|
},
|
|
|
// 使用函数来自定义刻度间隔
|
|
|
interval: function (index, value) {
|
|
|
// 根据具体情况自定义间隔逻辑,确保是整数
|
|
|
- return Math.ceil(value) === value ? 1 : 0; // 如果刻度是整数,返回1,否则返回0
|
|
|
+ return Math.ceil(value) === value ? 1 : 0 // 如果刻度是整数,返回1,否则返回0
|
|
|
}
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
- color: 'rgba(256, 256, 256, 0.1)',
|
|
|
- },
|
|
|
+ color: 'rgba(256, 256, 256, 0.1)'
|
|
|
+ }
|
|
|
},
|
|
|
axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- },
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }
|
|
|
],
|
|
|
dataZoom: [
|
|
|
{
|
|
|
- type: 'inside',
|
|
|
- },
|
|
|
+ type: 'inside'
|
|
|
+ }
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
// For shadow
|
|
|
type: 'line',
|
|
|
barWidth: 10,
|
|
|
- smooth: true, // 设置平滑曲线
|
|
|
- symbol: 'none', // 隐藏节点
|
|
|
+ smooth: true, // 设置平滑曲线
|
|
|
+ symbol: 'none', // 隐藏节点
|
|
|
itemStyle: {
|
|
|
- color: 'rgba(0,0,0,0.05)',
|
|
|
+ color: 'rgba(0,0,0,0.05)'
|
|
|
},
|
|
|
barGap: '-100%',
|
|
|
barCategoryGap: '40%',
|
|
|
data: data,
|
|
|
- animation: false,
|
|
|
+ animation: false
|
|
|
},
|
|
|
{
|
|
|
type: 'line',
|
|
|
barWidth: 10,
|
|
|
- smooth: true, // 设置平滑曲线
|
|
|
- symbol: 'none', // 隐藏节点
|
|
|
+ smooth: true, // 设置平滑曲线
|
|
|
+ symbol: 'none', // 隐藏节点
|
|
|
itemStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{ offset: 0, color: '#0efdff' },
|
|
|
{ offset: 0.5, color: '#188df0' },
|
|
|
- { offset: 1, color: '#188df0' },
|
|
|
+ { offset: 1, color: '#188df0' }
|
|
|
]),
|
|
|
- barBorderRadius: 5,
|
|
|
+ barBorderRadius: 5
|
|
|
},
|
|
|
- areaStyle: { // 设置阴影样式
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 线性渐变,从上到下
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(45,77,149,1)' // 阴影起始颜色
|
|
|
- }, { // 线性渐变,从上到下
|
|
|
- offset: 0.5,
|
|
|
- color: 'rgba(45,77,149,.5)' // 阴影起始颜色
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(45,77,149,.2)' // 阴影结束颜色
|
|
|
- }])
|
|
|
+ areaStyle: {
|
|
|
+ // 设置阴影样式
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ // 线性渐变,从上到下
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(45,77,149,1)' // 阴影起始颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 线性渐变,从上到下
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(45,77,149,.5)' // 阴影起始颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(45,77,149,.2)' // 阴影结束颜色
|
|
|
+ }
|
|
|
+ ])
|
|
|
},
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{ offset: 0, color: '#2378f7' },
|
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
|
- { offset: 1, color: '#0efdff' },
|
|
|
+ { offset: 1, color: '#0efdff' }
|
|
|
]),
|
|
|
- barBorderRadius: 5,
|
|
|
- },
|
|
|
+ barBorderRadius: 5
|
|
|
+ }
|
|
|
},
|
|
|
- data: data,
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- that.myChart = new echarts.init(document.getElementById('chartmain_fkell'));
|
|
|
- that.myChart.setOption(option);
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ data: data
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ that.myChart = new echarts.init(document.getElementById('chartmain_fkell'))
|
|
|
+ that.myChart.setOption(option)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|