Echarts自定义提示框案例

官方文档：#tooltip.formatter

两种方法，如 trigger: 'axis' 的情况下，均在 tooltip 节点下添加如下：

1. 模板字符串

 formatter:'<span style="font-size: 10px">{b}</span><div style="display: flex"><div style="width: 10px;height: 10px;border-radius: 50%;background-color: #FFFF66;margin-top:5px"></div><span style="font-size: 10px;margin:0 10px">{a0}</span>  <span style="font-size: 14px">{c0}(kW)</span></div><div style="display: flex"><div style="width: 10px;height: 10px;border-radius: 50%;background-color: #FF6666;margin-top:5px"></div><span style="font-size: 10px;margin:0 10px">{a1}</span><span style="font-size: 14px">{c1}(kW)</span></div>'

2. 回调函数

 formatter: (params) => {
   let tip = '';
   // console.log('数据:', params);
   if (params && params.length > 0) {
      tip += params[0].name + '<br />';
      params.forEach(item => {
        tip += item.marker + item.seriesName + ' ' + (item.value ? item.value + 'kW' : '-') + '<br />';
      });
   }
   return tip;
}

posted @ 2022-09-27 19:13 RHCHIK 阅读(179) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 4.Vue2.x获取DOM元素或组件的ref和this.$nextTick(cb)方法

· vue自定义指令及其应用场景有哪些

· 【Echarts】tooltip自定义提示框

· echarts自定义tooltip提示框内容

· echarts 自定义提示

百索园前端

懂一点代码的程序员

Echarts自定义提示框案例

官方文档：#tooltip.formatter

两种方法，如 trigger: 'axis' 的情况下，均在 tooltip 节点下添加如下：

1. 模板字符串

2. 回调函数

搜索

随笔分类

CMS模板

后端开发

开发助手

前端开发

数据库

系统

组件库

	formatter: (params) => {
	let tip = '';
	// console.log('数据:', params);
	if (params && params.length > 0) {
	tip += params[0].name + '<br />';
	params.forEach(item => {
	tip += item.marker + item.seriesName + ' ' + (item.value ? item.value + 'kW' : '-') + '<br />';
	});
	}
	return tip;
	}