uniapp 使用uchart组件，自定义提示窗ToolTip中的内容（tooltip提示窗format）数据量较大，放大点击区域

效果如图：

提示窗ToolTip中内容模板： xx浓度：xx ppm 数字量：xx mv

蓝色折线图提示窗内容很好展示，关键是红色点内容不太好展示。

首先：
1.在template中定义使用官方文档中的：tooltip提示窗format属性

2. 同样的需要在源码中进行修改，找到 config-charts.js文件 中的 formatter
3. 添加tooltipTemp1方法

这里边比较复杂的是，数据比较多，蓝色折线有9000多的数据点，红色部分有7个数据点，浓度展示是只有红色点部分才会有浓度（效果图图一），蓝色部分只需要展示数字量（效果图图二），因为是手机端，数据量较大，红色点部分比较小，很难点住对应的点，弹窗内容正确显示

所以在方法里做了一个放大区域处理 代码如下

const dot = opts.series[1].newArray.find(r => index > r.index - 70 && index< r.index + 70)

完整代码如下：
template：

<qiun-data-charts style="flex: 1;" 
			   type="tline" 
			   :opts="opts" 
			   :eopts="{seriesTemplate:{smooth:true}}"
			   background="#ffffff" 
			   :chartData="ptData" 
			   tooltipFormat="tooltipTemp1" 
			/>

data中定义相关数据，初始化：

ptData: {
					"categories": [],
					"series": [{
							"name": "气体浓度",
							"data": [],
							// 'textSize': 0.1,
						},
						{
							"data": [],
							name: '点',
							color: "#f04864",
							newArray: [],
							'textSize': 8,
						}
					],
				},

opts: {
					extra: {
						line: {
							type: 'straight',
							width: 1
						},
					},
					legend: {
						show: false
					},
					dataPointShape: false,
					xAxis: {
						disableGrid: true,
						labelCount: 8,
					},
					yAxis: {
						disabled: false,
						showTitle: true,
						data: [{
							min: 0,
							max: 300,
							position: "left",
							title: "μV",
						}]
					},
					rotate: false,
			},

methods方法中：

// 谱图数据
			getDiagnosiSpectrogram() {
				const params = {
					id: this.id
				};
				EquipmentService.getDiagnosiSpectrogram(params).then((res) => {
					if (res.code == 10000) {
						const dots = res.results.dots.map(item => {
							return item.peakPointTime
						})
						const series0 = []
						const seconds = []
						res.results.datas.forEach((r2, index) => {
							const find = res.results.dots.find(r => r.peakPointTime === index)
							if (find) {
								series0.push({
									value: r2,
									...find
								})
								seconds.push({
									value: r2 + ""
								})
							} else {
								series0.push({
									value: r2
								})
								seconds.push(null)
							}
                       })
						this.ptData.series[0].data = series0;
						this.opts.yAxis.data[0].max = res.results.yMax;
						this.opts.yAxis.data[0].title = res.results.yUnit;
						this.ptData.series[1].data = seconds

						this.ptData.categories = res.results.datas;
						this.ptData.series[1].newArray = res.results.dots.map(item => {
							return {
								name: item.componentName + '(' + item.peakHeight + ')',
								nd: item.componentName,
								ndValue: item.peakHeight,
								index: item.peakPointTime
							}
						});

						this.ptData.series[0].format = "seriesDemo2"
						this.ptData.series[1].format = "seriesDemo1"
					}
				});
			},

config-charts.js文件中的方法：

//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
	"formatter": {
	"tooltipTemp1": function(item, category, index, opts) {
		console.log(item, 'item')
		console.log(category, 'category')
		console.log(opts, 'opts')
		const dot = opts.series[1].newArray.find(r => index > r.index - 70 && index< r.index + 70)
		if (dot) {
			return `${dot.nd}浓度:${dot.ndValue}ppm 数字量:${category}mv`
		} else {
			return ` 数字量:${category}mv`
		}
	}

接口返回数据格式：
datas：蓝色折线数据（9000个数据点）
dots：红色点数据（7个数据点）