zoukankan      html  css  js  c++  java
  • echarts中x轴文字太长换行的几种方式

    我们在使用echarts中,可能会遇见文字太长。导致显示不完全。
    我们可以使用换行来处理
    第一方式直接使用 
    
    

    文字直接换行显示 使用

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>第一个 ECharts 实例</title>
        <!-- 引入 echarts.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style=" 800px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '第一个 ECharts 实例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["土地、房屋及 
    建筑物", "遇用设备", "遇用设备", "裤子", "家具、用具、
    装具及动植物", "袜子"]
                },
                yAxis: {
    
                },
                series: [{
                    name: '销量',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            // 这里就可以实现,配置柱状图的颜色
                            color: function (params) {
                                var colorList = [ '#ccc', '#c101c1', '#FCCE10', '#E87C25', '#27727B', '#D7504B'];
                                return colorList[params.dataIndex]
                            },
                        }
                    },
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>
    

    第二种 改变倾斜角度

    xAxis: {
        data: ["土地、房屋及建筑物", "遇用设备", "遇用设备", "裤子", "家具、用具、装具及动植物", "袜子"],
        axisLabel : {//坐标轴刻度标签的相关设置。
            interval:0,
            rotate:"45" //表示的角度倾斜45度
        }
    },
    

    作者:明月人倚楼
    出处:https://www.cnblogs.com/IwishIcould/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    基于Postman的API自动化测试
    MVC 页面静态化
    一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](一)
    HTML LIST 输入框自动查询追加框,自动过滤 HTML5
    C# 关键字
    Python 爬虫实例(15) 爬取 百度百聘(微信公众号)
    爬虫 修改 下拉框
    验证码识别之图像切割算法(三) 连通域分割
    验证码识别之图像切割算法(二)
    验证码识别之图像切割算法(一)
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15154552.html
Copyright © 2011-2022 走看看