echarts X轴标签文字过长换行

最新推荐文章于 2024-08-12 15:48:59 发布

学习前端小菜鸡

最新推荐文章于 2024-08-12 15:48:59 发布

阅读量438

点赞数 1

分类专栏：每天进步一点点文章标签： echarts javascript 前端

原文链接：https://echarts.apache.org/examples/zh/editor.html?c=bar-background

版权

每天进步一点点专栏收录该内容

11 篇文章 0 订阅

订阅专栏

直接上图

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Pie And Ring</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js"></script>
<script src="js/echarts.min.js"></script>

<body>
    <div id="pie" style="width: 800px;height:400px;"></div>
</body>

<script>
    // 初始化echarts实例
    var mCharts = echarts.init(document.getElementById("pie"))
    var option;
    option = {
        xAxis: [
            {
                splitLine: { show: false },
                type: 'category',
                data: ['春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。', 
                       '锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦。'],
                splitArea: { show: false },
                axisLabel: {
                    show: true,
                    interval: 0,
                    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
                    },
                    textStyle: {
                        color: '#6861a6' //文字颜色
                    }
                }
            }],
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 150],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    mCharts.setOption(option)
</script>

</html>