<template>
    <div class="es-barchart" ref="barChart"></div>
</template>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts');
// 引入柱状图组件
require('echarts/lib/chart/bar');
// 引入提示框和title组件
require('echarts/lib/component/legend');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
export default {
    name: 'es-barchart',
    props: {
        // 横坐标轴值list
        // ["周一", "周二", "周三"]
        xAxis: {
            type: Array,
            required: true
        },
        // 图例说明
        // ["语文课", "数学课"]
        legendList: {
            type: Array,
            required: true
        },
        // 值: 二维数组，每个图例所对应横坐标值的数组
        // [[1,2,3], [2,2,2]]
        dataList: {
            type: Array,
            required: true
        },
        // 表格标题
        title: {
            type: String,
            required: false,
            default: ''
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '100%'
        }
    },
    mounted() {},
    methods: {
        initBarChart() {
            let self = this;
            // 图表
            let barChart = echarts.init(self.$refs.barChart);
            // 系列列表
            let seriesList = [];
            // 渲染文本
            let label = {
                normal: {
                    show: true,
                    position: 'insideRight',
                    formatter: function(params) {
                        // 不渲染值为0的数据
                        return params.value === 0 ? '' : params.value;
                    }
                }
            };
            self.legendList.forEach((element, index) => {
                seriesList.push({
                    name: element,
                    type: 'bar',
                    stack: '总量',
                    label: label,
                    data: self.dataList[index]
                });
            });
            barChart.clear();
            barChart.setOption({
                title: {
                    text: self.title,
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    // 解决title与legend重叠
                    data: ['', '', ''].concat(self.legendList)
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '30%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: self.xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: seriesList
            });
        }
    },
    watch: {
        dataList: {
            handler(value) {
                if (value && value.length > 0) {
                    let self = this;
                    self.$nextTick(() => {
                        self.$refs.barChart.style.width = self.width;
                        self.$refs.barChart.style.height = self.height;
                        self.initBarChart();
                    });
                }
            },
            deep: true,
            immediate: true
        }
    }
};
</script>

<style lang="scss" scoped>
.es-barchart {
    width: 100%;
    height: 500px;
    position: relative;
}
</style>
