<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 {
        };
    },
    methods: {
        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,
                    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
                },
                legend: {
                    ...legend,
                    data: legends
                },
                xAxis: [{
                    ...xAxis,
                    type: 'category',
                    data: this.data.keys.map(item => {
                        return item.replace(' ', '\n');
                    })
                }],
                yAxis: [{
                    ...yAxis,
                    name: this.unit
                }],
                series: series
            };
            this.chart.setOption(options, true);
        }
    }
};
</script>
