修改tooltip提示框的内容
1. 首先是默认提示消息
其中trigger为触发方式,item是放到对应的图上触发对应的提示框
在默认的状态下,因为后端数据的原因,没有提示框的内容没有单位
2. 解决办法
在tooltip中添加formatter属性
params是formatter所需的数据集,官方的解释如下:
通常打印params选择自己所需的值就可结局。
3. 对应的代码
tooltip: {
trigger: 'item',
formatter: function(params) {
// console.log(params);
var htmlStr = '';
var color = params.color; //图例颜色
var seriesName = params.seriesName; //图例名称
var xName = params.name; //x轴的名称
var value = params.value; //y轴值
var htmlStr = '<div>';
htmlStr += seriesName + '<br/>';
htmlStr +=
'<span style="margin-right: 5px; font-size: 16pt; font-family: Consolas;display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color:' +
color + ' ;"></span>';
htmlStr += "<span style='min-height: 20pt; font-size: 10pt'>";
htmlStr += xName + '年';
htmlStr += '</span>';
htmlStr += "<span style='min-height: 20pt; font-size: 10pt; margin-left: 20px'>";
// console.log(params.data.length);
if (!value.length) {
htmlStr += value + '%';
} else {
htmlStr += value[params.seriesIndex + 1] + '万元';//选择对应value的坐标
}
htmlStr += '</span>'
htmlStr += '</div>';
return htmlStr;
}
},
4. 结果:成功添加单位
(新手上路,有错指正)