在项目中我们需要的往往是带单位的提示框比如这样的
那么去哪里修改呢?
其实在tooltip中有函数方法formatter(params)可以进行修改
params是你展示的数据比如柱状图你只显示一条柱状可以不用循环直接字符串拼接但是如果有多条需要展示那么就需要使用循环拼接了
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
},
formatter:function(params){
// console.log(params);
var html = params[0].name + "<br/>";
for(var i=0;i<params.length;i++){
html +=
params[i].marker +params[i].seriesName+
params[i].value +"人"+"<br/>";
}
return html
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
},
formatter: function (params) {
var htmlStr = '';
htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
for(var i=0;i<params.length;i++){
//前面的原点和他的颜色
htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">' + params[i].seriesName + ':</span>'+
'<span style="color:#fff;">' + params[i].value + ' ℃</span><br/>';
}
htmlStr += '</div>';
return htmlStr
},
},复制代码
两个代码都可以看看那你能看懂哪一种吧
比如对这个新疆百分比进行操作
legend: {
left: "65%",
top:"20%",
pageIconSize: 10,
type: "scroll",
top: "7%",//调节新疆字体和边框得距离
orient: this.myorient,
icon: "circle",
padding: [0, 0, 0, 0],//上右下左
// itemGap: 14,
itemWidth: 7,//控制原点的大小
formatter: name => {
let data = this.dataList;
//找到data中name和文本name值相同的对象
let val = data.filter(item => {
return item.name === name;
});
let obj = val[0];
// let arr = [
// '{a|'+name+'}',
// '{b|'+obj.value+'辆}',
// '{c|'+obj.percentage+'}',
// ];
let arr = "{a|" + name + "}{b|" + obj.percentage + "}";//返回的是新疆 56% 可以继续拼接
return arr;
// return arr.join('')
},