CET-vue-3.0/src/views/cet/cet-ana-1.vue

146 lines
3.6 KiB
Vue
Raw Normal View History

2024-03-26 13:30:08 +08:00
<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>