<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

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

    日歷

    鏈接

    個人資料

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

    存檔

    主站蜘蛛池模板: 久久se这里只有精品| 国产精品嫩草影院AV| 亚洲愉拍99热成人精品热久久| 91人前露出精品国产| 国产精品熟女高潮视频| 午夜三级国产精品理论三级| 国产精品成人免费观看| 国产成人精品视频在放| 亚洲AV第一页国产精品| 精品人妻少妇一区二区| 免费精品一区二区三区第35| 蜜臀久久99精品久久久久久小说| 久久精品免费网站网| 91国内揄拍国内精品情侣对白| 99精品热这里只有精品| 欧美日韩人妻精品一区二区在线| 久久国产精品偷99| 国产精品自产拍在线观看花钱看| 桃花岛精品亚洲国产成人| 成人精品在线视频| 国产精品一久久香蕉国产线看观看| 无码精品一区二区三区在线| 亚洲精品国产精品国自产观看| 麻豆精品三级全部视频| 精品无人区无码乱码毛片国产| 66精品综合久久久久久久| laowang在线精品视频| 国产精品国产三级国产av品爱网| 久久精品国产亚洲77777| 亚洲AV成人精品网站在线播放| 亚洲精品乱码久久久久久| 亚洲无码精品浪潮| 亚洲婷婷国产精品电影人久久| 亚洲精品无码专区2| 亚洲国产精品13p| 亚洲国模精品一区| 亚洲人成电影网站国产精品| 亚洲精品亚洲人成人网| 亚洲国产精品久久电影欧美| 日韩精品久久无码人妻中文字幕| 亚洲AV永久无码精品一百度影院|