146 lines
3.6 KiB
Vue
146 lines
3.6 KiB
Vue
|
<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>
|