Big-Data-Lab
/
CET-vue-3.0
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

文件路由

This commit is contained in:
xbx 2024-03-26 13:30:08 +08:00
parent a4012e1b3a
commit 9f00876040
5 changed files with 5532 additions and 4501 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9450
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

146
src/views/cet/cet-ana-1.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<div>
<p class="title">中英足球联赛上座情况</p>
<a-row :gutter="24">
<a-col :xl="12" :style="{ marginBottom: '24px' }">
<div class="container">
<div id="map1" style="width: 660px; height: 400px"></div>
</div>
</a-col>
<a-col :xl="12" :style="{ marginBottom: '24px' }">
<div class="container">
<div id="map2" style="width: 660px; height: 400px"></div>
</div>
</a-col>
</a-row>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
methods: {
map1Chart() {
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
let myChart = echarts.init(document.getElementById("map1"));
// 指定图表的配置项和数据
let option = {
title: {
text: "总上座人数对比",
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ["英国", "中国"],//上方的标签
},
xAxis: {
data: ["一级", "二级", "三级", "四级"],
axisLabel: {
interval: 0,
// rotate: 30
}
},
yAxis: {
name: '总上座人数(万)',
},
series: [
{
name: "英国",
type: "bar",
data: [1450, 1100, 450, 300],
label: {
formatter: '{@value}'
}
},
{
name: "中国",
type: "bar",
data: [552, 180, 200, 0],
label: {
formatter: '{@value}'
}
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
map2Chart() {
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
let myChart = echarts.init(document.getElementById("map2"));
// 指定图表的配置项和数据
let option = {
title: {
text: "平均上座人数对比",
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ["英国", "中国"],//上方的标签
},
xAxis: {
data: ["一级", "二级", "三级", "四级"],
axisLabel: {
interval: 0,
// rotate: 30
}
},
yAxis: {
name: '平均上座人数(千)',
},
series: [
{
name: "英国",
type: "bar",
data: [38, 21, 8, 5],
label: {
formatter: '{@value}'
}
},
{
name: "中国",
type: "bar",
data: [23, 7, 2, 0],
label: {
formatter: '{@value}'
}
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
mounted() {
this.map1Chart();
this.map2Chart();
}
}
</script>
<style lang="less" scoped>
.container {
display: flex;
background-color: #fff;
padding: 15px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.title {
font-size: 34px;
color: rgb(8, 8, 8);
font-weight: bold;
}
</style>

146
src/views/cet/cet-ana-2.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<div>
<p class="title">中英足球联赛上座情况</p>
<a-row :gutter="24">
<a-col :xl="12" :style="{ marginBottom: '24px' }">
<div class="container">
<div id="map1" style="width: 660px; height: 400px"></div>
</div>
</a-col>
<a-col :xl="12" :style="{ marginBottom: '24px' }">
<div class="container">
<div id="map2" style="width: 660px; height: 400px"></div>
</div>
</a-col>
</a-row>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
methods: {
map1Chart() {
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
let myChart = echarts.init(document.getElementById("map1"));
// 指定图表的配置项和数据
let option = {
title: {
text: "总上座人数对比",
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ["英国", "中国"],//上方的标签
},
xAxis: {
data: ["一级", "二级", "三级", "四级"],
axisLabel: {
interval: 0,
// rotate: 30
}
},
yAxis: {
name: '总上座人数(万)',
},
series: [
{
name: "英国",
type: "bar",
data: [1450, 1100, 450, 300],
label: {
formatter: '{@value}'
}
},
{
name: "中国",
type: "bar",
data: [552, 180, 200, 0],
label: {
formatter: '{@value}'
}
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
map2Chart() {
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
let myChart = echarts.init(document.getElementById("map2"));
// 指定图表的配置项和数据
let option = {
title: {
text: "平均上座人数对比",
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ["英国", "中国"],//上方的标签
},
xAxis: {
data: ["一级", "二级", "三级", "四级"],
axisLabel: {
interval: 0,
// rotate: 30
}
},
yAxis: {
name: '平均上座人数(千)',
},
series: [
{
name: "英国",
type: "bar",
data: [38, 21, 8, 5],
label: {
formatter: '{@value}'
}
},
{
name: "中国",
type: "bar",
data: [23, 7, 2, 0],
label: {
formatter: '{@value}'
}
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
mounted() {
this.map1Chart();
this.map2Chart();
}
}
</script>
<style lang="less" scoped>
.container {
display: flex;
background-color: #fff;
padding: 15px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.title {
font-size: 34px;
color: rgb(8, 8, 8);
font-weight: bold;
}
</style>

146
src/views/cet/seat.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<div>
<p class="title">中英足球联赛上座情况</p>
<a-row :gutter="24">
<a-col :xl="12" :style="{ marginBottom: '24px' }">
<div class="container">
<div id="map1" style="width: 660px; height: 400px"></div>
</div>
</a-col>
<a-col :xl="12" :style="{ marginBottom: '24px' }">
<div class="container">
<div id="map2" style="width: 660px; height: 400px"></div>
</div>
</a-col>
</a-row>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
methods: {
map1Chart() {
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
let myChart = echarts.init(document.getElementById("map1"));
// 指定图表的配置项和数据
let option = {
title: {
text: "总上座人数对比",
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ["英国", "中国"],//上方的标签
},
xAxis: {
data: ["一级", "二级", "三级", "四级"],
axisLabel: {
interval: 0,
// rotate: 30
}
},
yAxis: {
name: '总上座人数(万)',
},
series: [
{
name: "英国",
type: "bar",
data: [1450, 1100, 450, 300],
label: {
formatter: '{@value}'
}
},
{
name: "中国",
type: "bar",
data: [552, 180, 200, 0],
label: {
formatter: '{@value}'
}
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
map2Chart() {
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
let myChart = echarts.init(document.getElementById("map2"));
// 指定图表的配置项和数据
let option = {
title: {
text: "平均上座人数对比",
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ["英国", "中国"],//上方的标签
},
xAxis: {
data: ["一级", "二级", "三级", "四级"],
axisLabel: {
interval: 0,
// rotate: 30
}
},
yAxis: {
name: '平均上座人数(千)',
},
series: [
{
name: "英国",
type: "bar",
data: [38, 21, 8, 5],
label: {
formatter: '{@value}'
}
},
{
name: "中国",
type: "bar",
data: [23, 7, 2, 0],
label: {
formatter: '{@value}'
}
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
mounted() {
this.map1Chart();
this.map2Chart();
}
}
</script>
<style lang="less" scoped>
.container {
display: flex;
background-color: #fff;
padding: 15px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.title {
font-size: 34px;
color: rgb(8, 8, 8);
font-weight: bold;
}
</style>

145
src/views/dashboard/Analysis/index.vue
View File

@ -1,5 +1,146 @@
<template>
<span>这是首页，数据类型</span>
<div>
<p class="title">中英足球联赛上座情况</p>
<a-row :gutter="24">
<a-col :xl="12" :style="{ marginBottom: '24px' }">
<div class="container">
<div id="map1" style="width: 660px; height: 400px"></div>
</div>
</a-col>
<a-col :xl="12" :style="{ marginBottom: '24px' }">
<div class="container">
<div id="map2" style="width: 660px; height: 400px"></div>
</div>
</a-col>
</a-row>
</div>
</template>
<script lang="ts" setup>
<script>
import * as echarts from 'echarts';
export default {
methods: {
map1Chart() {
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
let myChart = echarts.init(document.getElementById("map1"));
// 指定图表的配置项和数据
let option = {
title: {
text: "总上座人数对比",
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ["英国", "中国"],//上方的标签
},
xAxis: {
data: ["一级", "二级", "三级", "四级"],
axisLabel: {
interval: 0,
// rotate: 30
}
},
yAxis: {
name: '总上座人数(万)',
},
series: [
{
name: "英国",
type: "bar",
data: [1450, 1100, 450, 300],
label: {
formatter: '{@value}'
}
},
{
name: "中国",
type: "bar",
data: [552, 180, 200, 0],
label: {
formatter: '{@value}'
}
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
map2Chart() {
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
let myChart = echarts.init(document.getElementById("map2"));
// 指定图表的配置项和数据
let option = {
title: {
text: "平均上座人数对比",
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ["英国", "中国"],//上方的标签
},
xAxis: {
data: ["一级", "二级", "三级", "四级"],
axisLabel: {
interval: 0,
// rotate: 30
}
},
yAxis: {
name: '平均上座人数(千)',
},
series: [
{
name: "英国",
type: "bar",
data: [38, 21, 8, 5],
label: {
formatter: '{@value}'
}
},
{
name: "中国",
type: "bar",
data: [23, 7, 2, 0],
label: {
formatter: '{@value}'
}
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
mounted() {
this.map1Chart();
this.map2Chart();
}
}
</script>
<style lang="less" scoped>
.container {
display: flex;
background-color: #fff;
padding: 15px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.title {
font-size: 34px;
color: rgb(8, 8, 8);
font-weight: bold;
}
</style>