<template>
  <div>
    <div class="dateBox">
      <div class="block">
        <span class="demonstration">签订日期</span>
        <el-date-picker
          v-model="dateValue"
          type="year"
          style="width: 150px;"
          placeholder="选择年"
        />
      </div>
    </div>
    <div class="chartBox clearfix">
      <div class="barChartBox" style="width: 700px;height: 240px;margin-top: 20px;border: 1px solid lightgray;float: left">
        <div class="barChartTitle" style="height: 32px;background-color: #f8f8f9;line-height: 32px;border-bottom: 1px solid lightgray">
          <span style="font-size: 14px;color: #333333;font-weight: bold;">年度委托量统计</span>
        </div>
        <div class="barChartBody" style="padding: 15px;">
          <div id="barChart" style="width: 100%;height: 180px;" />
        </div>
      </div>
      <div class="pieChartBox" style="width: 350px;height: 240px;margin-top: 20px;border: 1px solid lightgray;float: left">
        <div class="pieChartTitle" style="height: 32px;background-color: #f8f8f9;line-height: 32px;border-bottom: 1px solid lightgray">
          <span style="font-size: 14px;color: #333333;font-weight: bold;">年度委托量统计</span>
        </div>
        <div class="pieChartBody" style="padding: 15px;">
          <div id="pieChart" style="width: 100%;height: 180px;" />
        </div>
      </div>
    </div>
    <div class="tableBox">
      <el-table
        :data="tableData"
        border
        show-summary
        style="width: 100%;"
      >
        <el-table-column
          v-for="(item,index) in tableColumn"
          :key="index"
          :prop="item.key"
          :label="item.title"
          sortable
          class="tablecolumn"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'YearDeclara',
  data() {
    return {
      dateValue: ' ',
      tableColumn: [
        { title: '签订日期', key: 'date' },
        { title: '委托数量', key: 'entrustNum' },
        { title: '委托额度', key: 'entrustLimit' },
        { title: '实收额度', key: 'chargedLImit' },
        { title: '未收额度', key: 'unchargedLImit' }
      ],
      tableData: [
        {
          date: '2020-1',
          entrustNum: 1,
          entrustLimit: 1,
          chargedLImit: 1,
          unchargedLImit: 1
        },
        {
          date: '2020-2',
          entrustNum: 2,
          entrustLimit: 2,
          chargedLImit: 2,
          unchargedLImit: 2
        },
        {
          date: '2020-3',
          entrustNum: 3,
          entrustLimit: 3,
          chargedLImit: 3,
          unchargedLImit: 3
        },
        {
          date: '2020-4',
          entrustNum: 4,
          entrustLimit: 4,
          chargedLImit: 4,
          unchargedLImit: 4
        }
      ]
    }
  },
  mounted() {
    this.barChart()
    this.pieChart()
  },
  methods: {
    barChart() {
      const echarts = require('echarts')
      const myChart = echarts.init(document.getElementById('barChart'))
      myChart.setOption({
        // color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          // left: '2%',
          // right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            splitLine: {
              show: false
            },
            data: [
              '2020-1',
              '2020-2',
              '2020-3',
              '2020-4',
              '2020-5',
              '2020-6',
              '2020-7',
              '2020-8',
              '2020-9',
              '2020-10',
              '2020-11',
              '2020-12'
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            name: '委托量(份)'
          },
          {
            type: 'value',
            splitLine: {
              show: false
            },
            name: '委托金额(元)'
          }
        ],
        series: [
          {
            name: '委托量',
            type: 'bar',
            barWidth: '60%',
            data: [9, 16, 59, 39, 89],
            itemStyle: {
              normal: {
                color: 'lightblue'
              }
            }
          },
          {
            name: '委托金额',
            type: 'line',
            // barWidth: '60%',
            yAxisIndex: 1,
            data: [0, 0, 0, 100000, 2000],
            itemStyle: {
              normal: {
                color: 'red'
              }
            }
          }
        ]
      })
    },
    pieChart() {
      const echarts = require('echarts')
      const myChart = echarts.init(document.getElementById('pieChart'))
      myChart.setOption({
        title: {
          text: '委托总金额',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: ['2020-1', '2020-2', '2020-3', '2020-4', '2020-5']
        },
        series: [
          {
            name: '委托金额',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 0, name: '2020-1' },
              { value: 0, name: '2020-2' },
              { value: 0, name: '2020-3' },
              { value: 100000, name: '2020-4' },
              { value: 2000, name: '2020-5' }
            ]
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
</style>
