echarts常见问题及解决方法

一.图表重叠问题
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即可。