最近在使用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. 建立对ActiveX控件的了解

    本文来自百度百科:ActiveX控件   ActiveX是Microsoft对于一系列策略性面向对象程序技术和工具的称呼,其中主要的技术是组件对象模型(COM).在有目录和其它支持的网络中,COM变成 ...

  2. [Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）

    引言 出差终于回来了,这篇文章算是这个月的博客的开篇吧. 上篇文章:[Asp.net]Calendar+JqueryUi实现日程管理——添加日程 上篇文章主要贴了一些该项目的界面,这里面,将主要代码也 ...

  3. jquery 属性操作 attr( ) prop（）css( ）区别

    一 attr () 和 prop( ) 操作属性 谈谈我的总结: 1 2 1 属性的定义,根据W3C手册所述:属性包括,标准属性:id class style title 语言属性 lang dir以 ...

  4. Android:No implementation found for native(转)

    解决方法: 1.检查native c code的定义: JNIEXPORT void Java_com_example_something_MyClass_getMyString(JNIEnv * e ...

  5. nyoj 37 回文字符串 【DP】

    先反向复制一个新的字符串,然后再找出最长公共子串,在用长度n减去就可以 回文字符串 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描写叙述 所谓回文字符串,就是一个字符串,从 ...

  6. USES_CONVERSION的使用和注意

    USES_CONVERSION是用来转换类型的,比如我们很常见的问题: 在Socket编程时候,我们的IP地址从界面上输进去一般都使用CString类型的,可是在SOCKADDR_IN中的inet_a ...

  7. Python 爬虫实例（2）—— 爬取今日头条

    # coding:utf-8 import base64 import random, re import sqlite3 import redis, pickle import json, time ...

  8. Mysql 修改数据库，mysql修改表类型，Mysql增加表字段，Mysql删除表字段，Mysql修改字段名，Mysql修改字段排列顺序，Mysql修改表名

    对于已经创建好的表,尤其是已经有大量数据的表,如果需要对表做一些结构上的改变,我们可以先将表删除(drop),然后再按照新的表定义重建表.这样做没有问题,但是必然要做一些额外的工作,比如数据的重新加载 ...

  9. atitit.orm的缺点与orm框架市场占有率，选型attilax总结

    atitit.orm的缺点与orm框架市场占有率,选型attilax总结 1. attilax的orm框架要求 1 2. orm框架市场占有率 2 3. spring jdbc templt 3 4. ...

  10. 【Android】15.2 广播

    分类:C#.Android.VS2015: 创建日期:2016-02-29 一.简介 Android系统和你自己编写的应用程序都可以通过Indent发送和接收广播信息.广播的内容既可以是自定义的信息, ...