<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>