功能描述：
x軸文字顯示過長會影響柱狀圖顯示不全，需要對文字進行處理，爲了美觀，限定文字只顯示在一行，文字長度爲4；當長度大於4時將第四個文字替換爲"..."；當鼠標懸浮在"..."時，顯示全部內容，其它長度爲4的文字正常顯示；當鼠標移出"..."時，懸浮顯示內容消失。
代碼實現如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>柱狀圖x軸過長文字懸浮顯示</title>
<script src="echarts.js"></script>
</head>
<body>
<!--爲ECharts 準備一個具備大小的DOM-->
<div id="main1" style="width:600px; height:600px"></div>
</body>
<script>
//基於準備好的Demo,實例化ECharts
var myECharts = echarts.init(document.getElementById('main1'));
var data0 = [{value:620}, {value:732}, {value:701}, {value:734}, {value:1090}, {value:1130}, {value:1120}];
var data1= [{value:120}, {value:132}, {value:101}, {value:134}, {value:290}, {value:230}, {value:220}];
var data2= [{value:60}, {value:72}, {value:71}, {value:74}, {value:190}, {value:130}, {value:110}];
var data3 = [{value:62}, {value:82}, {value:91}, {value:84}, {value:109}, {value:110}, {value:120}];
for(var i = 0;i<data1.length;i++){
var arr = [];
arr.push(data0[i].value);
arr.push(data1[i].value);
arr.push(data2[i].value);
arr.push(data3[i].value);
(eval("data"+getMinIndex(arr)))[i].itemStyle = {
normal:{
barBorderRadius :[10,10,0,0]
}
}
}
//指定圖標的配置項和數據
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
}
},
legend: {
data:['百度','谷歌','必應','其他']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
triggerEvent:true,
axisLabel:{
formatter:function(value){
return linefeed(value,4);
}
},
data : ['哈利波特與死亡聖器','讓暴風雨來得更猛烈一些吧','週三','週四','週五','週六','週日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'百度',
type:'bar',
barWidth : 18,
stack: '搜索引擎',
data:data0,
itemStyle:{
normal:{
color:'#505D6F'
}
}
},
{
name:'谷歌',
type:'bar',
stack: '搜索引擎',
data:data1,
itemStyle:{
normal:{
color:'#826AF9'
}
}
},
{
name:'必應',
type:'bar',
stack: '搜索引擎',
data:data2,
itemStyle:{
normal:{
color:'#FFCC00'
}
}
},
{
name:'其他',
type:'bar',
stack: '搜索引擎',
data:data3,
itemStyle:{
normal:{
color:'#99CEFF'
}
},
label:{
normal:{
show:true,
position:'top',
formatter:function(param){
console.log(param.value);
return param.value+data1[param.dataIndex].value+data2[param.dataIndex].value+data3[param.dataIndex].value
}
}
}
}
]
};
//使用剛指定的配置項和數據
myECharts.setOption(option);
formatXaxis(myECharts,option.tooltip);
//獲取最頂端柱子
function getMinIndex(arr){
var min;
for(var j = arr.length-1;j<arr.length;j--){
if(arr[j]!=0){
min = j;
break;
}
}
return min;
}
function linefeed(params,provideNumber,limitLines){
var newParamsName = "";
var paramsNameNumber = params.length;
var rowNumber = Math.ceil(paramsNameNumber/provideNumber);
if(!limitLines) limitLines = 2;
var n = rowNumber<limitLines?rowNumber:limitLines;
if(paramsNameNumber>provideNumber){
for(var i=0;i<n;i++){
var tempStr = "";
var start = i*provideNumber;
var end = start+provideNumber;
if(i=n-1&&rowNumber>=limitLines&¶msNameNumber>8){
tempStr = params.substring(start,end-1)+"..."
}else{
tempStr = params.substring(start,end)+"\n"
}
newParamsName+=tempStr;
}
}else{
newParamsName = params
}
return newParamsName;
}
function formatXaxis(el,toolTipFn){
var isXLabel = true;
el.on('mouseover',function(params){
if(params.componentType = 'xAxis'&¶ms.value.length>8){
var offsetX = params.event.offsetX+10;
var offsetY = params.event.offsetY+10;
el.setOption({
tooltip:{
formatter:params.value,
alwaysShowContent:true
}
});
el.dispatchAction({
type:'showTip',
seriesIndex:0,
dataIndex:0,
position:[offsetX,offsetY]
})
}
});
el.on('mouseout',function(params){
if(params.componentType = 'xAxis'&¶ms.value.length>8){
el.setOption({
tooltip:toolTipFn
});
el.setOption({
tooltip:{
alwaysShowContent:false
}
});
}
})
}
</script>
</html>