<template>
  <div class="echarts-line-bar">
    <div class="echarts-line-bar_btns">
      <el-radio-group v-model="type" size="small" @input="handleInput">
        <el-radio-button label="count">贸易次数</el-radio-button>
        <el-radio-button label="weight">重量(KG)</el-radio-button>
        <el-radio-button label="num">数量</el-radio-button>
        <el-radio-button label="money">金额($)</el-radio-button>
      </el-radio-group>
    </div>

    <div id="main" style="height:250px;"></div>
  </div>
</template>

<script>
export default {
  name: 'EchartsLineBar',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      type: 'count',
      xAxisData: [],
      seriesData: []
    }
  },
  mounted () {
    this.initData();
    this.initEcharts()
  },
  methods: {
    initData () {
      this.data.data.forEach(item => {
        this.xAxisData.push(item.date);
        this.seriesData.push(item.tradecount);
      })
    },
    initEcharts () {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: [
          '#37A2DA',
          '#F6EA81',
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.seriesData,
            type: 'bar',
            barWidth: '50%'
          },
          {
            data: this.seriesData,
            type: 'line',
            smooth: true
          }
        ]
      };

      option && myChart.setOption(option);
    },
    handleInput (v) {
      this.seriesData = []
      if (v === 'count') {
        this.data.data.forEach(item => {
          this.seriesData.push(item.tradecount);
        })
      }
      if (v === 'weight') {
        this.data.data.forEach(item => {
          this.seriesData.push(item.weight);
        })
      }
      if (v === 'num') {
        this.data.data.forEach(item => {
          this.seriesData.push(item.count);
        })
      }
      if (v === 'money') {
        this.data.data.forEach(item => {
          this.seriesData.push(item.money);
        })
      }
      this.initEcharts()
    }
  }
}
</script>