<template>
    <!-- 均值图 -->
    <div style="width: 100%;margin-top: 5px;">
        <div class="tableTitle">
            <div>
                <span
                    style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
                ></span>
                <span style="font-size:18px;">{{ componentName + '-'  + chartName + '-' + '均值图'+'-'+status }}</span>
            </div>
        </div>
        <div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
    </div>
</template>

<script>
export default {
    name: 'barChart', //均值图图组件
    props: {
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        typeValue: {
            type: Object
        },
        // 组件名称
        componentName: {
            type: String
        },
        chartName: {
            type: String
        },
        status: {
            type: String
        },
    },
    data() {
        return { 
            
        };
    },
    methods: {
        drawBar(arr) {
            // console.log("均值图",arr)
            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
            if (myChart == null) {
                myChart = this.$echarts.init(this.$refs.barChart);
            }
            let chartData = [{ stage: '', number: 40 }];
            let option = {
                tooltip: {},
                color: ['#0EECE4'],
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '10%',
                    top: '15%',
                    z: 22
                },
                xAxis: [
                    {
                        type: 'category',
                        gridIndex: 0,
                        data: chartData.map(item => item.stage),
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    }
                ],
                yAxis: {
                    type: 'value',
                    
                    splitArea: { show: false },
                    gridIndex: 0,
                    min: 0,
                    splitNumber: 12,
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    max: 200
                },
                series: [
                    {
                        name: '外框',
                        type: 'bar',
                        barGap: '-120%', // 设置外框粗细
                        data: [300],
                        barWidth: 150,
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,0,0,.1)', // 填充色
                                barBorderWidth: 1, // 边框宽度
                                label: {
                                    // 标签显示位置
                                    show: false
                                }
                            }
                        },
                        z: 1
                    },
                    {
                        name: '平均值',
                        type: 'bar',
                        stack: 'val',
                        barWidth: 150,
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        label: {
                            show: true,
                            position: 'right',
                            // offset: [10, 20],
                            distance: 15,
                            color: '#000',
                            fontSize: 17,
                            formatter: '{c}' + '[avg]'
                        },
                        itemStyle: {
                            color: '#89c6ff'
                        },
                        data: [arr.avg],
                        zlevel: 9
                    },
                    {
                        name: '中间值',
                        type: 'bar',
                        barWidth: 150,
                        stack: 'val',
                        label: {
                            show: true,
                            position: 'left',
                            distance: 15,
                            color: '#000',
                            fontSize: 17,
                            formatter: '{c}' + '[med]',
                            rich: {}
                        },
                        itemStyle: {
                            color: '#67b4fd'
                        },
                        data: [arr.med],
                        zlevel: 9
                    },

                    {
                        name: '最大值',
                        type: 'bar',
                        stack: 'val',
                        barWidth: 150,
                        barGap: '-100%',
                        data: [arr.max],
                        label: {
                            show: true,
                            position: 'right',
                            distance: 10,
                            color: '#000',
                            fontSize: 17,
                            offset: [0, -30],
                            formatter: '{c}' + '[max]'
                        },
                        itemStyle: {
                            color: '#319cff'
                        },
                        zlevel: 9
                    },
                    {
                        name: '最小值',
                        type: 'bar',
                        stack: 'val',
                        barWidth: 150,
                        barGap: '-100%',
                        data: [arr.min],
                        label: {
                            offset: [10, 20],
                            show: true,
                            position: 'left',
                            distance: 10,
                            color: '#000',
                            offset: [0, -30],
                            fontSize: 17,
                            formatter: '{c}' + '[min]'
                        },
                        // tooltip: {
                        //     backgroundColor: 'transparent',
                        //     formatter: ' '
                        // },
                        itemStyle: {
                            color: '#328adc'
                        },
                        zlevel: 9
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener('resize', function() {
                myChart.resize();
            });
            //  this.$nextTick(() => {
            //     myChart.setOption(option)
            //     myChart.resize();
            // })
        }
    },
    mounted() {
        // this.drawBar(this.typeValue);
    },
    watch: {
        
    }
};
</script>
<style>
.tableTitle {
    background: #f7f8fa;
    margin-bottom: 5px;
    padding: 8px;
}
</style>
