設(shè)置了barMinHeight但是卻不生效
查了很久發(fā)現(xiàn)是版本的問(wèn)題
目前項(xiàng)目使用的版本是5.4.3耗帕，但是4.2.2之后的版本都有這個(gè)問(wèn)題

image.png

image.png

遂決定用g2

<style scoped lang="less" type="text/scss">
.chart-box {
    position: relative;

    .empty-text {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        color: @gray-575859;
    }
}
</style>

<template>
    <div style="width:100%;height:100%"  class="chart-box">
        <div style="width:100%;height:100%" ref="chart"></div>
        <div class="empty-text" v-if="isNil(chart) && (chartLoading === false || chartLoading === 'false')">
            <div>
                <div style="text-align: center;">
                    <svg width="89" height="65" viewBox="0 0 89 65" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g filter="url(#filter0_ddd_3337_6173)">
                            <path d="M12.5 8.5H76.5C78.7091 8.5 80.5 10.2909 80.5 12.5V48.5C80.5 50.7091 78.7091 52.5 76.5 52.5H12.5C10.2909 52.5 8.5 50.7091 8.5 48.5V12.5C8.5 10.2909 10.2909 8.5 12.5 8.5Z" fill="black"/>
                        </g>
                        <path d="M12.5 8.5H76.5C78.7091 8.5 80.5 10.2909 80.5 12.5V48.5C80.5 50.7091 78.7091 52.5 76.5 52.5H12.5C10.2909 52.5 8.5 50.7091 8.5 48.5V12.5C8.5 10.2909 10.2909 8.5 12.5 8.5Z" fill="white" stroke="#EBEDF0"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 18.5H66.5C67.6046 18.5 68.5 19.3954 68.5 20.5C68.5 21.6046 67.6046 22.5 66.5 22.5H22.5C21.3954 22.5 20.5 21.6046 20.5 20.5C20.5 19.3954 21.3954 18.5 22.5 18.5Z" fill="#D5D6D9"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 28.5H66.5C67.6046 28.5 68.5 29.3954 68.5 30.5C68.5 31.6046 67.6046 32.5 66.5 32.5H22.5C21.3954 32.5 20.5 31.6046 20.5 30.5C20.5 29.3954 21.3954 28.5 22.5 28.5Z" fill="#D5D6D9"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 38.5H44.2143C45.3189 38.5 46.2143 39.3954 46.2143 40.5C46.2143 41.6046 45.3189 42.5 44.2143 42.5H22.5C21.3954 42.5 20.5 41.6046 20.5 40.5C20.5 39.3954 21.3954 38.5 22.5 38.5Z" fill="#D5D6D9"/>
                        <defs>
                            <filter id="filter0_ddd_3337_6173" x="0.5" y="2.5" width="88" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                <feOffset dx="-1" dy="1"/>
                                <feGaussianBlur stdDeviation="3.5"/>
                                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
                                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3337_6173"/>
                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                <feOffset dx="1" dy="4"/>
                                <feGaussianBlur stdDeviation="2.5"/>
                                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
                                <feBlend mode="normal" in2="effect1_dropShadow_3337_6173" result="effect2_dropShadow_3337_6173"/>
                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                <feOffset dy="4"/>
                                <feGaussianBlur stdDeviation="4"/>
                                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
                                <feBlend mode="normal" in2="effect2_dropShadow_3337_6173" result="effect3_dropShadow_3337_6173"/>
                                <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_3337_6173" result="shape"/>
                            </filter>
                        </defs>
                    </svg>

                </div>
                <div>暫無(wú)數(shù)據(jù)~</div>
            </div>
        </div>
    </div>
</template>

<script>
import _ from 'lodash';
import {
    numberCheckProcess,
    numFormat,
    calculateMaxIntegerValue,
    calculateMaxIntegerValue2,
    numberUnitProcess, singleSort,
} from "@/utils/utils";
import moment from "moment";

