自定义echarts中tooltip提示框显示的内容和格式
公司最近在做的项目里,所有图表全部都是用echarts组件做的,包括柱状图,折线图,雷达图,扇形图,圆环图(饼图),因此
tooltip提示框显示的内容及文字是必须涉及到的一点.
问题一:显示tooltip显示框
只需在option里设置:
tooltip:{}
问题二:tooltip显示的内容没有自己想要的
这里便涉及到重点了:
tooltip:{
formatter : function(params){
console.log(params);//打印params
return params;
}
}
在formatter里面打印参数params对象,于是我们能看到所有关于你的图表里所有的信息,通过’params.属性名’拿到自己要显示的信息进行显示.
问题三:tooltip显示的格式不符合自己要求
同样的在的tooltip里面设置:
tooltip: {
formatter: function (params) {
//console.log(params); //通过对象的点语法拿到自己想要的内容,通过连接+,将想要的字符串进行自行的拼接,用<br/>来换行
let res = "";
res = params.name + "<br/>" + "¥" + params.data;
return `<div class="tooltip">${res}</div>`; //最后返回拼接好的值
},
},