<template>
  <div>
    <charts id="bizchart4" height="180px" width="460px" :option="option" />
  </div>
</template>

<script lang="js">
import charts from '../../../components/echarts/index.vue'
import * as echarts from "echarts";

export default {
  components: {charts},
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          axisTick: {
            show: false
          },
          type: 'category',
          data: ['1.', '2.', '3.', '4.', '5.', '6.'],
          axisLine: {
            lineStyle: {
              color: "#a4a2a2",
            }
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: "#a4a2a2",
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color:'rgba(128,126,126,0.25)'
            },
          },
        },
        label: {
          show: true,
          position: 'top',
          color:'rgba(245,126,31,0.74)',
        },
        series: [
          {
            name: '分享',
            type: 'bar',
            data: [23, 19, 18, 14, 11, 10],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(22,58,143)'
                }, {
                  offset: 1,
                  color: 'rgba(20,42,68)'
                }]),
              }
            },
          },
          {
            name: '收藏',
            type: 'bar',
            data: [15, 13, 10, 10, 8, 6],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(135,85,34)'
                }, {
                  offset: 1,
                  color: 'rgba(67,42,55)'
                }]),
              }
            },
          }
        ]
      }
    }
  },
  created() {
    this.getPublicArticlePag()
  },
  methods: {
    getPublicArticlePag() {
      this.$api.biz.getPublicArticlePag({current: 1, size: 5}).then(res => {
        if (res.code === 200) {
          this.option.series[0].data=[]
          this.option.series[1].data=[]
          res.data.records.map(item=>{
            this.option.series[0].data.push(item.shareCount)
            this.option.series[1].data.push(item.addToFavCount)
          })
        }
      })
    }
  }
}
</script>
