<template>
  <div style="width:100%;height:100%" ref="chartsDOM">

  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
  props:{
    lineDataX:{
      type:Array,
      default:{}
    },
    lineDataY:{
      type:Array,
      default:[]
    },
    rotate:{
      type:Number,
      default:0
    },
    color:{
      type:Array,
      default:()=>{
        return ['#0077CC','#333']
      }
    }
  },
    data() {
      return {
        myChart: null
      }
    },
    mounted() {
      this.initEchartsMap()
    },
    methods: {
      initEchartsMap() {
        this.myChart = echarts.init(this.$refs["chartsDOM"]);
        var option = {
          color: ['#0077CC', '#0284cd', '#4cabce'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '3%',
            bottom: '12%',
            top: "10%",
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: this.lineDataX,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              show:true,
              interval: 0,
              rotate: this.rotate,
              textStyle: {
                show: true,
                color: this.color[1]
              },
            }
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              textStyle: {
                show: true,
                color: this.color[1]
              },
            }
          }],
          series: this.lineDataY
          // [{
          //   name: '数量',
          //   type: 'bar',
          //   barWidth: '60%',
          //   data: this.lineDataY
          // }]
        };
        this.myChart.setOption(option);
      },
      resetCharts() {
        this.myChart.resize()
      }
    }


  }
</script>

<style>
</style>
