Echarts 折线图 自定义悬浮窗tooltip,读取params中的数据将小数显示为百分比并保留两位小数,日期只显示年月日
Echarts 折线图 自定义悬浮窗tooltip,读取params中的数据将小数显示为百分比并保留两位小数,日期只显示年月日,纵轴为百分比,横轴为年月日
·
在网上没有找到我需要的内容,悬浮窗数据一直显示为[Object,Object],获取不到params中的相应内容。
通过System.out.println(map)获取到的后台数据格式为
{treeMapData=[{yield=0.9894, time_info=2021-01-01 00:00:00},
{yield=1, time_info=2021-01-02 00:00:00},
{yield=0.9914, time_info=2021-01-03 00:00:00},
{yield=1, time_info=2021-03-31 00:00:00}]}
传到前台的数据可以用console.log(params);进行查看
Echarts上有类似的案例Examples - Apache ECharts
其tooltip的设置为
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
color: '#222'
}
},
formatter: function (params) {
return (
params[2].name +
'<br />' +
((params[2].value - base) * 100).toFixed(1) +
'%'
);
}
},
我出现了程序错误,悬浮窗直接不显示了。
多次试错,通过控制台输出数据,最终尝试出了一个较为复杂的显示方法。
最终的tooltip为
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross"
},
formatter:function (params){
var result="";
var time_info="";
var yield="";
for (var i = 0, l = params.length; i < l; i++) {
time_info = echarts.format.formatTime("yyyy-MM-dd", params[i].value[params[i].dimensionNames[1]]);
yield = (params[i].value[params[i].dimensionNames[0]]*100).toFixed(2) + "%";
result += time_info + "</br>" + yield;
//console.log("时间",time_info);
//console.log("良率",yield);
//console.log("时间",params[i].value[params[i].dimensionNames[1]]);
//console.log("良率",(params[i].value[params[i].dimensionNames[0]]*100).toFixed(2) + "%");
}
return result;
}
},
x轴和外轴为
xAxis: {
type: "time",
boundaryGap: false,
axisPointer: {
label: {
show: true,
formatter: function(params) {
return echarts.format.formatTime("yyyy-MM-dd", params.value);
}
}
}
},
yAxis: {
type: "value",
min:0.7,
max:1,
axisLabel: {
formatter: function (value, index) {
return (value * 100).toFixed(2) + "%";
}
},
axisPointer: {
label: {
formatter: function (params) {
return ((params.value) * 100).toFixed(2) + "%";
}
}
}
},
设置X轴间隔为7天
xAxis.maxInterval
number 自动计算的坐标轴最大间隔大小。
例如,在时间轴((type: 'time'))可以设置成 3600 24 1000 保证坐标轴分割刻度最大为一天。
{
maxInterval: 3600 * 24 * 1000
}
只在数值轴或时间轴中(type: 'value' 或 'time')有效。
更多推荐
已为社区贡献1条内容
所有评论(0)