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

<script>
import mixins from '@/mixins';
import {legend, grid, yAxis, xAxis} from '@/defaultSetting';
export default {
    mixins: [mixins],
    data () {
        return {
        };
    },
    mounted() {
        this.eveSet();
    },
    methods: {
        // 对画布绑定事件
        eveSet() {
            this.chart.on('click', (params) => {
                let event = params.event.event;
                event.stopPropagation();
                this.$emit('goToPage', params);
            });
        },
        updateChart () {
            let legends = [];
            let series = [];
            this.data.values.forEach(item => {
                legends.push(item.name);
                series.push({
                    name: item.name,
                    type: 'bar',
                    smooth: true,
                    stack: 'all',
                    barMaxWidth: 30,
                    barWidth:20,
                    barCategoryGap:'20%',/*多个并排柱子设置柱子之间的间距*/
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}',
                            fontSize: 14
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaStyle: {type: 'default'},
                            color: this.setting.barColor
                        }},
                    data: item.data
                });
            });
            const options = {
                color: this.setting.color,
                title: {
                    text: this.data.title
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: this.setting.toolbox,
                grid: {
                    ...grid,
                    left: '1%',
                    right: '5%',
                    top: 50,
                    bottom: 30
                },
                legend: {
                    ...legend,
                    data: legends
                },
                xAxis: [{
                    ...xAxis,
                    type: 'value',
                    name: this.unit,
                    position: 'bottom',
                    splitLine: {lineStyle:{type:'dashed'}}
                }],
                yAxis: [{
                    ...yAxis,
                    type: 'category',
                    axisLine: {show: false},
                    axisLabel: {show: false},
                    axisTick: {show: false},
                    splitLine: {show: false},
                    data: this.data.keys.map(item => {
                        return item.replace(' ', '\n');
                    })
                }],
                series: series
            };
            this.chart.setOption(options, true);
        }
    }
};
</script>
