<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • Echarts x軸文本內容太長的幾種解決方案

    2018-5-16    seo達人

    如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

    Echarts 標簽中文本內容太長的時候怎么辦 ? 
    - 1對文本進行傾斜 
    在xAxis.axisLabe中修改rotate的值

     xAxis: {
                data: ["襯衫11111","羊毛二二","雪紡衫111","褲子111","高跟鞋11","襪子111"],//x軸中的數據 name:"123",//坐標軸名稱。 nameLocation:'end',//坐標軸名稱顯示位置。 axisLabel : {//坐標軸刻度標簽的相關設置。 interval:0, rotate:"45" }
            },
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    interval

    坐標軸刻度標簽的顯示間隔(在類目軸中有效哦),默認會采用標簽不重疊的方式顯示標簽(也就是默認會將部分文字顯示不全) 
    可以設置為0強制顯示所有標簽,如果設置為1,表示隔一個標簽顯示一個標簽,如果為3,表示隔3個標簽顯示一個標簽,以此類推

    一開始我沒設置 因為標簽文本過長的原因他就自動不顯示全部 
    image.png

    被遮擋住就讓grid 組件離容器向上移動 把grid中的bottom的值調大一些

     grid:{//直角坐標系內繪圖網格 show:true,//是否顯示直角坐標系網格。[ default: false ] left:"20%",//grid 組件離容器左側的距離。 right:"30px",
                borderColor:"#c45455",//網格的邊框顏色 bottom:"20%" // },
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    image.png 
    - 2.換行顯示 
    在xAxis.axisLabel中 使用formatter回調函數實現換行

     axisLabel : {//坐標軸刻度標簽的相關設置。 formatter : function(params){ var newParamsName = "";// 最終拼接成的字符串 var paramsNameNumber = params.length;// 實際標簽的個數 var provideNumber = 4;// 每行能顯示的字的個數 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 換行的話,需要顯示幾行,向上取整 /**
                                 * 判斷標簽的個數是否大于規定的個數, 如果大于,則進行換行處理 如果不大于,即等于或小于,就返回原標簽
                                 */ // 條件等同于rowNumber>1 if (paramsNameNumber > provideNumber) { /** 循環每一行,p表示行 */ for (var p = 0; p < rowNumber; p++) { var tempStr = "";// 表示每一次截取的字符串 var start = p * provideNumber;// 開始截取的位置 var end = start + provideNumber;// 結束截取的位置 // 此處特殊處理最后一行的索引值 if (p == rowNumber - 1) { // 最后一次不換行 tempStr = params.substring(start, paramsNameNumber);
                                        } else { // 每一次拼接字符串并換行 tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;// 最終拼成的字符串 }
    
                                } else { // 將舊標簽的值賦給新標簽 newParamsName = params;
                                } //將最終的字符串返回 return newParamsName
                    }
    
                }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    image.png

    • 3.文字豎直顯示 
      同樣和換行一個道理,只是這個是單個文字換行 
      在xAxis.axisLabel中 使用formatter回調函數實現換行
    axisLabel: { interval: 0,  
                                   formatter:function(value) {  
                                       return value.split("").join("\n"); } } 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    image.png

    • 4.隔一個換行 
      在xAxis.axisLabel中 使用formatter回調函數實現換行
    axisLabel : {//坐標軸刻度標簽的相關設置。 clickable:true,//并給圖表添加單擊事件  根據返回值判斷點擊的是哪里 interval : 0,
                    formatter : function(params,index){ if (index % 2 != 0) { return '\n\n' + params;
                        } else { return params;
                        }
                    }
    
                }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    image.png

    藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://m.skdbbs.com

    存檔

    主站蜘蛛池模板: 四虎国产精品免费久久5151| 91精品国产成人网在线观看| 欧美日韩精品在线| 综合精品欧美日韩国产在线| 99精品在线免费| 国产成人精品日本亚洲网站| 亚洲国产精品成人| 国产手机在线精品| 99国产精品私拍pans大尺度| 国产精品www| 国产精品视频永久免费播放| 亚洲精品乱码久久久久久蜜桃不卡| 国产精品内射久久久久欢欢| 欧美精品在线一区| 精品亚洲综合久久中文字幕| 国产精品免费看久久久| 婷婷精品国产亚洲AV麻豆不片 | 亚洲国产精品无码久久SM| 精品视频在线观看你懂的一区| 2021国产三级精品三级在专区| 国产成人精品视频在放| 国产精品无码成人午夜电影| 久久国产热精品波多野结衣AV| 亚洲精品国精品久久99热一| 亚洲精品视频免费观看| 久久精品a亚洲国产v高清不卡| 少妇精品久久久一区二区三区| 国产精品哟女在线观看| 欧美精品在线一区| 国产亚洲一区二区精品| 97久久精品国产精品青草| 91精品国产高清久久久久久io| 欧美精品黑人粗大免费| 亚洲AV无码久久精品色欲| 亚洲AV无码成人精品区蜜桃| 午夜精品乱人伦小说区| 日韩精品内射视频免费观看| 日韩精品视频一区二区三区| 久久精品人人做人人爽97| 精品国产一区二区三区久久久狼 | 亚洲精品线路一在线观看|