<template>

  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons'); // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '330px'
    },
    blXData:{
      type: Array,
      default: []
    },
    blLgData:{
      type: Array,
      default: []
    },
    blSerData:{
      type: Array,
      default: []
    },
    blTitle:{
      type:String,
      default: ''
    }
  },
  data() {
    return {
      maxA:null,
      chart: null,
      dates:[
        {
          name: '项目数',
          barWidth:30,
          type: 'bar',
          data: [300,200,100,76,99,65]
        },
        {
          name: '经费数',
          type: 'line',
          yAxisIndex: 1,
          data: [2000,1234,2222,1111,4444,2345]
        }
      ]
    }
  },
  watch: {
    blSerData (newV, oldV) {
      this.initChart()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null
  },
  methods: {
    initChart() {
      let maxa=300;
      let maxb=50000;
      let intervala=50;
      let intervalb=10000;
      //this.blSerData=this.dates


      let as =this.blSerData
      if (this.blSerData!=undefined&&this.blSerData!=null&&this.blSerData.length>0){
       let arr=this.blSerData[0].data
       let arr2=this.blSerData[1].data
        if (arr.length>0&&arr2.length>0){
          maxa = Math.max.apply(null,arr);
          maxb = Math.max.apply(null,arr2);
          intervala=this.intervala(parseInt(maxa/5))
          intervalb=this.intervala(parseInt(maxb/5))
          let x=parseInt(maxa/intervala)
          let y=parseInt(maxb/intervalb)
          maxa=(x+2)*intervala;
          maxb=(y+2)*intervalb;
        }

     }

      this.chart = echarts.init(this.$el, 'macarons');
      if(!this.blSerData.length){
        var html =
          '<div style="text-align:center;"><div style="line-height:260px;color:#868686; font-size: 26px;">暂无数据</div>' +
          '<h3 style="color: #74bcff; font-size: 18px;">'+this.blTitle+' 项目数、经费数</h3></div>';
        this.$el.innerHTML = html;
        this.$el.removeAttribute('_echarts_instance_')
      }

      this.chart.setOption({
        title: {
          left: "1%",
          top: "1%",
          text: this.blTitle+" 项目数、经费数",
          x:'center',
          y:'bottom',
          textStyle: {
            fontSize: 24,
            fontFamily: "Arial",
            lineHeight: 30,
            color: "rgb(43,97,159)",
            fontWeight:"bold"
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          confine:true
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 50,
          top: 90,
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     dataView: {show: true, readOnly: false},
        //     magicType: {show: true, type: ['line', 'bar']},
        //     restore: {show: true},
        //     saveAsImage: {show: true}
        //   }
        // },
        legend: {
          bottom: "1%",
          // data: ['项目数', '经费数']
          data: this.blLgData,
          itemGap: 40,


        },

        xAxis: [
          {
            type: 'category',
  //           data: ['2016', '2017', '2018', '2019', '2020', '2021'],
               data: this.blXData,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              inside: false,
              textStyle: {
                fontSize:'16',
                itemSize:''

              }
            },
            axisLine: {
              lineStyle: {
                color: "rgb(164, 164, 164)"
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '个数',
            min: 0,
            max: maxa,
            interval: intervala,
            axisLabel: {
              formatter: '{value} ',
              fontSize:18,
            },
            nameTextStyle: {
              color: 'rgb(102,102,102)'
            },
            axisLine: {
              lineStyle: {
                color: "rgb(164, 164, 164)"
              }
            },
          },
          {
            type: 'value',
            name: '经费',
            min: 0,
            max: maxb,
            interval: intervalb,
            axisLabel: {
              formatter: '{value}万元 ',
              fontSize:18,

            },
            nameTextStyle: {
              color: 'rgb(102,102,102)'
            },
            axisLine: {
              lineStyle: {
                color: "rgb(164, 164, 164)"
              }
            },
          }
        ],
        series: this.blSerData,
        textStyle:{
          fontSize:18,
          lineOverflow : 'none'
        }
      //     [
      //     {
      //       name: '项目数',
      //       type: 'bar',
      //       data: [300,200,100,76,99,65]
      //     },
      //     {
      //       name: '经费数',
      //       type: 'line',
      //       yAxisIndex: 1,
      //       data: [2000,1234,2222,1111,4444,2345]
      //     }
      //   ]
      });
      const _this = this;
      this.chart.on("click",function (params) {

        _this.$emit('yearToPage',params.name)


      });
    },
    intervala(item){
      let count=1;
      let newitem=item;

      while (true){
        newitem=newitem/10;
        if (newitem<1){
          break
        }else {
          count=count*10;
        }
      }

      let intervala=parseInt(item/count)
      intervala=intervala*count
      return intervala;
    }
  }
}
</script>

<style>
  .a{
    margin-top: 10px;
  }
</style>
