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 ...
随机推荐
- c语言判断一个数是否为偶数
#include <stdio.h> #include <stdbool.h> _Bool isOu(int n){ //高度注意:&的优先级低于== )==){ re ...
- [svc]sudo su权限案例
一 控制sudo 允许执行所有命令,排除某几个命令(带参数) lanny ALL=(ALL) NOPASSWD:ALL, !/bin/su - root, !/usr/sbin/visudo 如果需要 ...
- Android开发日记（七）
trim()方法返回调用字符串对象的一个副本,但是所有起始和结尾的空格都被删除了,例子如下:String s=" Hello World ".trim();就是把" ...
- 基于jQuery select下拉框美化插件
分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 源码下 ...
- 本系列love2d示例代码错误集中整理
3.输入和音乐 音乐不是循环播放的,可以在love.audio.play(music) 之前添加music:setLooping(true)
- scala 测试类
class NetworkUtilTest extends FunSuite with Matchers { test("testIp2Int") { val ip = Netwo ...
- PHP——0128练习相关3——设置文本域的默认值
都知道文本框的的默认值只要设置value属性即可但是文本域是没有value属性的要设置文本域的默认值只要<textarea>默认值</textarea>即可简单吧,呵呵..
- hdu6121 Build a tree 模拟
/** 题目:hdu6121 Build a tree 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6121 题意:n个点标号为0~n-1:节点i的父节点 ...
- 30Mybatis_mybatis和spring整合-原始dao开发
这篇文章很重要, 第一步:我们讲一下整合的思路: 我们以前要用Mybatis是需要sqlMapConfig.xml(这个配置文件需要配置dataource,以及mapper.xml文件.)sqlMap ...
- Unity3d优化总结1
优化内容 包括: 1.代码方面: 2.函数使用方面: 3.ngui注意方面: 4.数学运算方面: 5.内存方面: 6.垃圾回收方面 等等... 1. 尽量避免每帧处理,可以每隔几帧处理一次 比如: ...