echarts雷达图tooltip配置：展示多行数据并加上单位

---

前言

在开发Echarts雷达图过程中需要tooltip展示所有的维度的数据，并且在数据之后加上自定义的单位。废话不多说，直接上解决方案。

---

一、问题描述

雷达图默认的tooltip配置是会显示如下效果，现在需要在tooltip的值后面加上单位：分。（数据从后台获取）

二、解决方案

通过formatter格式化tooltip

从后台获取到数据warningDetailData之后,对原有的radarOption-基础option配置进行修改。
measureDimensionName是后台传来的维度类型数据。
tips：
1、如果不知道params里面包含哪些参数，先用console.log(params)打印出来，然后根据你的需求拼接所需的参数。
2、如果你需要的参数param里面没有，可以使用自定义的参数：let typeList = _this.warningDetailData，然后拼接到tooltip中。
参考代码如下：

// 处理tooltip
let _this = this
_this.radarOption.tooltip = {
	confine: true,
	trigger: 'item',
	formatter: function (params) {
	let relVal = params.name;
	let typeList = _this.warningDetailData
	for (let i = 0; i < params.data.value.length; i++) {
    relVal += '<br/>' + typeList[i]['measureDimensionName'] + ' : '
                                + params.data.value[i] + ' ' + '分';
			}
	 return relVal;
		}
}

将tooltip限制在图表区域内

避免tooltip移到div边缘的时候，tooltip被遮挡/隐藏

tooltip: {
	confine: true,
},

实现效果

---

总结

本文主要简述了echarts雷达图tooltip如何展示多行数据并加上单位。
1、通过formatter格式化tooltip，tooltip所需的参数params中若没有可以使用自定义参数拼接。
2、解决了tooltip移到div边缘的时候，tooltip被遮挡/隐藏的问题。
若描述有误，请指正。以上