<template>
  <div 
    :id="id" 
    :style="`width:${curWidth}px;height:${curHeight}px`"
  >
  </div>
</template>
<script>
/**
 * @author chenyanqing
 * @date 2019/10/19
 * @Description bar
 * @props 数据格式：{
 *    id: '',
      width: 0,
      height: 0,
      source: [
        ['案件分析', '2016', '2017', '2018', '2019']  // x轴
        ['刑事案件', 43.3, 85.8, 93.7, 93.7],        //y轴数据
        ['民事纠纷事件', 83.1, 73.4, 55.1, 83.1,],
        ['聚众群体事件', 86.4, 65.2, 82.5, 83.1,],
        ['黄赌毒事件', 72.4, 53.9, 39.1, 83.1,],
        ['消防事件', 43.3, 85.8, 93.7, 93.7, 83.1,],
        ['突发应急事件', 83.1, 73.4, 55.1, 83.1,],
        ['治安事件', 86.4, 65.2, 82.5, 83.1,],
      ]
    }
 * 
 */

import { countSize } from "@/utils/utils"
export default {
  props: ['id','width','height','source'],
  data(){
    return {
      curWidth: this.width,
      curHeight: this.height,
      option:{
        legend: {
          align: "left",
          right: 8,
          itemWidth: 8,
          itemHeight: 8,
          icon: 'rect',
          textStyle: {
            color: "#fff",
            fontSize: 8,
          }
        },
        tooltip: {},
        color: ['#249df8', "#fdb628", "#68dfe3", "#eb6f49" ],
        grid: {
          left: "0",
          right: "0",
          bottom: "10",
          top: '20',
          containLabel: true
        },
        dataset: {
          source: [
            // ['案件分析', '2016', '2017', '2018', '2019'],  //xAxisData
            // ['刑事案件', 43.3, 85.8, 93.7, 93.7],          //source
            // ['民事纠纷事件', 83.1, 73.4, 55.1, 83.1,],
            // ['聚众群体事件', 86.4, 65.2, 82.5, 83.1,],
            // ['黄赌毒事件', 72.4, 53.9, 39.1, 83.1,],
            // ['消防事件', 43.3, 85.8, 93.7, 93.7, 83.1,],
            // ['突发应急事件', 83.1, 73.4, 55.1, 83.1,],
            // ['治安事件', 86.4, 65.2, 82.5, 83.1,],
          ]
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: "#0b146f" //轴线的颜色
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize:'8',
            }
          },
        },
        yAxis: {
          name: "起",
          nameTextStyle: {
            color: '#fff',
            fontSize: '8',
            verticalAlign:'middle',
          },
          axisLine: {
            lineStyle: {
              color: "#0b146f" //轴线的颜色
            }
          },
          splitLine: {
            lineStyle: {
              color: ["#101641"],
              type: "solid"
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize:'8',
            }
          },
        },
        series: [
          {type: 'bar'},
          {type: 'bar'},
          {type: 'bar'},
          {type: 'bar'}
        ]
      }
    }
  },
  watch : {
    width(newVal, oldVal){
      this.curWidth = newVal;
      this.refreshEchart()
    },
    height(newVal, oldVal){
      this.curHeight = newVal;
      this.refreshEchart()
    },
    source(newVal, oldVal){
      this.option.dataset.source = newVal;
      console.log(this.option.dataset.source)
      this.refreshEchart()
    },
  },
  mounted() {
    if(this.source.length){
      this.option.dataset.source = this.source;
      this.unit && (this.option.yAxis.name = this.unit);
      this.initEchart();
    }
  },
  methods:{
    refreshEchart(){
      if(this.curWidth && this.curHeight && this.source.length){
        this.initEchart();
      }
    },
    initEchart() {
      const _div = document.getElementById(this.id);
      setTimeout(() => {
        let myChart = this.$echarts.init(_div);
          myChart.setOption(this.option,true);
          window.onresize = myChart.resize;
      }, 500);
    }
  }
};
</script>

<style scoped>
</style>