echarts,x轴避免隔行显示,x轴文字换行

getChartOption() {
            let echart = this.$echarts;
            let fontSize = this.excutePx(14);
            let barWidth = this.excutePx(30);
            return {
                backgroundColor: "transparent",
                grid: {
                    left: "50",
                    right: "50",
                    top: "20",
                    bottom: "20",
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: {
                    show: false
                },
                xAxis: [
                    {
                        type: "category",
                        // boundaryGap: 1,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#0068b7"
                            }
                        },
                        axisLabel: {
                            show: true,
                            interval: 0, //使x轴文字显示全
                            textStyle: {
                                color: "#76797c",
                                fontSize: fontSize
                            },
                            formatter: function(params) {
                                var newParamsName = "";
                                var paramsNameNumber = params.length;
                                var provideNumber = 6; //一行显示几个字
                                var rowNumber = Math.ceil(
                                    paramsNameNumber / provideNumber
                                );
                                if (paramsNameNumber > provideNumber) {
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";
                                        var start = p * provideNumber;
                                        var end = start + provideNumber;
                                        if (p === rowNumber - 1) {
                                            tempStr = params.substring(
                                                start,
                                                paramsNameNumber
                                            );
                                        } else {
                                            tempStr =
                                                params.substring(start, end) +
                                                "\n";
                                        }
                                        newParamsName += tempStr;
                                    }
                                } else {
                                    newParamsName = params;
                                }
                                return newParamsName;
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        data: []
                    }
                ],

                yAxis: [
                    {
                        type: "value",
                        minInterval: 1,
                        padding: 5,
                        // max: 1000,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#76797c",
                                fontSize: fontSize
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: [
                                    "rgba(59,193,255,0)",
                                    "rgba(59,193,255,0.05)"
                                ]
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: "bar",
                        name: "报警次数",
                        barWidth: barWidth,
                        itemStyle: {
                            normal: {
                                color: new echart.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#1fd2ff"
                                        },
                                        {
                                            offset: 1,
                                            color: "#169aff"
                                        }
                                    ]
                                ),
                                label: {
                                    show: true,
                                    position: "top",
                                    color: "#169aff",
                                    formatter: function(p) {
                                        return p.value > 0 ? p.value : "";
                                    }
                                }
                            }
                        },
                        data: []
                    }
                ]
            };
        },

 

posted @ 2023-03-08 14:51  莫欺  阅读(386)  评论(0编辑  收藏  举报