我们在使用echarts中，可能会遇见文字太长。导致显示不完全。

我们可以使用换行来处理

第一方式直接使用 \n

文字直接换行显示 使用\n

<!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="width: 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: ["土地、房屋及 \n建筑物", "遇用设备", "遇用设备", "裤子", "家具、用具、\n装具及动植物", "袜子"]

            },

            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度

    }

},

echarts中x轴文字太长换行的几种方式的更多相关文章

  1. 解决echarts中X轴文字过长的问题。【转】

    axisLabel: { interval: , formatter:function(value) { debugger var ret = "";//拼接加\n返回的类目项 ; ...

  2. echarts图表X轴文字过长解决解决方案：根据文字长度自动旋转

    Echarts 标签中文本内容太长的时候怎么办 ? 关于这个问题搜索一下,有很多解决方案.无非就是 省略(间隔显示).旋转文字方向.竖排展示 前面两种解决方案,就是echarts暴露的: {   ax ...

  3. echarts图表里label文字过长换行的方法

    在做一些图标时,有时会出现显示文字过长的问题,需要将其按照指定的字数换行,像下图这样 而echarts没有提供换行的方法,但是可以使用fomatter方法进行设置,代码如下 formatter: fu ...

  4. Echarts中X轴坐标太密集，分段显示

    在axisLabel中设置刻度间隔interval,再加上强制显示最大值showMaxLabel和最小值showMinLabel axisLabel: {//X轴文字 interval: day == ...

  5. echarts x轴名称太长

    echarts x轴名称太长了,隐藏一部分,鼠标移到名称上,显示全称 function extension(mychart, type) { let extension = document.getE ...

  6. iOS中Safari浏览器select下拉列表文字太长被截断的处理方法

    网页中的select下拉列表,文字太长的话在iOS的Safari浏览器里会被自动截断,显示成下面这种: 安卓版的浏览器则没有这个问题. 如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢? ...

  7. Oracle 解决【ORA-01704:字符串文字太长】

    错误提示:oracle在toad中执行一段sql语句时,出现错误‘ORA-01704:字符串文字太长’.如下图: 原因:一般为包含有对CLOB字段的数据操作.如果CLOB字段的内容非常大的时候,会导致 ...

  8. Oracle 解决【ORA-01704:字符串文字太长】（转）

    错误提示:oracle在toad中执行一段sql语句时,出现错误‘ORA-01704:字符串文字太长’.如下图: 原因:一般为包含有对CLOB字段的数据操作.如果CLOB字段的内容非常大的时候,会导致 ...

  9. 关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结

    关于dl  dt dd 文字过长换行在移动端显示对齐的探讨总结 <dl> <dt>抵押房产:</dt> <dd>1.北京市大兴区兴华大街丽园小区3单大兴 ...

  10. ORA-01704: 字符串文字太长 oracle

    .net连接oracle时,当流从文件读出来更新数据库时,会报"ORA-01704: 字符串文字太长"这样的错误. 原因:sql语句拼接而成. 解决:采用参数方法传值. strin ...

随机推荐

  1. CNCF Serverless工作流社区携手华为云FunctionGraph，开拓Serverless编排新时代

    摘要:华为云以CNCF Serverless Workflow 规范为标准,联合2012实验室华为元戎团队共同打造了华为云FunctionGraph Workflow,为用户提供函数流管理功能,并支持 ...

  2. npm 新型定时攻击或导致软件供应链安全风险

    原标题: New npm timing attack could lead to supply chain attacks 原文链接: https://www.bleepingcomputer.com ...

  3. Solon Web 开发：二、开发知识准备

    1.约定 //资源路径约定(不用配置:也不能配置) resources/app.yml( 或 app.properties ) #为应用配置文件 resources/WEB-INF/static/ 或 ...

  4. 【奥运会】yahoo的这个骚操作令人费解。。。

    昨天在朋友圈发了一张截图,貌似很多朋友没有 get 到点,我也实在搞不懂 Yahoo 的这波操作. 默认排序是按照金牌总数,那必然是美国第一名了.不过习惯上不应该是按照金牌总数进行排名吗?毕竟金银铜牌 ...

  5. CJ88 DUMP The ASSERT condition was violated

    一.CJ88运行某个项目时DUMP,其他项目正常 The ASSERT condition was violated. 源代码位置为交易货币为空导致DUMP 经过长时间的源码调试,也只定位在查询语句这 ...

  6. [完整]流程解决Vue3项目搭建步骤

    Vue3项目完整搭建步骤 一. 使用vite创建vue3项目 npm init vue@latest 或者npm create vite@latest进行初始化项目并创建项目名称code,进入code ...

  7. Java 有效字符串判断

    转载请注明出处: 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. ...

  8. mysql 查看数据库及表大小以及数据库扩容评估

    本文为博主原创,未经允许不得转载: 1.查看数据库数据存储的位置: show global variables like "%datadir%"; 2.查看数据库大小 2.1 in ...

  9. centos7 systemctl配置开机自启动服务

    centos7使用systemctl替代原来/etc/init.d,按官方的说法是提高系统服务的运行效率.服务配置更加简单易用,对于一些自定义的服务来配置开机自启动,是真的香! 概念理解 它是服务管理 ...

  10. 京东App秒杀抢购流程接口分析（基于pypp技术）

    App数据抓包必需工具 必需工具:小米手机,Charles,HttpCanary 从2022年2月后,京东只限于从app发起抢购,所以,网上的很多工具已经无效了.只能分析app端的底层协议和流程. g ...