Echarts多种tooltip展示，加标题、加单位

Echarts多种tooltip展示，加标题、加单位

问题
使用Echarts在一个图表中同时展示柱形图和折线图，柱形图是数据，直接展示；折线图是百分比，需要前端将接口返回的小数处理成百分数，所以要加百分符。数据量较大，每条单独展示，不放在一起展示。
解决
先处理接口数据，带“利率”的处理成折线图，不带的处理成柱形图。

let series= [];
for (let i = 0; i<data.length; i++) {
	if (data[i].name.indexOf('利率') == -1) {
		series.push({
			name: data[i].name,
			type: 'bar', // 柱形图
			stack: '总量',
			barWidth: 40,
			data: data[i].data
		})
	} else {
		let dataCopy = data[i].data.map((item, index)=> {
			if(item !== null) {
				return (parseFloat(item)*100).toFixed(2) // 小数处理成百分数
			} else {
				return '-'
			}
		});
		series.push({
			name: data[i].name,
			type: 'line', // 折线图
			yAxisIndex: 1,
			data: dataCopy
		})
	}
}

tooltip: {
	trigger: 'item', // 数据项图形触发
	formatter: (params) => {
		let templete = '';
		if (params.seriesType === 'line') {
			templete=(params.seriesName+'<br>'+params.data+'%')
		} else {
			templete=(params.seriesName+'<br>'+params.data)
		}
		return templete
	},
},

柱形图：

折线图：

其他tooltip示例
tooltip默认直接展示数据名称、图形颜色对应小圆点、x轴坐标名称和数据：

tooltip: {
	trigger: 'item', // 数据项图形触发
},

tooltip的formatter方法，自定义展示内容，Echarts官方文档中有详细说明

tooltip分别展示数据名称、换行、数据

tooltip: {
	trigger: 'item', // 数据项图形触发
	formatter: '{a0}<br/>{c0}',
},

tooltip的formatter方法展示单位，直接加在formatter方法中

tooltip: {
	trigger: 'item', // 数据项图形触发
	formatter: '{a0}<br/>{c0} 元',
},

tooltip使用axisPointer结合formatter同时展示多条数据：

tooltip: {
	trigger: 'axis', // 坐标轴触发
	axisPointer: {            // 坐标轴指示器，坐标轴触发有效
		type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	},
	formatter: (params)=> {
		let templete = '';
		for (let i = 0 ; i<params.length; i++) {
			let item=params[i];
			if (item.seriesType === 'line') {
				templete+=(item.seriesName+`: `+item.data+'%')+'<br>'
			} else {
				templete+=(item.seriesName+`: `+item.data)+'<br>'
			}
		}
		return templete
	},
},

参考文章

https://echarts.apache.org/zh/option.html#tooltip
（Echarts官方文档，功能介绍很详细，具体怎么用需要自己分析）

https://segmentfault.com/a/1190000012246231
（大佬写挺好但我没用明白sorry，最后还是自己瞎搞出来的）