Vue+Echarts实例_自定义tooltip、dataView_echart 自定义tooltip 数据undefined-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40601005/article/details/115479149

本文介绍了如何处理ECharts图表中数据为null、undefined或0时的tooltip显示问题，以及如何自定义dataView，提供了一种具体案例。通过数据预处理去除重复和无效数据，然后按照ECharts所需格式转换数据。对于tooltip，分别展示了处理dataset不同数据结构的自定义formatter，过滤掉undefined或0值。同时，详细说明了dataView的optionToContent和contentToOption方法，以生成清晰易读的表格展示。最后给出了相应的CSS样式以美化提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用echarts视图工具的时候，想必很多人都遇到过，某一条数据为null、undefined或者为0的时候，这时的tooltip就会出现以下（左下图）情况，看起来既不美观，也为繁琐，这时候就要对这种数据进行筛选处理；还有就是对dataView的处理，echarts自带的dataView显示如下（右下图），对人的眼力着实是一种考验。

以下我就根据一个具体案例，来详细介绍对tooltip和dataView的自定义处理。

效果图如下：

这个就是我对tooltip和dataView的处理。下面开始详细讲解。

下面是原始数据和处理后的数据：

因为是保密数据，这里就不贴了，直接截图。（左图原始数据）、（右图处理后的数据）

下面就是对数据的处理：

（1）对部门数据进行去重处理。

                //this.showDept = ['部门a','部门b','部门c','部门d']
                let chartsData = {
					datasetData: {}, //datasetData,
					seriesData: [], //series
					noShowLegend: {}, //需要隐藏的legend;
					showLegend: [], //需要显示的legend
				};
				// 获取部门数据
				let depts = new Set();
				let deptList = []; //去重后的部门
				data.forEach(x => depts.add(x.deptName));
				deptList = [...depts];
				console.log(deptList);
				// 隐藏不显示的其他的部门
				let obj = {};
				this.showDept.forEach(item => obj[`${item}`] = true);
				deptList.forEach(item => {
					if (!obj[item]) {
						chartsData.noShowLegend[item] = false;
						chartsData.showLegend.push(item);
					} else {
						chartsData.showLegend.unshift(item);
					}
				});

（2）按年份归类，排序。

                // 按年份归类，排序
				let map = {};
				let scorceData = []; //归类的数据
				for (let j = 0; j < data.length; j++) {
					var arr = data[j];
					if (!map[arr.year]) {
						scorceData.push({
							year: arr.year,
							data: [arr]
						});
						map[arr.year] = arr;
					} else {
						for (let k = 0; k < scorceData.length; k++) {
							var dj = scorceData[k];
							if (dj.year == arr.year) {
								dj.data.push(arr);
								break;
							}
						}
					}
				}
				//排序
				scorceData.sort((x, y) => {
					return x.year - y.year
				});
				// console.log(scorceData);

（3）按照echarts需要的结构处理。

                let dataSet = [];
				for (let n = 0; n < scorceData.length; n++) {
					let proMap = {}
					let pro = {}
					for (var m = 0; m < scorceData[n].data.length; m++) {
						proMap[scorceData[n].data[m].deptName] = scorceData[n].data[m].count
					}
					pro.product = scorceData[n].year;
					dataSet.push(Object.assign(pro, proMap));
				}
				// console.log(dataSet);
				let dimensions = [].concat(deptList);
				dimensions.unshift('product');
				// console.log(dimensions);
				chartsData.datasetData.dimensions = dimensions;
				chartsData.datasetData.source = dataSet;

				for (let h = 0; h < deptList.length; h++) {
					chartsData.seriesData.push({
						type: 'bar',
						barMaxWidth: 30
					});
				}
				// console.log(chartsData);

下面是对tooltip和dataView的自定义处理：

（1）自定义tooltip

