echart图标,折线图,柱状图,鼠标悬浮上去显示数据加自定义单位代码
【代码】echart图标,折线图,柱状图,鼠标悬浮上去显示数据加自定义单位代码。
·
// 添加自定义格式化函数
formatter: function(params) {
// 获取横坐标名称(单位简称)
const category = params[0].name;
let result = `<div style="margin-bottom: 4px;"><strong>${category}</strong></div>`;
// 定义单位(可以根据需要定制)
const units = {
'油量': '吨',
'液量': '吨',
'影响井数': '口',
};
// 遍历每个系列的数据点
params.forEach(param => {
const seriesName = param.seriesName;
const value = param.value || '-';
const color = param.color;
const unit = units[seriesName] || ''; // 获取该系列的单位
// 构建每行HTML内容
result += `
<div style="display: flex; align-items: center; margin-bottom: 4px;">
<div style="width: 10px; height: 10px; border-radius: 50%; background: ${color}; margin-right: 8px;"></div>
<div>
<span>${seriesName}: </span>
<span style="color:${color}; font-weight:bold;">${value}</span>
<span>${unit} </span>
</div>
</div>
`;
});
return result;
}

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
所有评论(0)