vue中修改echarts中tooltip的样式

echarts中的tooltip是提示框组件，正常展示如下：

代码如下：

tooltip: {
		show: true,
		trigger: 'axis',
		formatter(value) {
			const s = value.map(item => {
				return item.value !== null ? `${item.seriesName}：${maxDecimalPlaces({value: item.value})}吨` : '';
			});
			return `${value[0].axisValue}<br/>${s.join('<br />')}`;
		}
	},

此时若想修改tooitip中的样式，可在formatter中使用模板字符串加入css样式，如下：

formatter(value) {
			const s = value.map(item => {
				return item.value !== null ? `${item.seriesName}：<span style="color: #ffeb3b ;">${maxDecimalPlaces({value: item.value})}吨</span>` : '';
			});
			return `${value[0].axisValue}<br/>${s.join('<br />')}`;
		},

样式可根据自己的需求自己定义，最终效果如下：

 

其他比如背景颜色，内容的位置，文字的默认样式均可以修改，完整代码如下：

tooltip: {
		show: true,
		trigger: 'axis',
		formatter(value) {
			const s = value.map(item => {
				return item.value !== null ? `${item.seriesName}：<span style="color: #ffeb3b ;">${maxDecimalPlaces({value: item.value})}吨</span>` : '';
			});
			return `${value[0].axisValue}<br/>${s.join('<br />')}`;
		},
		backgroundColor: '#054e68',
		padding: [13, 14, 13, 11],
		textStyle: {
			fontSize: 12,
			color: '#9ED2D8'
		}
	},

希望对你有帮助

以上