echarts 折线图百分比 tooltip 实例 两种方法

Posted zxy-come-on

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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","图表请求数据失败!");
}
});

 

如图:

技术图片

 

以上是关于echarts 折线图百分比 tooltip 实例 两种方法的主要内容,如果未能解决你的问题,请参考以下文章

echarts折线图tooltip中图例颜色对应混乱问题

echarts的tooltip展示自定义值

echarts折线图,为啥加了tooltip,导致提示线消失

怎么让echarts折线图铺满整个div

Echarts笔记-折线图定制(Y轴百分数,鼠标移动显示百分数,显示X轴,Y轴值)

echarts图表——折线图&饼图