效果如图:

提示窗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个数据点)
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