Echarts中axislabel文字過長導致顯示不全或重疊

本文轉載自查看原文 2015-11-20 11:02 47885 ECharts

最近在使用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的距離:

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Echarts-axislabel文字過長導致顯示不全或重疊 Echarts-axislabel文字過長導致顯示不全或重疊解決echarts圖形由於label過長導致文字顯示不全問題 Echarts X軸數據過多導致重疊顯示不全的問題 echarts的axisLabel的文字內容過長的解決辦法解決echarts x軸標簽文字過多導致顯示不全 echarts x軸標簽文字過多導致顯示不全 Echarts 解決餅圖文字過長重疊的問題關於echarts中的餅狀圖的label文字顯示過長的問題 Echarts 解決餅圖文字過長重疊的問題