<template>
    <div :id="idstr"></div>
</template>

<script>
export default {
  data () {
    return {
      option: {},
      chart: null
    }
  },
  props: ['message', 'idstr'],
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      const vm = this
      // 基于准备好的dom，初始化echarts实例
      vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
      // 清空图表
      vm.chart.clear()
      vm.option = {
        legend: {
          data: vm.message.legend,
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          top: '15%',
          left: '10%',
          right: '10%',
          bottom: '15%'
        },
        xAxis: [
          {
            type: 'category',
            data: vm.message.xAxis,
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              lineStyle: {
                color: '#FFF'
              }
            }
          }
        ],
        yAxis: {
          type: 'value',
          name: '金额 ：万元',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,.3)'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          }
        },
        series: [
          {
            name: vm.message.legend[0],
            type: 'bar',
            barWidth: '25%',
            itemStyle: {
              color: '#30DDF4'
            },
            data: vm.message.data.inflow
          },
          {
            name: vm.message.legend[1],
            type: 'bar',
            barWidth: '25%',
            itemStyle: {
              color: '#D6FFBA'
            },
            data: vm.message.data.flowOut
          },
          {
            name: vm.message.legend[2],
            type: 'bar',
            barWidth: '25%',
            itemStyle: {
              color: '#E23AA2'
            },
            data: vm.message.data.netInflow
          }
        ]
      }

      vm.drawBar()
      // window.addEventListener("resize",()=>{
      //     chart.resize();
      // });
    },
    drawBar () {
      // 绘制图表
      const vm = this
      vm.chart.setOption(vm.option)
      vm.eventList()
    },
    eventList () {
      const vm = this
      vm.chart.on('click', function (params) {
      })
    }
  },
  watch: {
    message: {
      handler () {
        const vm = this
        setTimeout(function () {
          vm.drawLine()
        }, 0)
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
