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

最新推荐文章于 2025-05-24 00:03:15 发布

一只害虫

最新推荐文章于 2025-05-24 00:03:15 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

文章标签： echarts javascript ecmascript

原文链接：https://www.cnblogs.com/zxy-come-on/p/10821266.html

本文介绍了使用ECharts进行图表动态配置的两种方法。一种是在已知类型数量的情况下直接设置tooltip格式；另一种适用于未知类型数量的情况，通过后端获取数据并自定义显示格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一

在知道有几个类型时：下面有五个类型

tooltip : {
show : true,
trigger: 'axis',
formatter: '{b0} {a0}: {c0}% {a1}: {c1}% {a2}: {c2}% {a3}: {c3}% {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+ ' ';
}
showHtm+= name + ': ' + value+'%'+' '
}
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","图表请求数据失败!");
}
});