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

<script>
import echarts from 'echarts3'
import imgsrc from "@ability/views/logAuditManage/assets/img/pic-bar.png";

// require('echarts/theme/infographic')
// require('echarts/theme/vintage')
// import { debounce } from './../../utils'
import resize from './mixins/resize'
const animationDuration = 6000
    export default {
        name: 'BarChart',
        mixins: [resize],
        data() {
            return {
                chart:null,
            }
        },
        props:{
            className:{
                type:String,
                default:'chart'
            },
            height:{
                type:String,
                default:'200px'
            },
            width:{
                type:String,
                default:'100%'
            },
            chartBarData:{
                type:Object,
                required:true
            }
        },
        methods:{
            //渲染柱状图
            initChart(){
                this.chart = echarts.init(this.$el,'infographic')
                this.setOptions(this.chartBarData)
            },
            setOptions({ xAxisData, yAxisDataList,title} = {}) {
              let series = [],legendList=[]
              let colorlist = ['#409EFF','#41B883','#F280C5']
              if(yAxisDataList != null){
                for(let i = 0;i<yAxisDataList.length;i++){
                    let obj = {}
                    obj.name = yAxisDataList[i].name
                    obj.type = 'pictorialBar'
                    obj.yAxisIndex= '0'
                    obj.symbol= 'image://' + imgsrc
                    obj.symbolSize= ['68%', '100%']
                    obj.symbolPosition= 'center'
                    obj.barMaxWidth= 58// 最大宽度
                    obj.symbolOffset= [0, 0]
                    // obj.itemStyle={
                    //   color:'blue',
                    // }
                    // this.$set(obj.itemStyle,'color',colorlist[i])
                    // obj.itemStyle.color = colorlist[i]

                    obj.data =  yAxisDataList[i].data
                    // console.log(555,obj)
                    // // obj.itemStyle.color=function(params){
                    // //   console.log(params)
                    // //   // return color[i]
                    // // }
                    series.push(obj)
                    legendList.push(obj.name)
                }
                  // yAxisDataList.forEach(item => {
                  //   let obj = {}
                  //   obj.name = item.name
                  //   obj.type = 'bar'
                  //   obj.data =  item.data
                  //   series.push(obj)
                  //   legendList.push(obj.name)
                  // });
              }
              this.chart.setOption({
                tooltip: {
                  trigger: 'axis',
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                  },
                  formatter: function(params) {
                    let res
                    var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4485FE"></span>'
                      return res = params[0].seriesName+'<br/>' + dotHtml + params[0].value;
                  }
                },
                title:{
                  text:title
                },
                legend: {
                  data: legendList,
                  left:'right',
                  show:false,

                },
                grid: {
                  top: '8%',
                  left: '2%',
                  right: '2%',
                  bottom: '5%',
                  containLabel: true
                 },
                 dataZoom: [{
                  "show": true,
                  "height": 8,
                  "xAxisIndex": [
                    0
                  ],
                  bottom:'0%',
                  "start": 0,
                  "end": 90,
                  handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                  handleSize: '110%',
                  handleStyle:{
                    color:"rgba(204,187,225,0.5)",

                  },
                  textStyle:{
                    color:"rgba(204,187,225,0.7)"
                  },
                  borderColor:"rgba(204,187,225,0.5)",
                  fillerColor:"rgba(233,232,233,0.6)",
                 },
                 {
                  "type": "inside",
                  "show": true,
                  "height": 15,
                  "start": 1,
                  "end": 35
                 }],
                xAxis: [{
                  type: 'category',
                  data: xAxisData,
                  axisTick: {
                    alignWithLabel: true
                  }
                }],
                yAxis: [{
                  type: 'value',
                  axisTick: {
                    show: false
                  }
                }],
                series: series
              })
            }
          },
        watch: {
          chartBarData: {
            deep: true,
            handler(val) {
              this.setOptions(val)
            }
          }
        },
        mounted() {
          this.initChart()
        },
        beforeDestroy() {
          if (!this.chart) {
            return
          }
          this.chart.dispose()
          this.chart = null
        },
    }
</script>
