最近在使用Echarts的时候,遇到点问题就是xAxis文字过长导致x轴的文字显示不全.

解决方案如下:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>

 2 <HEAD>

 3 <TITLE>my_echarts</TITLE>

 4 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

 5 </HEAD>

 6 <body topmargin="0">

 7 <table id="outer" width="100%" >

 8           <tr>

 9             <td align="center">

10         <div id="my_echart" style="width:730;height:400px;"></div>

11         </td>

12           </tr>

13      </table>

14 </body>

15 <script type="text/javascript" src="echarts-all.js"></script>

16 <script language="javascript">

17

18 function init_my_echarts() {

19     var mycharts = echarts.init(document.getElementById('my_echart'));

20     alert("init_virus_echarts");

21     var option = {

22     title : {

23         text: 'mycharts',

24         subtext: ''

25     },

26     tooltip : {

27         trigger: 'axis'

28     },

29     legend: {

30         data:['数量']

31     },

32     toolbox: {

33         show : true,

34     },

35     calculable : false,

36     xAxis : [

37         {

38             type : 'category',

39             axisLabel:{

40                     interval:0,

41                     rotate:45,

42                     margin:2,

43                     textStyle:{

44                              color:"#222"

45                     }},

46             data : ['我是不正常图表','2','3','4','1','2','3','4','1','2']

47         }

48     ],

49      grid: { // 控制图的大小，调整下面这些值就可以，

50              x: 40,

51              x2: 100,

52              y2: 150// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上

53     },

54     yAxis : [

55         {

56             type : 'value'

57         }

58     ],

59     series : [

60         {

61             name:'数量',

62             type:'bar',

63             barMaxWidth:100,

64             data:[70,50,50,70,50,50,70,50,50,30],

65             itemStyle:{

66                            normal:{

67                                           color:'#0000ff'

68                                 }

69                         }

70         }

71     ]

72   };

73     mycharts.setOption(option);

74 }

75 setTimeout("init_my_echarts()", 100);

76 </script>

77 </html>

关于这张图片(图片是在www.stepday.com网站上下载的一张图片,不会作图借用一下.)标注了:x y x2 y2的距离:

Echarts中axislabel文字过长导致显示不全或重叠的更多相关文章

  1. Echarts-axislabel文字过长导致显示不全或重叠

    先看两张图 按目前情况,官方并为对axislabel的高度或者宽度做调整.所以解决方案只能从其他方案下手 解决方案有几种 第一种为上图解决方案 设置grid属性定义图的大小来释放空间,使得axisla ...

  2. Echarts【1、数据过多导致显示不全分页，2、数据展示探讨分析】

    var len=<c:out value="${len }"></c:out>; var dataZoom_end=null; //为空默认100%所以默认 ...

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

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

  4. [修正] Firemonkey Android 文字斜粗体显示不全的问题

    问题:Firemonkey Android 平台显示斜粗体文字时,文字右方会有显示不全的问题. 修正代码: 请将 FMX.FontGlyphs.Android.pas 复制到自己的工程目录下,再修改如 ...

  5. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

  6. Echarts 解决饼图文字过长重叠的问题

    之前在网上查找了很多关于解决饼图文字描述过长导致重叠的问题,找了很多一直没有一个合适的解决方案,最后自己只能花时间研究echarts文档,功夫不负有心人,终于解决了文字重叠展示不全等问题. 废话不多说 ...

  7. FastAdmin 关于列表渲染文字过长导致页面难以管理的问题

    先贴一张图片做个例子 看不清图片的朋友可以右键图片,在<新标签页中打开图片>; 可以看到,由于内容过长,导致后面操作的增删改要拉到最后才能操作. 在我们的FastAdmin中,目前我还没找 ...

  8. mysql如果搜索长度过宽 导致显示不全的情况解决

    今天我在搜索数据库里面优惠码字段 直接使用 select * from table 的命令的时候 由于 第一个 字段过长导致后面的都无法显示全..我还是宽屏! 所以 搜索了一下 可以让 它单行显示 使 ...

  9. table td中的内容过长，显示为固定长度，多余部分用省略号显示

    简单描述:table数据过长,结果顶到下一格,影响了数据的查看 解决办法: 给table 加上style属性   另外 给td加上style标签修饰 <table class="tab ...

随机推荐

  1. C#：数据库操作（待补充）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  2. JEECG与帆软报表集成

    将FineReport 集成到自己的web项目中,生成报表,可以方便快捷的和自己的项目融合在一起.简化了利用poi的导出遇到的问题. 1.首先在FR中建立好一个模板      例如:我的这张模板是连接 ...

  3. Mongodb与mysql语法比较

    Mongodb与mysql语法比较   mongodb与mysql命令对比 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由 ...

  4. JQM事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  5. oracle 使用occi方式 批量插入多条数据

    if (vecInfo.empty()) { ; //数据为空,不上传,不上传标志设置为1,只有0表示上传成功 } std::string strUserName = userName; std::s ...

  6. 一定要使用-server参数来调试并发程序

    在阅读JCIP的时候想手工测试一下,结果发现总是没有出现书中描述的并发问题 后来我琢磨,以前记得书上说过,在debugging的环境下,JVM是低并发的,一定要在server的环境下测试,让JVM在高 ...

  7. 使用Cookie报错Control character in cookie value, consider BASE64 encoding your value

    参考资料: http://www.blogjava.net/persister/archive/2009/10/02/297103.html http://blog.csdn.net/xiaozhen ...

  8. tableview 与 tableview cell

    1.tableview cell: import Foundationimport UIKit class CjwtCell: UITableViewCell { @IBOutlet var lb_c ...

  9. Android中<uses-sdk>属性和target属性分析

    1. 概要 <uses-sdk> 用来描述该应用程序可以运行的最小和最大API级别,以及应用程序开发者设计期望运行的平台版本.通过在manifest清单文件中添加该属性,我们可以更好的控制 ...

  10. C语言 · 三角形面积

     算法提高 三角形面积   时间限制:1.0s   内存限制:256.0MB      问题描述 由三角形的三边长,求其面积. 提示:由三角形的三边a,b,c求面积可以用如下的公式: s=(a+b+c ...