<template>
    <div :id="id" style="height: 100%;width:100%;"></div>
</template>

<script>
export default {
    data() {
      return {
        myChart: ''
      }
    },
    props: {
      id: {
        type: String
      },
      xlabel: {
        type: Array
      },
      data: {
        type: Array,
        default: function() {
          return [
            { name: '總量', data: [30, 7, 0, 5, 4, 2, 6, 5, 3, 2, 2] },
            { name: '語文', data: [30, 7, 0, 5, 4, 2, 6, 5, 3, 2, 2] },
            { name: '英語', data: [30, 7, 0, 5, 4, 2, 6, 5, 3, 2, 2] },
            { name: '數學', data: [30, 7, 0, 5, 4, 2, 6, 5, 3, 2, 2] },
            { name: '科學', data: [30, 7, 0, 5, 4, 2, 6, 5, 3, 2, 2] },
            { name: '綜合', data: [30, 7, 0, 5, 4, 2, 6, 5, 3, 2, 2] }
          ]
        }
      },
      callBack: {
        type: String
      }
    },
    mounted() {
        this.drawLine()
    },
    methods: {
        drawLine() {
            let barcolor = ['#FF6B6A', '#FF9FF4', '#48DBFC', '#1CD0A1', '#FDC958', '#FFAD76']
            let _this = this
            let max = 0
            let series = []
            let legend = []
            this.data.forEach(function(item) {
              legend.push(item.name)
              series.push({
                name: item.name,
                type: 'bar',
                data: item.data,
                barWidth: 10, // 柱子宽度
                // barGap: 1, //柱子之间间距
                itemStyle: {
                  normal: {
                    color: function(params) {
                      var num = barcolor.length
                      return barcolor[params.seriesIndex % num]
                    }
                  }
                }
              })
              let dataMax = Math.max(...item.data)
              if (dataMax > max) {
                max = dataMax
              }
            })
            max = max + 20

            // 基于准备好的dom，初始化echarts实例
            this.myChart = this.$echarts.init(document.getElementById(this.id))
            this.myChart.setOption({
              title: {
                text: _this.$t('talMgmt.text49'),
                left: 'center',
                textStyle: {
                  color: '#fafafa',
                  fontWeight: 100
                }
              },
              legend: {
                top: 20,
                textStyle: {
                    color: '#fff'
                },
                data: legend
              },
              backgroundColor: '#343a4073',
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              grid: {
                left: '0',
                right: '0',
                bottom: '1px',
                top: '0',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                boundaryGap: true,
                data: _this.xlabel,
                axisLabel: {
                    // inside: true,
                    textStyle: {
                        color: '#fafafa'
                    }
                },
                axisLine: {
                  show: true,
                    lineStyle: {
                      width: 1,
                      color: 'rgba(185, 193, 173, 0.63)'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                      width: 1,
                      color: 'rgba(185, 193, 173, 0.63)'
                    }
                }
              },
              yAxis: {
                type: 'value',
                max: max,
                minInterval: 1,
                axisLabel: {
                  inside: true,
                  textStyle: {
                      color: 'transparent'
                  }
                },
                axisLine: {
                  show: true,
                    lineStyle: {
                      width: 1,
                      color: 'rgba(185, 193, 173, 0.63)'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                      width: 1,
                      color: 'rgba(185, 193, 173, 0.63)'
                    }
                }
              },
              series: series
            })
        }
    }
}

</script>

<style>
</style>
