ECharts柱状图,x轴数据相同要求只展示一条数据

话不多说,先上图表:

 实现该图表的核心代码:

        let option = {
            title: {
                text: '高三各班级人数表',
                x: 'center'
            },
            legend: {
                y: 'bottom',
                x: 'center',
                width: 300,
                height: 400,
                itemGap: 20,
                align: 'left'
            },
            tooltip: {},
            xAxis: [
                {
                    type: 'category',
                    data: ['高三']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                }
            ],
            grid: {
                left: '6%',
                right: '4%',
                bottom: '29%', 
            },
            color: ['rgb(237,125,49)', 'rgb(165,165,165)', 'rgb(255,192,0)', 'rgb(68,115,197)', 'rgb(112,173,70)', 'rgb(37,95,145)', 'rgb(158,72,13)', 'rgb(99,99,99)', 'rgb(152,115,0)', 'rgb(38,68,120)'],
            series: [
                {
                    type: 'bar',
                    name: '一班',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [75]
                },
                {
                    type: 'bar',
                    name: '二班',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [70]
                },
                {
                    type: 'bar',
                    name: '三班',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [70]
                },
                {
                    type: 'bar',
                    name: '四班',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [65]
                },
                {
                    type: 'bar',
                    name: '五班',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [60]
                },
                {
                    type: 'bar',
                    name: '六班',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [60]
                },
                {
                    type: 'bar',
                    name: '七班',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [58]
                },
                {
                    type: 'bar',
                    name: '八班',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [55]
                },
                {
                    type: 'bar',
                    name: '九班',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [50]
                }, {
                    type: 'bar',
                    name: '十班',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [54]
                }]
        };
        option && myChart.setOption(option);

注意点:如果图例的个数比较少,x轴文字与图例之间的空白有点大,可以根据自己的图例个数进行调整:grid下的bottom

猜你喜欢

转载自blog.csdn.net/qq_41964720/article/details/131845871
今日推荐