La fonction de zoom de l'attribut dataZoom d'echart ne fonctionne pas lorsque uniapp développe des applets WeChat ! enregistrement de bug !

Cette bibliothèque echart est utilisée dans ce projet

L'élément de configuration dataZoom a été ajouté au projet mais il n'a pas pris effet. Soudain, j'ai pensé à la taille limite du code de l'applet WeChat. Le précédent echarts.js a été personnalisé et le composant dataZoom n'a peut-être pas été ajouté. Par conséquent, re-personnalisez echarts.js. La version d'Echarts que j'utilisais auparavant était la 5.0.0. Cette fois, j'ai également personnalisé la même version, mais une erreur a été signalée. À en juger par l'expérience précédente, il peut s'agir d'un problème de version, j'ai donc amélioré une version. Alors cela prendra effet ! ! ! Dernière version effective 5.1.0.

Si une erreur est signalée :

Signaler que t.addEventListener n'est pas une fonction, supprimez t.addEventListener(e,n,i);

Il est rapporté que t.preventDefault n'est pas une fonction. J'ai temporairement supprimé l'instruction d'exécution de fonction dans t.preventDefault, puis je peux la faire glisser, mais je n'ai pas essayé de zoomer.

 

Voici le code de l'option

let option = {
					grid: { //调整图与容器周围的间距
						top: '14%',
						left: '12%', //默认10%
						right: '16%', //默认10%
						// bottom: '8%', //默认60
						containLabel: true
						//grid区域是否包含坐标轴的刻度标签
					},
					xAxis: {
						name: "日期", //x轴的单位
						type: 'category',
						// interval: 2, // 设置间距为2，表示每隔一个刻度显示一个刻度
						// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						data: this.xData,
						axisTick: {
							alignWithLabel: true,
							interval: 0,
						},
						axisLabel: {
							interval: 0,
							rotate: that.totalData.title === '微策' ? 0 : 20,
							textStyle: {
								color: '#667286',
							},
							// formatter: '{M}-{d}\n{HH}-{mm}'
							// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
							formatter: function(value, index) {
								let label = value;
								if (that.totalData.title === '硅基') {
									label = `${label.slice(11, 19)}`
								} else if (that.totalData.title === '微策') {
									label = `${label.slice(5, 10)}\n${label.slice(11, 16)}`
								} else {
									label = `${label.slice(5, 10)}`
								}
								return label;
							}
						},

					},
					yAxis: {
						type: 'value',
						name: a[this.totalData.title], //y轴的单位
						axisLabel: {
							textStyle: {
								color: '#667286',
							},
							// 	formatter: '{value} KG',//y轴每一个刻度加单位
						},
					},
					dataZoom: [{
						type: 'inside',
						// show:this.dataZoomEnd===100?false:true,//当标签100%显示时候不显示滑块 type=slider时使用
						start: 0,
						end: this.dataZoomEnd,
					}],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
							lineStyle: {
								// type: 'solid',//鼠标移入的基准线实线
								color: '#53cdef',
							},
						},
						// formatter: "日期 ：{b0}\<br\/\>{a0} : {c0}KG \<br\/\>",
					},
					series: [{
						// showSymbol: false,//隐藏折线拐点，只有鼠标移入时候显示
						name: b[this.totalData.title],
						data: this.yData,
						// data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						smooth: true,
						itemStyle: { //折线拐点标志的样式
							normal: {
								color: '#00875A',
							}
						},
						// label:{
						//   show: true,
						//   position: 'bottom',
						//   textStyle: {
						//     fontSize: 20
						//   }
						// },
						lineStyle: {
							normal: {
								color: '#00875A',
								width: 2,
							}
						},
						areaStyle: {
							opacity: 0.8,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#00875A'
								},
								{
									offset: 1,
									color: '#FFFFFF'
								}
							])
						},
					}]
				};