0
点赞
收藏
分享

微信扫一扫

echarts常见问题及解决方法

程序猿不脱发2 2022-03-12 阅读 273

一.图表重叠问题
1.视觉引导线(多用于饼图)重叠问题解决
饼图默认开启防止标签重叠策略,一般情况下只要宽高足够大,这个策略可以完美解决重叠问题,此时labelline所设定的值不在生效,只有关闭时才生效。
在这里插入图片描述
当宽或高不够时,可通过调整起始角度来调整适应位置。
默认起始角度(90度)
在这里插入图片描述
调整后的角度(0度)
在这里插入图片描述
2.y轴重叠问题
例如:当不设置containLabel: true,属性时,grid区域不包含坐标轴,调整grid的left或者bottom很难解决,如果使用containLabel: true,就包含了坐标轴,不会造成重叠问题。
在这里插入图片描述

未添加:
在这里插入图片描述
添加后:
在这里插入图片描述
3.防止x坐标文本过多导致重叠
解决方法(根据设计图实际需求定):
1)通过旋转一定的x轴的label角度实现不重叠

                   axisLabel: {
                        rotate: this.axisLabelRotate,
                    },

2)通过format处理展示方式(详见组件库文档)

                   formatter: value => {
                            const newValue = !this.xAxisLabelFormat
                                ? value
                                : `${this.moment(value).format(this.xAxisLabelFormat)}`;
                            let labelStr = '';
                            const valueNameLength = newValue.length;
                            const rowNumber = Math.ceil(valueNameLength / this.showLabelNumber);
                            if (valueNameLength > this.showLabelNumber) {
                                for (let i = 0; i < rowNumber; i += 1) {
                                    let tempStr = '';
                                    const start = i * this.showLabelNumber;
                                    const end = start + this.showLabelNumber;
                                    if (i === rowNumber - 1) {
                                        tempStr = newValue.substring(start, valueNameLength);
                                    } else {
                                        tempStr = `${newValue.substring(start, end)}\n`;
                                    }
                                    labelStr += tempStr;
                                }
                            } else {
                                labelStr = newValue;
                            }
                            return labelStr;
                        },

3)显示部分x坐标,隔几个个x坐标显示一个(间隔的x坐标数目固定)

                        axisLabel: {
                            interval: this.xAxisInterval,
                        },

4.数据为0时,borderWidth值存在造成的显示错乱问题
当borderWidth的值存在时,itemStyle: { normal: { borderWidth: 2 } },
在这里插入图片描述
解决方法:对数据做判断,数据值为0则设置borderWidth为0即可。

举报

相关推荐

0 条评论