最近在使用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. angularjs-1

    1.属性表达式 属性表达式计算是发生在作用域中的.Javascript默认是以window为作用域的.AngularJS要使用window作用域的话得用$window来指向全局window对象. 比如 ...

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

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

  3. 拒绝蛋疼，javascript调试技巧

    chrome的调试技巧网上很多介绍了,这里提两个个人觉得比较有用的: 1.console.log 优点:可以输出json对象,而非字符串,这是 alert() 做不到的 缺点:记得要删除,否则在低版本 ...

  4. django.db.utils.OperationalError: no such table: auth_user

    关于使用django 首次创建超级管理员时,出现     django.db.utils.OperationalError: no such table: auth_user   错误 1.首先使用命 ...

  5. C++代码优化方法总结

    C++代码优化方法总结 优化是一个非常大的主题,本文并不是去深入探讨性能分析理论,算法的效率,况且我也没有这个能力.我只是想把一些可以简单的应用到你的C++代码中 的优化技术总结在这里,这样,当你遇到 ...

  6. Atitit.web预览播放视频的总结

    Atitit.web预览播放视频的总结 1. 浏览器类型的兼容性(chrome,ff,ie) 1 2. 操作系统的兼容性 1 3. 视频格式的内部视频格式跟播放器插件的兼容性.. 2 4. 指定播放器 ...

  7. redis基础之基本键值操作和使用（三）

    前言 redis安装完毕后开始使用redis,先熟悉命令行操作. redis数据的类型 键:redis的所有的键都是string类型: 值:五种类型 string:字符串类型:一个string最大可以 ...

  8. 修改JQM的默认配置属性

    从本文开始,使用 jQuery Mobile 与 HTML5 开发 Web App 系列将会进入第三部分——jQuery Mobile 事件与方法,这其中将会利用之前所讲述的 jQuery Mobil ...

  9. JS四种方法去除字符串最后的逗号

    <script> window.onload=function() { var obj = {name: "xxx", age: 30, sex: "fema ...

  10. 0063 MyBatis入门示例

    MyBatis是一个"半自动化"的ORM框架,ORM即Object/Relation Mapping,对象关系映射,是面向对象编程语言跟关系型数据库的桥梁,将编程语言对Java实体 ...