最近在使用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. java开源内容管理系统J4CMS支持真正静态化

    原理非常easy,使用httpclient请求遍历整个站点的菜单.文章链接.请求下来以后,生成html文件.即静态化了 把它们稍作调整,直接扔在88元购买的阿里云主机上.站点就完毕了 这是我的 静态站 ...

  2. vue 发送ajax请求

    一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...

  3. EditText禁止输空格

    1.EditText禁止输空格 editText.setFilters(new InputFilter[]{filter}); private InputFilter filter=new Input ...

  4. python模块：xlsxwriter和xlrd相结合读取

    python模块简单说明: xlsxwriter:负责写入数据 xlrd:负责读取数据 xlsxwriter 官方文档:http://xlsxwriter.readthedocs.org 本实例是刚写 ...

  5. jQuery+html5实现的3D动态切换焦点轮播幻灯片

    今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Ch ...

  6. DevExpress v15.2新功能介绍视频（25集全）

    DevExpress v15.2新功能介绍视频(25集全) http://www.devexpresscn.com/Resources/Documentation-508.html DevExpres ...

  7. exchange邮箱系统增加验证码机制

    首先背景是exchange的邮箱系统没有后台源代码.因为这个原因,生成验证码的机制放在aspx的runat="sever"后台代码里面. 首先需要找到iis中logon.aspx文 ...

  8. jquery.autocomplete 传参问题

    今天遇到一个问题,我需要传一个文本库的内容给后台,然后用autocomplete显示内容,开始觉得很简单 不就是 function SalePrice_Complete(text) { //分割拿到索 ...

  9. 【BZOJ】1072: [SCOI2007]排列perm（状压dp+特殊的技巧）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1072 首先无限膜拜题解orz表示只会暴力orz 数据那么小我竟然想不到状压! orz 这种题可以取模 ...

  10. 【BZOJ】1689: [Usaco2005 Open] Muddy roads 泥泞的路（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1689 一开始我也想到了贪心,,,策略是如果两个连续的水池的距离小于l的话,那么就将他们链接起来,,, ...