<template>
  <div class="full-size">
    <div
      ref="myEchart"
      class="full-size"
    ></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {

    }
  },
  watch: {
    chartData: {
      deep: true,
      handler (newVal) {
        this.chartData = newVal
        this.draw()
      }
    }
  },
  mounted () {
    this.draw()
  },
  methods: {
    draw () {
      const myEchart = echarts.init(this.$refs.myEchart, 'light')
      const o = this.chartData
      // y轴设置
      const y = Object.assign(
        {},
        {
          name: '金额/元',
          nameLocation: 'end',
          nameTextStyle: {
            color: '#999999',
            fontSize: 14,
            padding: [0, 10, -5, 0]

          },
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(163,167,174,0.5)',
              type: 'dotted'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#E0E5EB'
            }
          },
          axisLabel: {
            color: '#999999',
            fontSize: 14
          },
          axisTick: {
            show: false
          }
        },
        o.yAxis
      )
      const option = {
        // 图标的位置
        grid: {
          top: '15%',
          bottom: '15%',
          left: '10%'
        },
        // x轴
        xAxis: {
          name: '时间',
          nameLocation: 'end',
          nameTextStyle: {
            color: '#999999',
            fontSize: 14,
            padding: [0, 0, 0, -10]

          },
          data: o.xData,
          axisLabel: {
            color: '#999999',
            fontSize: 14
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#E0E5EB'
            }
          }
        },
        // y轴
        yAxis: y,
        // 柱状图和线状图数据展示
        series: o.series
      }
      myEchart.setOption(option)
    }
  }
}
</script>
