echarts 折線圖百分比 tooltip 實例 兩種方法


方法一

在知道有幾個類型時:下面有五個類型

tooltip : {
show : true,
trigger: 'axis',
formatter: '{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />{a3}: {c3}%<br />{a4}: {c4}%'
},

如圖:

 

 

 

 

方法二

在不知道幾個類型時: 自定義類型

client.get("/charList", data, function(result){
if (result) {
for ( var i = 0; i < result.resultValue.items.length; i++) {
for ( var j = 0; j < result.resultValue.items[i].series.length; j++) {
applyProTempo={
name: result.resultValue.items[i].series[j].name,
type: result.resultValue.items[i].series[j].type,
data: result.resultValue.items[i].series[j].data,
connectNulls: true
}
seriesData.push(applyProTempo);
}
}
_mychart.setOption({
tooltip: {
show: true,
trigger: 'axis',
formatter: function (seriesData, ticket, callback) {
var showHtm="";
for(var i=0;i<seriesData.length;i++){
//名稱
var name = seriesData[i].seriesName;
//x軸名稱
var text = seriesData[i].name;
//值
var value = seriesData[i].value;
if(i==0){
showHtm = text+ '<br>';
}
showHtm+= name + ': ' + value+'%'+'<br>'
}
return showHtm;
}
},
legend: {
orient: 'horizontal',
top:'0%',
center:'center',
data: result.resultValue.items[0].legend
},
grid: {
left: '4%',
right: '3%',
bottom: '3%',// 這幾個屬性可以控制圖表上下左右的空白尺寸,可以自己試試。
containLabel: true
},
axisLabel: {  
                               interval: 0,  
                               formatter:function(value)  
                               {  
                                   return value.replace(/^0*/,"");
                               }  
                           },  
xAxis: {
boundaryGap : true,
show : true,
axisLabel:{
interval:0
},
type: 'category',
name: '日期',
splitLine: {
show: false
},
data: result.resultValue.items[0].category
},
yAxis: {
name:'登錄率',
type: 'value',
interval: 'auto',
axisLabel: {
formatter: '{value}%'
}
},
series: seriesData
});
}else{
mx.indicate("info","圖表請求數據失敗!");
}
});

 

如圖:


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM