Skip to content

S
SuperMan
Commit 9a21b6a6 authored by 罗超's avatar 罗超
Browse files
Options

新增

parent 02303c1b
Hide whitespace changes
Inline Side-by-side
Showing with 318 additions and 3 deletions
src/components/rank/components/citiescount.vue 0 → 100644
View file @ 9a21b6a6
<template>
<div id="citiesCount" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
};
},
props: {
chartData: {
type: Object,
default: null
}
},
mounted() {
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('citiesCount');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'item'
},
color: [
'#04cf89', '#6184fa', '#faa42e', '#ffd1ce',
'#8dd1e1', '#f95d6a', '#2ca02c', '#ff7f0e',
'#9467bd', '#bcbd22'
],
grid: {
left: 0,
right: 0,
top: 3,
bottom: 3,
containLabel: true,
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['70%', '90%'], // 饼图内外半径
avoidLabelOverlap: false, // 避免标签重叠
itemStyle: {
barBorderRadius: [10, 10, 0, 0],
borderWidth: 5, // 设置扇形之间的间隙宽度
borderColor: '#fff', // 扇形间隙颜色（通常设置为白色以突出间隙）
},
label: {
show: false, // 默认不显示标签
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 15,
FontFace: 'PingFang SC Regular'
}
},
labelLine: {
show: false // 不显示标签指示线
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#chart {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/components/rank/components/pagecount.vue 0 → 100644
View file @ 9a21b6a6
<template>
<div id="pageChart" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
barData: {
name: '新增同业数',
data: [123, 211, 178, 289, 90, 156, 222, 101, 267, 199],
},
xAxisData: [
'11/01', '11/02', '11/03', '11/04', '11/05','11/06', '11/07', '11/08', '11/09', '11/10','11/11', '11/12'
],
unit: '人',
};
},
props: {
chartData: {
type: Object,
default: null
}
},
mounted() {
if (this.chartData) {
this.barData = this.chartData.barData;
this.lineData = this.chartData.lineData;
this.unit = this.chartData.unit;
this.xAxisData = this.chartData.xAxisData;
}
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('pageChart');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis', // 设置为 'axis' 以确保鼠标悬浮在曲线任意位置时都能触发事件
axisPointer: {
type: 'line', // 使用竖线跟随鼠标
lineStyle: {
color: '#00000022',
width: 1,
type: 'dashed',
}
},
},
grid: {
right: 0,
top: 0,
bottom: 0,
},
yAxis: {
type: 'category',
data: this.xAxisData,
axisLine: {
lineStyle: {
color: '#eee',
},
},
xAxisLabel: {
show: true,
color: '#999',
},
axisLabel: {
color: '#121212',
interval: this.calculateInterval(this.xAxisData.length)
},
axisTick: {
show: false,
},
axisPointer: {
type: 'line'
}
},
xAxis: {
type: 'value',
name: '',
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#eee',
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value} ' + this.unit,
},
},
series: [
{
name: this.barData.name,
type: 'bar',
barWidth: 20,
itemStyle: {
color: '#6184fa',
barBorderRadius: [0, 4, 4, 0]
},
data: this.barData.data,
}
],
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#chart {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/components/rank/dataCount.vue
View file @ 9a21b6a6
<template> <template>
<div class="full-box"> <div class="full-box">
<div class="data-box"> <div class="data-box" style="padding-bottom: 20px;">
<div class="row items-center" style="margin-bottom: 20px;"> <div class="row items-center" style="margin-bottom: 20px;">
<div class="page-title col">平台数据</div> <div class="page-title col">平台数据</div>
<div class="row items-center"> <div class="row items-center">
...@@ -258,16 +258,55 @@ ...@@ -258,16 +258,55 @@
</div> </div>
</div> </div>
<div class="q-mt-md row">
<div class="card rounded big col">
<div style="margin: 0 12px; " class="row items-center">
<div class="col">
<div class="sub-title">页面访问Top10</div>
<div class="">
<span class="text-info">2024/11/30 - 2025/01/23</span>
</div>
</div>
<el-select v-model="metricsId" style="width: 140px;">
<el-option v-for="(x,i) in metrics" :key="i" :label="x.name" :value="x.id"></el-option>
</el-select>
</div>
<div style="height: 320px; padding:0 12px;" class="q-mt-md">
<Pagecount></Pagecount>
</div>
</div>
<div class="card rounded big col q-ml-md">
<div style="margin: 0 12px; " class="row items-center">
<div class="col">
<div class="sub-title">客户分布占比</div>
<div class="">
<span class="text-info">2024/11/30 - 2025/01/23</span>
</div>
</div>
<el-select v-model="areaId" style="width: 140px;">
<el-option v-for="(x,i) in areas" :key="i" :label="x.Name" :value="x.Id"></el-option>
</el-select>
</div>
<div style="height: 320px; padding:0 12px;" class="q-mt-md">
<Citiescount></Citiescount>
</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Customer from './components/customer.vue' import Customer from './components/customer.vue'
import Coreview from './components/coreview.vue'; import Coreview from './components/coreview.vue';
import Pagecount from './components/pagecount.vue';
import Citiescount from './components/citiescount.vue'
export default { export default {
components:{ components:{
Customer, Customer,
Coreview Coreview,
Pagecount,
Citiescount
}, },
data(){ data(){
return { return {
...@@ -323,7 +362,19 @@ export default { ...@@ -323,7 +362,19 @@ export default {
dateRange:'' dateRange:''
}, },
coreId:1, coreId:1,
coreLists:[{"Id":1,"Name":"累计用户数"},{"Id":2,"Name":"日访问人数"},{"Id":3,"Name":"日打开次数"},{"Id":4,"Name":"日访问页面数"},{"Id":5,"Name":"日新增用户"},{"Id":6,"Name":"日打开次数(新用户)"},{"Id":7,"Name":"总添加人数"},{"Id":8,"Name":"新添加人数"},{"Id":9,"Name":"活跃日留存"},{"Id":10,"Name":"新增日留存"},{"Id":11,"Name":"流失用户数"},{"Id":12,"Name":"回流用户数"}] coreLists:[{"Id":1,"Name":"累计用户数"},{"Id":2,"Name":"日访问人数"},{"Id":3,"Name":"日打开次数"},{"Id":4,"Name":"日访问页面数"},{"Id":5,"Name":"日新增用户"},{"Id":6,"Name":"日打开次数(新用户)"},{"Id":7,"Name":"总添加人数"},{"Id":8,"Name":"新添加人数"},{"Id":9,"Name":"活跃日留存"},{"Id":10,"Name":"新增日留存"},{"Id":11,"Name":"流失用户数"},{"Id":12,"Name":"回流用户数"}],
metrics : [
{ id: 1, name: "访问次数" },
{ id: 2, name: "访问人数" },
{ id: 3, name: "次均停留时长" },
{ id: 4, name: "进入页次数" },
{ id: 5, name: "退出页次数" },
{ id: 6, name: "转发次数" },
{ id: 7, name: "转发人数" }
],
metricsId: 1,
areas:[{Id:1,Name:'省份'},{Id:2,Name:'城市'}],
areaId:1,
} }
}, },
created(){ created(){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment