<template>
  <div class="container">
    <toolbar @onSearch="filterData" />
    <white-board>
      <div id="echart" style="width: 100%;height: 500px;" />
    </white-board>
  </div>
</template>

<script>
import toolbar from './toolbar'
import { getStastics as getList } from '@/model/article'

export default {
  name: 'ArticleEchart',

  components: { toolbar },

  props: {
  },

  data() {
    return {
      items: []
    }
  },

  methods: {
    async filterData(params) {
      const { success, data, msg } = await getList({
        data: params
      })
      if (success) {
        this.drawChart(data)
      } else {
        this.$message.error(msg)
      }
    },

    drawChart({ titles, pvs, collects }) {
      const myChart = this.$echarts.init(document.getElementById('echart'))
      const options = {
        color: ['#006699', '#4cabce'],
        legend: {
          data: ['pv', '收藏']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        dataZoom: [{
          type: 'slider',
          show: true, // flase直接隐藏图形
          xAxisIndex: [0],
          left: '9%', // 滚动条靠左侧的百分比
          bottom: 0,
          start: 0, // 滚动条的起始位置
          end: 50 // 滚动条的截止位置（按比例分割你的柱状图x轴长度）
        }],
        xAxis: [{
          type: 'category',
          axisTick: { show: false },
          data: titles,
          axisLabel: {
            interval: 0,
            rotate: 40
          },
          grid: {
            left: '10%',
            bottom: '35%'
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: 'pv',
          type: 'bar',
          barGap: 0,
          label: {
            show: true,
            position: 'top',
            distance: 15,
            align: 'center',
            verticalAlign: 'middle',
            rotate: 0,
            formatter: '{c}',
            fontSize: 16
          },
          data: pvs
        }, {
          name: '收藏',
          type: 'bar',
          barGap: 0,
          label: {
            show: true,
            position: 'top',
            distance: 15,
            align: 'center',
            verticalAlign: 'middle',
            rotate: 0,
            formatter: '{c}',
            fontSize: 16
          },
          data: collects
        }]
      }
      myChart.setOption(options)
    }
  }
}
</script>

<style scoped>
.header {
  padding: 4px 20px 6px 20px;
}
.toolbar-txt {
  font-size: 13px;
  padding: 5px;
  line-height: 1.7;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
