项目上用了Echarts图表库，但是提示框里的文字想要有高亮显示 （
如图 红色字体
），查了查官方文档结合实例，终于找到了解决办法。
使用tooltip的formatter内容格式器，可以通过定义函数的方式解决。
formatter: function(params, ticket, callback) {
console.log(params)
var res = '' + params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if(i == 2) {
res += '<br/><span style="color:red;">' + params[i].seriesName + ' : ' + params[i].value + '</span>';
} else {
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
}
}
setTimeout(function() {
// 仅为了模拟异步回调
callback(ticket, res);
}, 1000)
return 'loading';
}
option = {
title: {
text: '各区县的项目状态总揽',
subtext: ''
},
tooltip: {
trigger: 'axis',
formatter: function(params, ticket, callback) {
console.log(params)
var res = '' + params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if(i == 2) {
res += '
' + params[i].seriesName + ' : ' + params[i].value + '';//给
} else {
res += '
' + params[i].seriesName + ' : ' + params[i].value;
}
}
setTimeout(function() {
// 仅为了模拟异步回调
callback(ticket, res);
}, 1000)
return 'loading';
}
},
legend: {
data: ['立项设计', '项目招投标', '项目实施', '质量监督', '项目验收']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
data: ['路北区'],
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '立项设计',
type: 'bar',
data: [49],
}, {
name: '项目招投标',
type: 'bar',
data: [23],
}, {
name: '项目实施',
type: 'bar',
data: [60],
}, {
name: '质量监督',
type: 'bar',
data: [26],
},
{
name: '项目验收',
type: 'bar',
data: [7],
}
]
};
可以把以上代码复制到官网实例区看效果 http://echarts.baidu.com/echarts2/doc/example/tooltip.html