①数据结构为 dataset{dimensionNames:[],source:[]} 的数据。

                        // 过滤为undefined的数据
						formatter: (params) => {
							// 数据结构为dataset{dimensionNames:[],source:[]}
							let showText = '<span style="font-size:16px;font-weight: bold">' + params[0].name +
								'</span></br><hr color="#c7c7c7" size="1">';
							for (var i = 0; i < params.length; i++) {
								if (params[i].value[params[i].dimensionNames[params[i].encode.y[0]]] !=
									undefined) {
									let dotHtml =
										'<div class="paramsDiv"><span class="paramsDot" style="background-color:' +
										params[i].color + '"></span>';
									showText += dotHtml + "<span class='paramsName'>" + params[i].seriesName +
										"</span><span class='paramsValue'>" +
										params[i].value[params[i].dimensionNames[params[i].encode.y[0]]] +
										"个</span></br></div>";
								}
							}
							return showText;
						}

②数据结构为 dataset{source:[]} 的数据。

                        // 过滤为 0 的数据
						formatter: (params) => {
							// 数据结构为dataset{source:[]}
							let showText = '<span style="font-size:16px;font-weight: bold">' + params[0].name +
								'</span></br><hr color="#c7c7c7" size="1">';
							for (var i = 0; i < params.length; i++) {
								if (params[i].value[params[i].encode.y[0]] > 0) {
									let dotHtml =
										'<div class="paramsDiv"><span class="paramsDot" style="background-color:' +
										params[i].color + '"></span>';
									showText += dotHtml + "<span class='paramsName'>" + params[i].seriesName +
										"</span><span class='paramsValue'>" +
										params[i].value[params[i].encode.y[0]] + "</span></br></div>";
								}
							}
							return showText;
						}

.paramsDiv {
		line-height: 1;
		margin-top: 10px;
	}

	.paramsDot {
		display: inline-block;
		margin-right: 5px;
		border-radius: 10px;
		width: 10px;
		height: 10px;
	}

	.paramsName {
		font-size: 14px;
		color: #666;
		font-weight: 400;
		margin-left: 2px
	}

	.paramsValue {
		float: right;
		margin-left: 20px;
		font-size: 14px;
		color: #666;
		font-weight: 900
	}

（2）自定义dataView

①数据结构为 dataset{dimensionNames:[],source:[]} 的数据。

                    dataView: {
								show: true,
								readOnly: false,
								optionToContent: function(opt) {
									var axisData = opt.legend[0].data;
									var series = opt.dataset[0].source;
									var table =
										'<table class="viewTable" style="width:100%;text-align:center"><tbody><tr>' +
										'<td>/</td>';
									var tr1 = '';
									axisData.map((data) => {
										tr1 += '<td>' + data + '</td>';
									})
									table += tr1 + '</tr>';
									for (var i = 0, l = series.length; i < l; i++) {
										let tr2 = '';
										axisData.forEach((v) => {
											tr2 += '<td>' + (series[i][v] == undefined ? '0' : series[i][
													v
												]) +
												'</td>';
										})
										table += '<tr>' +
											'<td>' + series[i]['product'] + '</td>' + tr2 + '</tr>';
									}
									table += '</tbody></table>';
									return table;
								},
								contentToOption: function(HTMLDomElement, opt) {
									return opt;
								},
							},

②数据结构为 dataset{source:[]} 的数据。

                    dataView: {
								show: true,
								readOnly: false,
								optionToContent: function(opt) {
									let series = opt.dataset[0].source;
									let table =
										'<table class="viewTable" style="width:100%;text-align:center"><tbody><tr>' +
										'<td>/</td>';
									let tr1 = '';
									series[0].slice(1).map((m) => {
										tr1 += '<td>' + m + '</td>';
									});
									table += tr1 + '</tr>';
									for (var i = 1, l = series.length; i < l; i++) {
										let tr2 = '<tr>';
										series[i].forEach((v) => {
											tr2 += '<td>' + (v == undefined ? '0' : v) +
												'</td>';
										})
										table += tr2 + '</tr>';
									}
									return table;
								},
							},

.viewTable {
		width: 100%;
		text-align: center;
		border-top: 1px solid #999;
		border-left: 1px solid #999;
		border-spacing: 0;
	}

	.viewTable td {
		padding: 3px;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
	}

好了，以上就是我介绍的如何处理自定义tooltip和dataView方法，若内容、代码有不妥的地方，望斧正！谢谢。