【echarts】柱状图设置固定宽度（最大宽度）

缺乏、安全感 2022-09-29 10:58 280阅读 0赞

//柱状图
        var barGragh = document.getElementById('barGragh');
        var barChart = echarts.init(barGragh);
        var barChartoption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['上周同比', '今日整点'],
                /* y : 'bottom' */
            },
            toolbox: {
                show: false,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            color : ['#ff7f50','#87cefa', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            calculable: false,
            grid: {
                left: '0%',
                right: '0%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: 'GMV'
                }
            ],
            series: [
                {
                    name: '上周同比',
                    type: 'bar',
                    barMaxWidth: '100',
                    data: [],
                    markPoint: {
                        data: [
                            {
       type: 'max', name: '最大值'},
                            {
       type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {
       type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name: '今日整点',
                    type: 'bar',
                    barMaxWidth: '100',
                    data: [],
                    markPoint: {
                        data: [
                            {
       type: 'max', name: '最大值'},
                            {
       type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {
       type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        barChart.setOption(barChartoption);

关键代码：

barMaxWidth: '100',

实现效果

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220708/5b6c849f36a24fc0892efd2cbd2939c0.png