Echarts横轴文字换行

本文介绍了如何在 Echarts 图表中处理横轴标签过长导致的文字重叠问题,通过设置 Echarts 的配置项实现横轴文字自动换行,确保图表的清晰易读。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

let option = {
                xAxis: {
                    type: 'category',
                    data: ['低保人数', '留守儿童', '残疾人', '孤寡老人', '退役军人', '服役人员'],
                    axisLine: {
                        lineStyle: {
                            color: "rgba(225, 225, 225, 0.15)"
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        color: "rgba(225, 225, 225, 0.8)",
                        formatter: function (value) {
                            var ret = "";//拼接加\n返回的类目项  
                            var maxLength = 2;//每项显示文字个数  
                            var valLength = value.length;//X轴类目项的文字个数  
                            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                            if (rowN > 1)//如果类目项的文字大于5,  
                            {
                                for (var i = 0; i < rowN; i++) {
                                    var temp = "";//每次截取的字符串  
                                    var start = i * maxLength;//开始截取的位置  
                                    var end = start + maxLength;//结束截取的位置  
                                    //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧  
                                    temp = value.substring(start, end) + "\n";
                                    ret += temp; //凭借最终的字符串  
                                }
                                return ret;
                            }
                            else {
                                return value;
                            }
                        }
                    }
                },
                grid: {
                    top: "6%",
                    left: "10%",
                    right: "0",
                    bottom: "20%"
                },
                yAxis: {
                    type: 'value',
                    splitLine: { //网格线
                        show: true,
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: "rgba(225, 225, 225, 0.15)"
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(225, 225, 225, 0.6)"
                        }
                    },
                    axisLabel: {
                        color: "rgba(225, 225, 225, 0.6)",
                        fontSize: ".12rem",
                        fontWeight: '300'
                    }
                },
                series: [
                    {
                        data: [80, 48, 128, 28, 141, 18],
                        type: 'bar',
                        // 设置柱子颜色
                        barWidth: 20,
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#fbc2eb' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#a6c1ee' // 100% 处的颜色
                                }
                            ]
                        },
                        // 在柱子上面设置相对应的数字,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    // 文字的颜色,字体大小,字体加深
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: '0.12rem',
                                        fontWeight: 'bold'
                                    }
                                },
                                barBorderRadius: [6, 6, 0, 0]
                            }
                        },
                    }
                ]
            }
            let charts = echarts.init(document.getElementById('industryCharts'));
            charts.setOption(option);
            window.addEventListener("resize", () => {
                charts.resize();
            });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值