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

<script>
import { Area } from '@antv/g2plot';
export default {
  props:{
    lineData:{
      type:Array,
      required:true
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    this.pieChart()
  },

  methods: {
    /* 图表 */
    pieChart() {
      const data = this.lineData
      let _vm= this
      if(this.chart){
        this.chart.update({
          data:data
        })
        return
      }
      this.chart = new Area("abstractechar",{
        data,
        xField: 'date',
        yField: 'value',
        colorField: '#0096FF',
        areaStyle:()=>{
          return { fill: '#0096FF' }
        },
        yAxis: {
          line:{
            subTickLine:{
              count:5,
              max:100
            },
          },
        },
        line:{
          lineWidth:0,
          lineDash:[0,0]
        },

        tooltip: {
      }})
      this.chart.render()

    },

  },
  computed: {
    // 直接当做普通属性调用不加括号
    // 任何data中数据变化立即重新计算
    // 计算属性会缓存
    textColor() {
      return this.$store.getters.theme
    },
  },
  watch: {
    textColor: function (val) {
      this.chart.update({
        areaStyle:{
          fill:val == 'default' ? '#282828' : '#C7C7C7'
        }
      })


    },
    lineData: function (val) {
      this.pieChart()
    },
  },
}
</script>

<style scoped>
#abstractechar {
  padding: 0 30px;
  width:100%;
  height: 151px;
}
</style>