uniapp 微信小程序 Echarts formatter回调无效

echarts yekong 106℃

微信小程序开发遇到的问题

uniapp微信小程序使用Echarts的方法

uniapp微信小程序使用Echarts是通过以下方式引用的。

uniapp 微信小程序 使用Echarts

问题

要求点击柱状图,物料统计详情不显示物料为0的数据,也就是说,如果条数很多,但是如果数据值为0那么就不显示对应数据,这就需要tooltip以回调的方式进行自定义处理了。但是在数据中无论怎么传值就是无效。排查了一天的时间终于知道原因了。
要求点击柱状图,物料统计详情不显示物料为0的数据

解决办法

单独复制一份组件出来,针对性修改。
因为以data方式传值会被过滤掉,所以我们在setOption前,再进行回调就可以了。
wanjunshijiecom20220701brgYWJ

async initChart(option) {
				// #ifdef MP-WEIXIN || MP-TOUTIAO 
				const canvasAttr = await this.getCanvasAttr2d();
				// #endif
				// #ifndef MP-WEIXIN || MP-TOUTIAO
				const canvasAttr = await this.getCanvasAttr();
				// #endif
				const {
					canvas,
					canvasWidth,
					canvasHeight,
					canvasDpr
				} = canvasAttr
				chartList[this.canvasId] = echarts.init(canvas, null, {
					width: canvasWidth,
					height: canvasHeight,
					devicePixelRatio: canvasDpr // new
				});
				canvas.setChart(chartList[this.canvasId]);
				console.log(option)
				console.log(this.option)
				console.log('ecoptions')
				option.tooltip.renderMode = 'richText'
				option.tooltip.formatter = function(params) {
					let str = params[0].name + "\n";
					params.forEach((item, index) => {
						if (item.data > 0) {
							str += item.marker + item.seriesName + " : " + item.data + "\n";
						}
					});
					str = _.trimEnd(str, '\n');
					return str;
				}
				chartList[this.canvasId].setOption(option ? option : this.option);
			},

其他问题相关

Echarts tooltip formatter自定义携带圆点

喜欢 (0)