我们在使用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. 云图说丨每个成功的业务系统离不开API网关（APIG）的保驾护航

    摘要:华为云API网关(APIG)是为企业开发者及合作伙伴提供的高性能.高可用.高安全的API托管服务, 帮助企业轻松构建.管理和部署不同规模的API. 本文分享自华为云社区<[云图说]第243 ...

  2. Mac问题记录

    1. "App" can't be opened because Apple cannot check it for malicious software. 一般来说,在Syste ...

  3. 手把手教你在 Windows 环境中搭建 MQTT 服务器

    前言 前些天要对接一家硬件商的设备数据,对方使用的 MQTT 协议点对点透传,所以又赶紧搭建 MQTT 服务器,写 .NET 程序接收数据等等,今天分享一下如何搭建 MQTT 服务器. MQTT 协议 ...

  4. IntelliJ JSP 格式化问题

    Q: 当我尝试在 IntelliJ 中格式化一些 JSP 文件时,所有行都从头开始. A: 因为JSP是有关HTML和HTML以下标签的孩子html,body,thead,tbody,tfoot默认情 ...

  5. 4.0 《数据库系统概论》数据库安全性详解---（存取控制、DAC&MAC、视图机制、审计Audit....）

    前言 本篇文章学习书籍:<数据库系统概论>第5版 王珊 萨师煊编著 视频资源来自:数据库系统概论完整版(基础篇+高级篇+新技术篇) 由于 BitHachi 学长已经系统的整理过本书了,我在 ...

  6. AtCoder | ABC 125 Person Editorial

    开始补AtCoder的数学题了,练下思维 AB两道都很简单,看懂题就OK. C,D稍微麻烦一些 Problem C: GCD On Blackboard 为了解决此问题,我们需要了解最大公约数(GCD ...

  7. php基础之PHP语言学习介绍

    前言 PHP是网络安全中需要掌握的一门语言,但是就这么一点儿时间学网络安全,所以不可能特别精通PHP,这里并不是说要求你精通PHP,但是需要对于一些基础代码能够认识.能够编写那么就可以了. 同时,这里 ...

  8. oracle数据库锁表后的处理方案

    oracle数据库, 数据库(执行查询语句或存储过程执行)操作,导致表被锁死的情况的解决方案: 一.查看已经锁定的数据库表 select b.owner,b.object_name,a.session ...

  9. java基础-方法method-day05

    1. 语法 [修饰符] 返回值类型 方法名(形参列表){ 逻辑主体 } public class TestMethod01{ public static int add(int num1, int n ...

  10. maven总结二: 常用标签及属性

    本文为博主原创,未经允许不得转载  目录: 1. maven 依赖属性:groupId.artifactId.version 2.插件执行: execution,id ,phase,goals,con ...