export default {
    props: {
        chartData: {
            type: Object,
            default: function () {
                return {
                    legend: ['已交付額度', '凍結(jié)額度', '當(dāng)月凈增預(yù)算', '預(yù)算執(zhí)行率'],
                    dateTime: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07'],
                    data: [
                        [310000, 300000, 290000, 300000, 350000, 400000, 410000],//已交付額度
                        [1000, 200000, 190000, 200000, 250000, 300000, 310000],//凍結(jié)額度
                        [110000, 100000, 90000, 100000, 150000, 200000, 210000],//當(dāng)月凈增預(yù)算
                        // [630000, 600000, 480000, 600000, 750000, 900000, 930000],//當(dāng)月凈增預(yù)算

                        [60, 80, 90, 20, 30, 45, 75],//預(yù)算執(zhí)行率
                    ],
                }
            }
        },
        dateFormatStyle: {
            type: String,
            default: 'MM-DD',
        },
        chartLoading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            chart: null,
            chartInfo: null,
        }
    },
    watch: {
        splitDragWidth: {
            watch: true,
            handler() {
                this.chartResize();
            }
        },
        capacityViewContentWidth: {
            watch: true,
            handler() {
                this.chartResize();
            }
        },
        chartData: {
            immediate: true,
            handler() {
                this.chartInfo = this.chartData;
            },
        },
        option: {
            immediate: true,
            handler(option) {
                this.$nextTick(() => {
                    if (this.isNil(this.chartInfo)) {
                        // 數(shù)據(jù)為空，銷毀 echart 示例
                        try {
                            this.chart.dispose();
                        } catch (e) {
                            this.chart = null;
                        } finally {
                            this.chart = null;
                        }
                        return;
                    }
                    if (!this.isNilOrEmpty(_.get(this.chartInfo, 'data'))) {
                        // 渲染圖表
                        try {
                            this.chart.setOption(option);
                        } catch (e) {
                            this.initChart();
                        }
                    } else {
                        try {
                            this.chart.dispose();
                        } catch (e) {
                            this.chart = null;
                        } finally {
                            this.chart = null;
                        }
                    }
                });
            }
        },
    },
    computed: {
        splitDragWidth() {
            return this.$store.getters['splitDrag/splitDragWidth'];
        },
        capacityViewContentWidth() {
            return this.$store.getters['capacityViewContentWidth'];
        },
        /**
         *
         * 圖表繪制采樣：
         * 'average' 取過(guò)濾點(diǎn)的平均值
         * 'max' 取過(guò)濾點(diǎn)的最大值（本期使用）
         * 'min' 取過(guò)濾點(diǎn)的最小值
         * 'sum' 取過(guò)濾點(diǎn)的和
         *
         */
        option() {
            let color = [
                "#3F82E6",
                "#28C692",
                "#F5BD05",
            ];
            
            let legend = [];
            let xData = [];
            let series = [];
            let max1 = null;
            let max2 = null;
            if (!_.isNil(this.chartInfo)) {
                xData = this.chartInfo.dateTime;
                legend = this.chartInfo.legend;
                // 結(jié)果集二維數(shù)組
                let data = _.get(this.chartInfo, 'data', []);
                //堆疊柱狀圖
                for(let index = 0; index < (data.length - 1); index++){
                    let barEntry = {
                        name: legend[index],
                        type: 'bar',
                        stack: 'budget',
                        label: {
                            show: true,
                            formatter: (params) => numFormat(params.value)
                        },
                        barMinHeight: 15,//TODO? 最小高度不生效
                        // yAxisIndex: index,
                        // symbol: 'emptyCircle',
                        // symbolSize: 0,
                        // smooth: true,
                        // lineStyle: {
                        //     width: 1.5,
                        // },
                        // sampling: 'max',
                        data: data[index],
                        // emphasis: {
                        //     itemStyle: {
                        //         borderWidth: 4
                        //     }
                        // }
                    };
                    series.push(barEntry);                    
                }
                //折線圖
                let lineData = data[data.length-1]
                let lineEntry = {
                    name: legend[data.length-1],
                    type: 'line',
                    yAxisIndex: 1,
                    // symbol: 'emptyCircle',
                    symbolSize: 0,
                    smooth: true,
                    lineStyle: {
                        width: 1.5,
                    },
                    sampling: 'max',
                    data: lineData,
                    emphasis: {
                        itemStyle: {
                            borderWidth: 4
                        }
                    }
                };
                series.push(lineEntry);
                let stackTotalNum = this.sumArrays(data.slice(0, data.length - 1))
                max1 = calculateMaxIntegerValue(_.max(_.map(stackTotalNum, (o) => {
                    return !this.isNil(numberCheckProcess(o, true)) ? +o : Number.MIN_VALUE;
                })));

                max2 = calculateMaxIntegerValue2(_.max(_.map(data[data.length - 1], (o) => {
                    return !this.isNil(numberCheckProcess(o, true)) ? +o : Number.MIN_VALUE;
                })), 10000);
            }
            return {
                color: color,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                legend: {
                    type: 'scroll',
                    orient: 'horizontal',
                    bottom: 0,
                    itemGap: 25,
                    itemWidth: 16,
                    itemHeight: 8,
                    textStyle: {
                        fontFamily: 'PingFang SC',
                        fontStyle: 'normal',
                        fontWeight: 400,
                        fontSize: 12,
                        lineHeight: 18,
                        textAlign: 'center',
                        color: '#252626',
                    },
                    data: legend,
                },
                grid: {
                    left: 0,
                    right: 10,
                    bottom: 20,
                    top: 30,
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: true,
                    axisLine: {
                        lineStyle: {
                            color: '#252626',
                        },
                    },
                    axisLabel: {
                        interval: 'auto',
                        showMinLabel: true,
                        showMaxLabel: true,
                        textStyle: {
                            fontFamily: 'PingFang SC',
                            fontStyle: 'normal',
                            fontWeight: 400,
                            fontSize: 12,
                            lineHeight: 18,
                            textAlign: 'center',
                            color: '#252626',
                        },
                        formatter: (param) => {
                            if (param === _.nth(xData, 0)) {
                                let year = _.nth(_.split(param, '-'), 0);
                                let date = moment(new Date(param)).format(this.dateFormatStyle);
                                return date + '\n{year| (' + year + ')}';
                            } else {
                                return moment(new Date(param)).format(this.dateFormatStyle);
                            }
                        },
                        rich: {
                            year: {
                                color: '#898A8C',
                            }
                        },
                    },
                    data: xData,
                }],
                yAxis: [
                    {
                        type: 'value',
                        position: 'left',
                        name: '元',
                        offset: 0,
                        min: 0,
                        max: max1,
                        interval: Math.ceil(max1 / 5),
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#CED3E0',
                                type: 'dashed',
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                fontFamily: 'PingFang SC',
                                fontStyle: 'normal',
                                fontWeight: 400,
                                fontSize: 12,
                                lineHeight: 18,
                                textAlign: 'center',
                                color: color[0],
                            },
                            formatter: (value) => {
                                let data = numberUnitProcess(value, 2, true);
                                return data.data + data.unit;
                            },
                        },
                    },
                    {
                        type: 'value',
                        name: '百分比',
                        position: 'right',
                        offset: 0,
                        min: 0,
                        max: max2,
                        interval: _.round(max2 / 5, 5),
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#CED3E0',
                                type: 'dashed',
                            },
                        },
                        axisLabel: {
                            formatter: function(value){
                                return value + '%'
                            },
                            textStyle: {
                                fontFamily: 'PingFang SC',
                                fontStyle: 'normal',
                                fontWeight: 400,
                                fontSize: 12,
                                lineHeight: 18,
                                textAlign: 'center',
                                color: color[1],
                            },
                        },
                        formatter: (value) => {
                            let data = numberUnitProcess(value, 2, true);
                            return data.data + data.unit;
                        },
                    },
                ],
                series: series,
            };
        },
    },
    methods: {
        // 初始化圖表
        initChart() {
            if (this.chart == null) {
                // noinspection all
                this.chart = echarts.init(this.$refs.chart);
                this.chart.resize();
                this.chart.setOption(this.option);
            } else {
                try {
                    this.chart.dispose();
                } catch (e) {
                    this.chart = null;
                } finally {
                    this.chart = null;
                    this.initChart();
                }
            }
        },
        
        // 圖表 resize
        chartResize() {
            try {
                this.chart.resize();
            } catch (e) {
                this.chart = null;
            }
        },
        handleWindowFocus(event) {
            if(event.isTrusted && !_.isNil(this.chart)) {
                this.chartResize();
            }
        },

        /*
        *二維數(shù)組里每列加和
        *輸入:[
        *       [1, 2, 3],
        *       [4, 5, 6],
        *       [7, 8, 9]
        *   ]
        * 輸出:[12, 15, 18]
        */
        sumArrays(arr) {
            if (arr.length === 0) {
                return [];
            }

            // 獲取第一個(gè)子數(shù)組的長(zhǎng)度涉馅，假定所有子數(shù)組長(zhǎng)度相同
            const len = arr[0].length;

            // 初始化結(jié)果數(shù)組
            const result = new Array(len).fill(0);

            for (let i = 0; i < arr.length; i++) {
                for (let j = 0; j < len; j++) {
                    result[j] += arr[i][j];
                }
            }

            return result;
        },
        
        // 工具方法
        keys(object) {
            return _.keys(object);
        },
        get(object, key) {
            return _.get(object, key);
        },
        getDefault(object, key) {
            return _.get(object, key, '');
        },
        getDefaultDe(object, key, de) {
            return _.get(object, key, de);
        },
        nth(array, n) {
            return _.nth(array, n);
        },
        isNil(data) {
            return _.isNil(data) || _.trim(data) === '';
        },
        indexOf(data, str) {
            if (_.isNil(data) || _.trim(data) === '') {
                return -1;
            }
            return data.indexOf(str);
        },
        length(object, key) {
            let data = _.get(object, key, []);
            if (_.isNil(data) || !_.isArray(data)) {
                return 0;
            } else {
                return data.length;
            }
        },
        moment(datetime, format) {
            return moment.unix(datetime).format(format);
        },
        numFormat(num) {
            return numFormat(num);
        },
        numberCheckProcess(data, isReturnNull = true) {
            return numberCheckProcess(data, isReturnNull);
        },
        toString(data) {
            return _.toString(data);
        },
        includes(arr, item) {
            return _.includes(arr, item);
        },
        isNilOrEmpty(data) {
            return _.isNil(data) || _.trim(data) === '' || !_.isArray(data) || data.length === 0;
        },
    },
    mounted() {
        window.addEventListener('resize', this.chartResize);
        window.addEventListener('focus', this.handleWindowFocus);
    },
    beforeDestroy() {
        if (this.chart != null) {
            this.chart.dispose();
            this.chart = null;
        }
        window.removeEventListener('resize', this.chartResize);
        window.removeEventListener('focus', this.handleWindowFocus);
    }
}
</script>