echarts 提示框设置自定义样式

echarts中遇到的需要自定义的提示框样式，大致样式是这样，我们需要使用echarts中的属性和自定义的html元素共同实现
带颜色的方块在formatter的函数里边使用自定义html实现，提示框样式在属性中实现

• 上代码：

tooltip: {
	borderWidth: 1, //边框宽度设置1
	padding: 16,
	backgroundColor: '#041E4FFF', //背景颜色，比自定义的html元素优先级高
	axisPointer: {
		type: 'shadow',
		crossStyle: {
			color: '#fff'
		}
	},
	extraCssText: 'box-shadow: 0 0 0.1rem rgba(0,120,234,0.8)', //提示框阴影样式
	textStyle: { //展示的文字的样式，优先级比自定义的html元素高
		color: '#fff',
		fontSize: '20',
		fontFamily: 'SourceHanSansCN-Normal'
	},
	formatter: function (params) {
		if (params.data.showName && params.data.showName.length > 0) {
		//这个位置可以根据自己的需求自定义html元素样式
			return '
 ' + `${params.data.name}` + '
正常设备数：' + params.data.showName[0].normal + '
异常设备数：' + params.data.showName[0].error + '
离线设备数：' + params.data.showName[0].offline + '

基本信息：
' + '
位置：' + params.data.showName[1] + '
';
} else {
return params.data.name + '
无相关数据';
}
}
},