echarts x/y軸座標文字過長解決辦法-換行
/**
* Created by HanSon on 2016/1/24.
*/
function newline(option, number, axis){
/* 此處注意你的json是陣列還是物件 */
option[axis][0]['axisLabel']={
interval: 0,
formatter: function(params){
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = number;
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
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
}
}
return option;
}
# newline-echarts
###Introduce
許多人使用百度的echarts.js時候會出現資料名太長覆蓋的情況,newline-echarts.js能夠很好解決這種換行問題
###Usage
newline(option, 6, 'yAxis')
* 引數一:是你的option
* 引數二:是多少個字就換行
* 引數三:是x軸還是y軸 可選項 'yAxis' OR 'xAxis'
var chart = echarts.init(document.getElementById("main"));
<script src="js/echarts.js"></script>
var option =
{
# your options
}
option = newline(option, 6, 'yAxis')
chart.setOption(option)
##Example
相關推薦
echarts x/y軸座標文字過長解決辦法-換行
/** * Created by HanSon on 2016/1/24. */ function newline(option, number, axis){ /* 此處注意你的json是陣列還是物件 */ option[axis][0][
X軸、Y軸label文字過長的四種處理方式
1、傾斜顯示 2、換行顯示 3、豎直顯示 4、隔兩行顯示 5、原始碼 var axisLabel1 = { // 方法1:傾斜顯示 interval: 0, //強制全部顯示,1表示隔一個;2隔兩個 rotate: "45
echarts圖Y周座標軸文字過長的解決方案
解決方案 在翻看echarts文件的過程中我看到了座標軸文字可以自行定義模板,於是想到了我給一個固定12的字數限制,超出部分以省略號代替,這樣就不會造成圖形範圍忽大忽小了。 axisLabel: { color: "#000", interval: 0, &nbs
echarts統計圖Y軸(或X軸)文字過長問題解決
num col start -a align bsp form padding tar echarts 統計圖Y軸文字過長 在使用echarts時,出現數值非常大,Y軸又顯示不下的情況就需要壓縮Y軸數值刻度。 解決方法: yAx
解決Asp.net下GridView中顯示資料欄位文字過長的辦法
在網頁顯示時,經常遇到表格或Gridview,Datalist等中資料欄位太長的問題。基本辦法有兩種:1,換行顯示;2,先隱藏一部分,當滑鼠移動到其位置時,自動將全部內容的顯示出來。本文主要講述如何採用ToolTip實現第二種解決辦法。其中第一種辦法,不建議採用,其原因:1,
關於Hbase的RegionServer的GC持續時間過長解決辦法
hbase gc 持續時間 問題現象:分析原因:http://www.aboutyun.com/thread-11240-1-1.htmlhttp://blog.csdn.net/wwwxxdddx/article/details/50981089修改方法:只用原有的配置在後面增加 -XX:+
VS程式設計,C#中string字串過長,回車換行寫在不同的行的一種方法。
1、使用@對字串進行轉義。 “”雙引號裡裡面的特殊字元不再具有轉義功能,例如\n不再被轉義成換行符。 2、使用@對字串進行轉義,若字串中包含雙引號,則需要在雙引號外,再加一個雙引號以區分。 例如: string sqlString =
表格中的內容過長時不換行,以tips方式展示
專案使用vue+element-ui tooltip-effect="light" <el-table>需要設定這個屬性, 然後在需要使用的<el-table-column>中使用 show-overflow-tooltip="true" 既能實現效
IDEA 編譯時 報 “常量字串過長” 解決辦法
從eclipse 工具轉到 IDEA 工具的時候,出現了一些問題,在這裡記錄一下,以便之後使用到,廢話不多說。 在編譯專案時,出現錯誤為:“常量字串過長” ,我當時想這個問題需要去研究根本。後來就
echarts x軸座標文字顯示不全
在echarts中應用柱狀圖或者折線圖時,當資料量過多的時候,X軸的座標就會顯示不全(如下圖圖一),在ECharts圖表元件內部有一個機制,用於統計xAxis座標刻度的個數和圖表寬度,從而會自動
echarts圖表裏label文字過長換行的方法
.com 但是 echarts 求余 字符串數組 字數 進行 http 圖標 在做一些圖標時,有時會出現顯示文字過長的問題,需要將其按照指定的字數換行,像下圖這樣 而echarts沒有提供換行的方法,但是可以使用fomatter方法進行設置,代碼如下 formatt
Echarts 折線圖y軸標籤值太長時顯示不全的解決辦法
問題 分析 解決辦法 問題 先看一下正常的情況 再看一下顯示不全的情況 所有的資料都是從後臺取的,也就是說動態變化的,一開始的時
Echarts中axislabel文字過長導致顯示不全或重疊
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> 2 <HEAD> 3 <TITLE>my_echarts</TITLE> 4 <META HT
flex 圖表ColumnChart能夠點選資料獲得該資料x軸,與y軸座標
chart 的 itemClick 事件中有 chartItem的 /** * 柱狀圖點選事件,獲取該柱狀圖的X軸、Y軸欄位及下標 * */ p
Echarts動態載入折線圖X Y軸資料圖表資料
前幾天,收到商家的反饋,希望可以有一個直觀的圖表,展示一個時間段裡的銷售額,客數,排班人數,並把銷售高峰期以及時間段反應出來。經同事的介紹,選擇了百度的 echarts,縮寫來自Enterprise Charts,一個純JavaScript的圖表庫。上官網查,官方的
echarts legend太多換行顯示及legend每個標籤文字過長分兩行顯示的間距調整問題
最近在做大資料相關的東西,用到了echarts,然後遇到了有10個legend,要分左右顯示,並且每五個字換行顯示問題。 前者很快就解決出來了,後者換行顯示的話文字捱得很近,怎麼辦呢,第一反應自己搞不定,那就百度看看有沒有解決方案,結果一大堆都是說前者分左右換行顯示,後者沒
echarts 自定義y軸座標
`` yAxis : { type : 'value', axisLabel:{ formatter: function (
自己寫一個文字過長顯示省略號的函數
bsp aaa poi var cti 顯示 adf 函數 字符 function points(strin,num){ //strin表示目標字符,num表示在第幾個字符用省略號顯示 var Str = "",len = strin.length; if(len
當文字過長時裁剪(顯示省略號或只裁剪 用CSS方法,不用程序)
fire 省略號 fixed strong face con str 來源 type 原文發布時間為:2009-09-16 —— 來源於本人的百度文章 [由搬家工具導入]CSS中ellipsis()应用【转
css實現文字過長顯示省略號的方法
對象 tle div wid 表示 overflow 方法 clas 說明 <div class="title">當對象內文本溢出時顯示省略標記</div> 這是一個例子,其實我們只需要顯示如下長度: css實現網頁中文字過長截取... tit