在echarts中应用柱状图或者折线图时,当数据量过多的时候,X轴的坐标就会显示不全(如下图图一),在ECharts图表组件内部有一个机制,用于统计xAxis坐标刻度的个数和图表宽度,从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。刻度间隔的相关属性就是:interval。还有一个属性:rotate: number 度角是倾斜的控制所在。
图一:显示不全

图二:修改后的图片

解决办法:

    1. grid: {
    2. y2: 140
    3. },
    4. xAxis: {
    5. type: 'category',
    6. boundaryGap: [0, 0.01],
    7. name: '投标人',
    8. data:  [ '' ],
    9. axisLabel:{
    10. interval:0,//横轴信息全部显示
    11. rotate:-30,//-30度角倾斜显示
    12. }
    13. },

echarts x轴坐标文字显示不全的更多相关文章

  1. echarts柱状图坐标文字显示不完整解决方式

    echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...

  2. [置顶] echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

  3. echarts x轴文字显示不全解决办法

    标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694

  4. echarts x轴文字显示不全(解决方案)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

  5. echarts x轴标签文字过多导致显示不全

    原文电梯:https://blog.csdn.net/kebi007/article/details/68488694 echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.a ...

  6. Echarts--Y坐标标题显示不全

    如:下图,Y坐标标题显示不全 y2可以控制不显示区域的高度,就能显示全啦 grid:{ x:40, x2:100, y2:200 }

  7. Cell 动态行高文字显示不全问题探索

    目录 问题概述 一.新建工程 二.尝试复现问题 尝试解决 修改contentLblBtmCon优先级为High(750) 修改contentLblBtmCon优先级为Low(250) 小结 其他解决思 ...

  8. echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    出处:http://blog.csdn.net/kebi007/article/details/68488694

  9. confluence导出pdf 文字显示不全

    当使用confluence编辑页面时,当一行的文字过多,且中间没什么逗号分隔时,有时会出现导出的pdf文件中,这一行显示的文字不全的情况. 如: 很明显费用的费字没有显示完全,且后面还有其他的字. 可 ...

随机推荐

  1. eclipse使用git提交本地项目,提交至远程github上

    准备工作: 目的:eclipse使用git提交本地项目,提交至远程github上 eclipse版本:eclipse4.5  64位 jdk版本:jdk-1.7 64位 项目类型:maven web项 ...

  2. MVC之Ajax.BeginForm使用详解之更新列表 mvc验证jquery.unobtrusive-ajax

    MVC之Ajax.BeginForm使用详解之更新列表   1.首先,请在配置文件设置如下:(该项默认都存在且为true) <add key="UnobtrusiveJavaScrip ...

  3. export、exports、modules.exports 和 require 、import 的一些组合套路和坑

    推荐阅读第三方文章: http://www.tuicool.com/articles/uuUVBv2 引入: require / import 导出:export / module.exports / ...

  4. MySQL主从不一致情形与解决方法

    参考:https://blog.csdn.net/hardworking0323/article/details/81046408 https://blog.csdn.net/lijingkuan/a ...

  5. Node.js开发入门—使用cookie保持登录

    这次来做一个站点登录的小样例,后面会用到. 这个演示样例会用到Cookie.HTML表单.POST数据体(body)解析. 第一个版本号,我们的用户数据就写死在js文件中. 第二个版本号会引入Mong ...

  6. iOS图片上传及处理

    从摄像头或者是从相冊中读取图片.须要通过UIImagePickerController类来实现,在使用UIImagePickerController时,须要是实现以下两个协议 <UINaviga ...

  7. Decoration5:引入swagger2进行API管理

    这一部我们计划把swagger2引入到项目中,把网站的接口以文档的形式展示出来. 1.引入springfox-swagger2.springfox-swagger-ui 2.实现Swagger2 3. ...

  8. 【Android】16.0 第16章 自定义服务和系统服务—本章示例主界面

    分类:C#.Android.VS2015: 创建日期:2016-03-01 一.简介 本章主要演示Started Service.带Intent过滤器的Started Service.IntentSe ...

  9. iOS应用程序状态切换相关

    一.iOS应用程序状态机一共有五种状态: 1. Not running:应用还没有启动,或者应用正在运行但是途中被系统停止. 2. Inactive:当前应用正在前台运行,但是并不接收事件(当前或许正 ...

  10. 0071 CentOS_Tomcat访问文件名包含中文的文件出现404错误

    访问CentOS+Tomcat下的,文件名包含中文的文件出现404错误 修改:apache-tomcat-7.0.78/conf/server.xml <Connector port=" ...