最近在使用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. Python3.2官方文档翻译--输出格式化

    第八章 标准库二 第二部分涵盖了很多更能满足专业开发者需求的高级模块.这些模块在小脚本中非常少出现. 8.1 输出格式化 Reprlib模块为大型的或深度嵌套的容器缩写显示提供了repr()函数的一个 ...

  2. hadoop+spark集群搭建入门

    忽略元数据末尾 回到原数据开始处 Hadoop+spark集群搭建 说明: 本文档主要讲述hadoop+spark的集群搭建,linux环境是centos,本文档集群搭建使用两个节点作为集群环境:一个 ...

  3. Sublime Text 使用指南 - 前端开发神器

    Sublime Text 前端开发的神器 Sublime Text是一个前端开发者必备的编辑器,大量的插件,完善的功能,优越的性能,有非常多的特色,给前端开发提供了一个完善的开发条件. 本文主要介绍的 ...

  4. atitit。gui 界面皮肤以及换肤总结 java .net c++

    atitit.gui 界面皮肤以及换肤总结 java .net c++ 1. Swing 的皮肤 1 1.1. windows风格 1 1.2. Mac风格 ( liquid 框架) 1 2. 如何给 ...

  5. redis基础之订阅发布、主从复制和事务(四)

    前面已经学习了redis的基本的命令行操作和数据类型,下面开始redis一些有趣的功能. 订阅和发布机制 定义:发布者相当于电台,订阅者相当于客户端,客户端发到频道的消息,将会被推送到所有订阅此频道的 ...

  6. android.animation(4) - ObjectAnimator的ofInt(), ofFloat()(转)

    一.概述 1.引入 上几篇给大家讲了ValueAnimator,但ValueAnimator有个缺点,就是只能对数值对动画计算.我们要想对哪个控件操作,需要监听动画过程,在监听中对控件操作.这样使用起 ...

  7. codeblocks 配置OpenGL

    一.选择编译器环境 这里选择codeblocks,带MinGW的版本. 二.下载glut工具包 网址:http://pan.baidu.com/s/1eQriTQM 三.配置glut 解压缩下载的gl ...

  8. A+P+M+W

    安装之前先做个目录的安排, D盘根目录建立”Dev”文件夹,在文件夹下建立: Php Apache Mysql 三个文件夹 所需软件: 0.    安装Apache的前必须安装VC11 vcredis ...

  9. windows下wim配置成IDE

    1.配置文件_wimrc set fileencodings=utf-,ucs-bom,cp936,big5 set fileencoding=utf- source $VIMRUNTIME/vimr ...

  10. RP2837 IN1-IN2 对应关系 2路ＤＩ

    RP2837 IN1-IN2 对应关系: IN1   ARM-IO2   PA16 IN2   ARM-IO6   PA4 root@sama5d3-linux:~ echo 16  > /sy ...