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

<script>
import * as echarts from 'echarts';
import chartMixin from '@/mixins/ChartMixin';
export default {
  mixins: [chartMixin],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
	chartData: {
	  type: Object,
	  required: true
	}
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
		this.setOptions(this.chartData) 
    },
	setOptions({ date,gjzs, bfb} = {}) {
	  this.chart.setOption({
		  tooltip: {
		      trigger: 'axis',
		      axisPointer: {
		        type: 'shadow'
		      },
		    },
		  grid: { x: 50, y: 25, x2: 30, y2: 35 },
			  xAxis: {
			    data: date,
			    axisLabel: {
			      color: '#fff'
			    },
			    axisTick: {
			      show: false
			    },
			    axisLine: {
			      show: false
			    },
			  },
			  yAxis: {
			    axisLine: {
			      show: false
			    },
			    axisTick: {
			      show: false
			    },
				splitLine: {//网格线
					// show:false,
					lineStyle: {
					    color: 'rgba(194, 201, 230, 0.2)', // 设置网格线颜色为灰色
					     type: 'solid', // 设置网格线类型为虚线，可选'solid'、'dotted'、'dashed'等
					    width: 1 // 设置网格线宽度
					}
				},
			    axisLabel: {
			      color: '#fff'
			    }
			  },
			  title: {
					text: '件',
					left: "20",
					top: '-5',
					textStyle: {
					  color: "#FFFFFF",
					  fontWeight: '400',
					  fontSize: 12,
					  lineHeight: 24, // 行高
					}
			    },
				legend: {
					itemHeight: 10,
					itemWidth: 10,
					textStyle: {
					    color: '#ffffff' // 设置图例文字颜色为深灰色
					},
					right:'0',
				  data: ['本月告警数', '上月告警数']
				},
			  series: [
			    {
					name:'本月告警数',
			      type: 'bar',
			      showBackground: false,
				  barWidth:8,
				  barGap: 0.5, // 设置类目间距为20%的类目宽度
			      itemStyle: {
					barBorderRadius:[3, 3, 0, 0],
			        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			          { offset: 0.2, color: '#3A6DFF' },
			          { offset: 0.5, color: 'rgba(0,240,255,0.45)' },
			          { offset: 1, color: 'rgba(115,219,232,0.2)' }
			        ]),
					borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					  { offset: 0.2, color: '#56687C' },
					  { offset: 0.5, color: '#56687C' },
					  { offset: 1, color: '#56687C' }
					])
			      },
			      // emphasis: {
			      //   itemStyle: {barBorderRadius:[3, 3, 0, 0],
			      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			      //      { offset: 0.2, color: '#3A6DFF' },
			      //      { offset: 0.5, color: 'rgba(0,240,255,0.45)' },
			      //      { offset: 1, color: 'rgba(115,219,232,0.2)' }
			      //     ])
			      //   }
			      // },
			      data: gjzs
			    },
				{
					name:'上月告警数',
				  type: 'bar',
				  showBackground: false,
				   barWidth:8,
				   barGap: 0.5, // 设置类目间距为20%的类目宽度
				  itemStyle: {
					  barBorderRadius:[3,3, 0, 0],
				    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				      { offset: 0.2, color: '#FFFC00' },
				      { offset: 0.5, color: 'rgba(255,126,0,0.45)' },
				      { offset: 1, color: 'rgba(232,181,115,0.2)' }
				    ]),
					borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					  { offset: 0.2, color: '#56687C' },
					  { offset: 0.5, color: '#56687C' },
					  { offset: 1, color: '#56687C' }
					])
				  },
				  // emphasis: {
				  //   itemStyle: {barBorderRadius:[3, 3, 0, 0],
				  //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				  //      { offset: 0.2, color: '#56687C' },
				  //      { offset: 0.5, color: '#56687C' },
				  //      { offset: 1, color: '#56687C' }
				  //     ])
				  //   }
				  // },
				  data: bfb
				}
			  ]
	  },true)
	}
  }
}
</script>
<style lang="less" scoped>

</style>
