<template>
  <a-card :bordered="false" title="年度项目总完成情况">
    <a-form-model :model="query" layout="inline">
      <a-form-model-item label="区域">
        <a-dropdown>
          <span>
            宁波市
            <a-icon type="down" />
          </span>
          <a-menu slot="overlay">
            <a-menu-item>宁波市</a-menu-item>
            <a-menu-item>鄞州区</a-menu-item>
          </a-menu>
        </a-dropdown>
      </a-form-model-item>
      <a-form-model-item label="年份">
        <a-dropdown>
          <span>
            2021
            <a-icon type="down" />
          </span>
          <a-menu slot="overlay">
            <a-menu-item>2021</a-menu-item>
            <a-menu-item>2020</a-menu-item>
            <a-menu-item>2019</a-menu-item>
          </a-menu>
        </a-dropdown>
      </a-form-model-item>
    </a-form-model>
    <div :style="{ height: '300px' }" ref="chart"></div>
  </a-card>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      query: {
        area: '宁波市',
        year: '2021',
      },
      options: {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      },
    };
  },
  mounted() {
    var chartDom = this.$refs.chart;
    var myChart = echarts.init(chartDom);
    myChart.setOption(this.options);
  },
};
</script>