Problem Description
echarts项目中遇到的tooltip提示框问题部分总结：
tooltip提示框修改背景颜色、修改文本单位、修改提示框的大小等等，以及如何自定义样式修改形状
Project Scenario ①:
Override text units in tooltips
In order to enable the format triggered by the tooltip prompt box of echarts, use the valueFormatter callback function to follow the custom format
//改成ml
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
//改成摄氏度
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},Project scenario ②:
Rewrite the style in the prompt box
The tooltip style of echarts needs the official website api attribute, paste the commonly used
tooltip: {
axisPointer: {
type: "line", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
},
showContent: true, // 是否显示提示框浮层，默认显示
alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
confine: true, // 是否将 tooltip 框限制在图表的区域内
backgroundColor: "rgba(0,0,0,0)", // 提示框浮层的背景颜色
padding: 15, // 提示框浮层内边距，单位px
position: "left",
textStyle: {
color: "#78EC4E", // 文字的颜色
fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
},
},Project scenario ③:
Customize the style in the prompt box
In order to make the tooltip of echarts rewrite the style, we have to mention the formatter function
formatter: function (params) {
// console.log(params); //params是echarts的属性
let res = ""; //变量一个res
res = params.data; //res等于params下的数据
//return回调一个模板字符串，自定义提示框的形状
return `
<div class="chartTooltip">
<span class="dotTooltip"><p class="textTooltip">${res}</p>
</span>
</div>
`;
},.chartTooltip{
background:#78EC4E;
display:inline-block;
// margin-right:5px;
border-radius:10px;
width:10px;
height:10px;
}
.dotTooltip{
display:inline-block;
background:#78EC4E;
width:2px;
height:25px;
position:absolute;
top: 15px;
left: 9px;
right: 0;
bottom: 0;
}
.textTooltip{
color:#78EC4E ;
position:absolute;
top: -45px;
left: -25px;
right: 0px;
bottom:0px;
}The author's previous article,