我们在使用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. 4种Spring Boot 实现通用 Auth 认证方式

    摘要: 文章介绍了 spring-boot 中实现通用 auth 的四种方式,包括传统 AOP.拦截器.参数解析器和过滤器,并提供了对应的实例代码,最后简单总结了下它们的执行顺序. 本文分享自华为云社 ...

  2. 10年经验总结，华为fellow教你如何成为一名优秀的架构师？

    摘要:华为云首席架构师分享成为架构师必备的一些特质和能力. 本文分享自华为云社区<10年经验总结,华为fellow教你如何成为一名优秀的架构师?>,作者: 技术火炬手 . 在<云享人 ...

  3. 再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查

    操作节点,先得选择节点,就得知道节点选择器与DOM节点查找 DOM节点选择器 W3C提供了比较方便的定位节点的方法和属性 getElementById() 一个参数:元素标签的ID getElemen ...

  4. 2023 年如何将您的应用提交到 App Store

    您夜以继日地工作来创建您的梦想应用程序.最后,是时候向全世界宣布您的应用程序了.但不知道如何将您的应用提交到 App Store? 为您的商店获取现成的移动应用程序 将应用程序提交到 App Stor ...

  5. 【django-vue】七牛云上传视频 搜索接口 支付宝sdk二次封装 下单接口 前端支付页面 支付成功回调接口

    目录 上节回顾 课程详情接口 choice字段 今日内容 1 文件存储 1.1 七牛云上传文件 2 搜索导航栏 2.1 Header.vue 3 搜索接口 4 搜索页面 5 支付宝支付介绍 5.1 支 ...

  6. Win 10 Rust Installtion in D Disk with VSCode

    (只记录了必须要内容,日后完善!) 1. rust的安装与环境变量: 要提前把下面两个环境变量配置好,这样是为了指定安装路径.否则会默认安装在 C 盘下. CARGO_HOME: D:\Soft\La ...

  7. SpringBoot 项目实战 | 瑞吉外卖 Day06

    该系列将记录一份完整的实战项目的完成过程,该篇属于第六天 案例来自B站黑马程序员Java项目实战<瑞吉外卖>,请结合课程资料阅读以下内容 该篇我们将完成以下内容: 用户地址簿相关功能 菜品 ...

  8. Docker 和 VMware不兼容问题

    直接贴解决方案: 当想使用 VMware bcdedit /set hypervisorlaunchtype off 当想使用 Docker 时 bcdedit /set hypervisorlaun ...

  9. AtCoder Beginner Contest 197（Sponsored by Panasonic） Person Editorial

    A - Rotate 先输出第二和第三个字符,然后再输出第一个字符即可 B - Visibility 以 \((x,y)\) 作为起点向4个方向探索不是 # 的点,注意一下会在\((x,y)\)重复计 ...

  10. Serverless 应用托管助力企业加速创新

    作者: 熊峰 | 阿里云技术专家 云原生时代的 Serverless 应用托管架构 回顾过去十年,数字化转型将科技创新与商业元素不断融合.重构,重新定义了新业态下的增长极.商业正在从大工业时代的固化范 ...