echarts 实现x轴文字倾斜显示

2023-12-19 23:10:44

显示效果

关键代码

        xAxis: {
            axisLabel: {
                show: true,
                rotate: 35,//35度角倾斜显示
            },
        },

完全代码

var optSaleType = {
        title: {
            text: '',
            textStyle: {
                color: '#000',
                fontSize: 14
            }
        },
        tooltip: {},
        grid: {
            left: '0',
            right: '0',
            bottom: '0',
            containLabel: true,

        },
        xAxis: {
            axisLabel: {
                show: true,
                interval: 0,//横轴信息全部显示
                rotate:  35,//-30度角倾斜显示
                textStyle: {
                    rich: {}
                }
            },
            data: data.names,
            axisLine: {
                lineStyle: {
                    color: '#cccccc'
                }
            },

        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#cccccc'
                }
            },
            splitLine: {
                lineStyle: {
                    type:  'solid' ,
                    color:  '#cccccc' , //左边线的颜色
                    width: '1' //坐标线的宽度
                }
            },


        },
        series: [{
            type: 'bar',
            data: data.counts,
            barMaxWidth: 25,
            color: '#f3795b',
            itemStyle: {
                normal: {
                    barBorderRadius:[5, 5 , 0, 0],
                    color: function (params) {
                        var colorList = [
                            ['#90bfe5','#4178e5'],
                            ['#7bf1b6','#3dc886'],
                        ];
                        if (level_saletype > 1) {
                            colorList = [
                                ['#fab2ff','#9f7ef4'],
                                ['#ffeb90','#ffe25c'],
                                ['#fe6f88','#ffd3a5'],
                            ];
                        }
                        var index = params.dataIndex;
                        if (params.dataIndex >= colorList.length) {
                            index = params.dataIndex - colorList.length;
                        }
                        return new echarts.graphic.LinearGradient(0, 0, 1, 1,
                            [{
                                offset: 0,
                                color: colorList[index][0]
                            },
                                {
                                    offset: 1,
                                    color: colorList[index][1]
                                }
                            ]);
                    }
                },
            },

        }]
    };
    chartSaleType.setOption(optSaleType);

完全代码整体展示只作参考作用，只用关心核心代码即可

文章来源:https://blog.csdn.net/gdgztt/article/details/135086039
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。