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

<script>
import G2 from '@antv/g2'
import DataSet from '@antv/data-set'
export default {
  mounted() {
    this.rander()
  },
  methods: {
    rander() {
      var data = [{
        'year': '11.17',
        'ACME': 300
      }, {
        'year': '11.18',
        'ACME': 280
      }, {
        'year': '11.19',
        'ACME': 320
      }, {
        'year': '11.20',
        'ACME': 250
      }, {
        'year': '11.21',
        'ACME': 310
      }, {
        'year': '11.22',
        'ACME': 323
      }, {
        'year': '11.23',
        'ACME': 350
      }]
      var dv = new DataSet.View().source(data)
      dv.transform({
        type: 'fold',
        fields: ['ACME'],
        key: 'type',
        value: 'value'
      })
      var chart = new G2.Chart({
        container: 'node6',
        forceFit: true,
        height: 282,
        padding: [80, 20, 30, 40]
      })
      chart.source(dv, {
        value: {
          alias: 'The Share Price in Dollars',
          formatter: function formatter(val) {
            return val
          }
        },
        year: {
          range: [0, 1]
        }
      })
      chart.axis('value', {
        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('year', {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: '#a4b6c5' // 设置线的颜色
        },
        grid: null,
        label: {
          textStyle: {
            fill: '#a4b6c5', // 文本的颜色
            fontSize: '12' // 文本大小
          }
        }
      })
      chart.tooltip({
        crosshairs: true
      })
      chart.guide().html({
        position: ['90%', '-15%'],
        html: `<div class="chart-right-btn"><span>日活跃量</span>&nbsp;<i class='el-icon-arrow-down'></i></div>`
      })
      chart.area().position('year*value').color('type', function(val) { return '#53F9FF' }).shape('smooth')
      chart.line().position('year*value').color('type', function(val) { return '#53F9FF' }).size(2).shape('smooth')
      chart.guide().html({
        position: ['5%', '-25%'],
        html: '<div class="chart5-title"><p class="title">上线活跃用户</p></div>'
      })
      chart.render()
    }
  }
}
</script>

<style lang="scss">
</style>
