<template>
  <div id="node7"/>
</template>

<script>
import G2 from '@antv/g2'

export default {
  mounted() {
    this.rander()
  },
  methods: {
    rander() {
      var data = [{
        type: '公告',
        sales: 500
      }, {
        type: '活动',
        sales: 400
      }, {
        type: '帖子',
        sales: 1000
      }]
      var chart = new G2.Chart({
        container: 'node7',
        forceFit: true,
        height: 282,
        padding: [80, 20, 30, 40]
      })
      chart.source(data)
      chart.scale('', {
        tickInterval: 200
      })
      chart.guide().html({
        position: ['5%', '-25%'],
        html: '<div class="chart7-title"><p class="title">内容运营统计</p></div>'
      })
      chart.guide().html({
        position: ['90%', '-15%'],
        html: `<div class="chart-right-btn"><span>发布数量</span>&nbsp;<i class='el-icon-arrow-down'></i></div>`
      })
      chart.axis('sales', {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: '#a4b6c5' // 设置线的颜色
        },
        grid: null,
        label: {
          textStyle: {
            textAlign: 'end', // 文本对齐方向，可取值为： start middle end
            fill: '#a4b6c5', // 文本的颜色
            fontSize: '12', // 文本大小
            textBaseline: 'middle' // 文本基准线，可取 top middle bottom，默认为middle
          }
        }
      })
      chart.axis('type', {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: '#a4b6c5' // 设置线的颜色
        },
        grid: null,
        label: {
          textStyle: {
            fill: '#a4b6c5', // 文本的颜色
            fontSize: '12' // 文本大小
          }
        }
      })
      chart.interval().position('type*sales').color('type', function(val) {
        if (val === '公告') {
          return '#53F9FF'
        } else if (val === '活动') {
          return '#FF5367'
        }
        return '#3F688D'
      })
      chart.render()
    }
  }
}
</script>

<style lang="scss">
.chart7-title {
  .title {
    font-size: 13px;
    color: #a4b6c5;
  }
}
</style>
