Echarts中axislabel文字过长导致显示不全或重叠
最近在使用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文字过长导致显示不全或重叠的更多相关文章
- Echarts-axislabel文字过长导致显示不全或重叠
先看两张图 按目前情况,官方并为对axislabel的高度或者宽度做调整.所以解决方案只能从其他方案下手 解决方案有几种 第一种为上图解决方案 设置grid属性定义图的大小来释放空间,使得axisla ...
- Echarts【1、数据过多导致显示不全分页，2、数据展示探讨分析】
var len=<c:out value="${len }"></c:out>; var dataZoom_end=null; //为空默认100%所以默认 ...
- echarts x轴标签文字过多导致显示不全
原文电梯:https://blog.csdn.net/kebi007/article/details/68488694 echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.a ...
- [修正] Firemonkey Android 文字斜粗体显示不全的问题
问题:Firemonkey Android 平台显示斜粗体文字时,文字右方会有显示不全的问题. 修正代码: 请将 FMX.FontGlyphs.Android.pas 复制到自己的工程目录下,再修改如 ...
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- Echarts 解决饼图文字过长重叠的问题
之前在网上查找了很多关于解决饼图文字描述过长导致重叠的问题,找了很多一直没有一个合适的解决方案,最后自己只能花时间研究echarts文档,功夫不负有心人,终于解决了文字重叠展示不全等问题. 废话不多说 ...
- FastAdmin 关于列表渲染文字过长导致页面难以管理的问题
先贴一张图片做个例子 看不清图片的朋友可以右键图片,在<新标签页中打开图片>; 可以看到,由于内容过长,导致后面操作的增删改要拉到最后才能操作. 在我们的FastAdmin中,目前我还没找 ...
- mysql如果搜索长度过宽 导致显示不全的情况解决
今天我在搜索数据库里面优惠码字段 直接使用 select * from table 的命令的时候 由于 第一个 字段过长导致后面的都无法显示全..我还是宽屏! 所以 搜索了一下 可以让 它单行显示 使 ...
- table td中的内容过长，显示为固定长度，多余部分用省略号显示
简单描述:table数据过长,结果顶到下一格,影响了数据的查看 解决办法: 给table 加上style属性 另外 给td加上style标签修饰 <table class="tab ...
随机推荐
- iOS多线程常用类说明
iOS的多线程,涉及到如下一些类,这里集中做个介绍,免得混淆. 1.NSTimer 很显然,这是定时器类 2.NSTask iOS 不支持 NSTask 在很多并发操作的时候,多线程太耗资源,也太危险 ...
- operator new 和 operator delete 实现一个简单内存泄漏跟踪器
先来说下实现思路:可以实现一个Trace类,调用 operator new 的时候就将指向分配内存的指针.当前文件.当前行等信息添加进Trace 成员map容器内,在调用operator delete ...
- C union共用体
共用体是一种特殊的数据类型,允许您在相同的内存位置存储不同的数据类型.您可以定义一个带有多成员的共用体,但是任何时候只能有一个成员带有值.共用体提供了一种使用相同的内存位置的有效方式. 共用体定义: ...
- //%f表示以十进制格式化输出浮点数 %.2f
//%f表示以十进制格式化输出浮点数 String s1 ="评分: %.1f"; String s2 = String.format(s1, 8.0); System.out.p ...
- C++14系列（2）:C/C++的时间函数
C++笔记開始 为了好好研究下C++14.顺便复习下曾经的C++知识.搞了个git(不断完好中): https://github.com/rododo/cpp14examples.git 里面会慢慢封 ...
- location 将多级目录下的文件转成一个文件
/ck-135-201-7142.html 指向/ck/135/201/7142.html [root@web01 www]# cat /app/server/nginx/conf/rewrite/d ...
- Nginx 1.5.2 + PHP 5.5.1 + MySQL 5.6.10 在 CentOS 下的编译安装
最近配置了几台Web服务器,将安装笔记贴出来吧.没时间像以前那样,将文章写的那样系统了,请见谅.详细配置,可以看以前的旧文章: http://blog.zyan.cc/nginx_php_v6 .安装 ...
- 处理图片（updated）
高像素的图片,比如分辨率为 7712x4352 的照片,当加载到一个 bitmap 中时会占用相当大的内存. 每个像素会占用 4个字节的内存,所以当没有被压缩时,全部的图片会占用 12800万字节(约 ...
- jquery $.each 和for 怎么跳出循环（终止本次循环）
1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2.而在jquery中 $.each则对应的使用return true 和return false ...
- PHP——数组和数据结构
<body> <?php $arr[0]=5;//赋值定义 $arr[1]="aa"; print_r($arr); echo "<br /> ...