vue3 echarts设置默认选中区域缩放

vue3 echarts设置默认选中区域缩放

关键代码

		//开启默认选中区域缩放
		myChart.value.dispatchAction({
			type: 'takeGlobalCursor',
			key: 'dataZoomSelect',
			dataZoomSelectActive: true,
		});

全部代码

	const initTimeChart = (date: string[], data: number[] | null[]) => {
		// const date = [
		// 	'2024-12-01',
		// 	'2024-12-02',
		// 	'2024-12-03',
		// 	'2024-12-04',
		// 	'2024-12-05',
		// 	'2024-12-06',
		// 	'2024-12-07',
		// 	'2024-12-08',
		// 	'2024-12-09',
		// 	'2024-12-10',
		// 	'2024-12-11',
		// 	'2024-12-12',
		// 	'2024-12-13',
		// 	'2024-12-14',
		// 	'2024-12-15',
		// 	'2024-12-16',
		// 	'2024-12-17',
		// ];
		// const data = [100, 100, 100, null, null, 100, 100, 100, 100, 100, null, null, 100, 100, null, 100, 100];
		myChart.value = echarts.init(timeChartRef.value);

		const option = {
			tooltip: {
				trigger: 'axis',
				position: function (pt: any) {
					return [pt[0], '10%'];
				},
			},
			title: {
				left: 'center',
				text: '数据量',
			},
			toolbox: {
				feature: {
					dataZoom: {
						show: true,
						yAxisIndex: 'none',
						iconStyle: {
							//不需要图标可以设置隐藏按钮
							opacity: 1,
						},
					},
					// restore: {},
					// saveAsImage: {},
				},
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: date,
			},
			yAxis: {
				type: 'value',
				boundaryGap: [0, '100%'],
				max: 1,
				interval: 1,
				// 于设置y轴的字体
				axisLabel: {
					show: false, //这里的show用于设置是否显示y轴下的字体 默认为true
					textStyle: {
						//textStyle里面写y轴下的字体的样式
						color: '#333',
						fontSize: 13,
					},
				},
				//用于设置y轴的那一条线
				axisLine: {
					show: true, //这里的show用于设置是否显示y轴那一条线 默认为true
					lineStyle: {
						//lineStyle里面写y轴那一条线的样式
						color: '#ccc',
						width: 2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
					},
				},
			},
			dataZoom: [
				{
					type: 'inside',
					start: 0,
					end: 60,
				},
				{
					start: 0,
					end: 60,
				},
			],
			series: [
				{
					name: 'Fake Data',
					type: 'line',
					symbol: 'none',
					sampling: 'lttb',
					itemStyle: {
						color: 'rgb(255, 70, 131,0)',
					},
					areaStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: '#75aa4a',
							},
							{
								offset: 1,
								color: '#75aa4a',
							},
						]),
					},
					data: data,
				},
			],
		};

		myChart.value.setOption(option);
		updateTimeRange(myChart.value);

		// datazoom放大缩小编写
		const comp = myChart.value._model.getComponent('toolbox');
		const toolbox = myChart.value.getViewOfComponentModel(comp);
		const datazoom = toolbox._features.dataZoom;

		// 回退
		//datazoom.onclick(datazoom.ecModel,datazoom.api,'back');
		// 记录x的起始位置
		let x = -1;
		// 重写放大回调
		const onBrush = datazoom.constructor.prototype._onBrush;
		datazoom.constructor.prototype._onBrush = function (evt) {
			if (x === -1) {
				x = evt.areas[0].range[0];
			}

			if (evt.isEnd) {
				const zoomin = evt.areas[0].range[0] - x < 0;
				// 从右往左绘制返回放大前
				if (zoomin) {
					this._brushController.updateCovers([]); // 清除绘制区域
					this.onclick(this.ecModel, this.api, 'back');
				} else {
					onBrush.call(this, evt);
				}
				x = -1;
				updateTimeRange(myChart.value);
			} else {
				onBrush.call(this, evt);
			}
		};

		// 重写原型链方法后，需要重新创建datazoom对象。因为重写前创建的datazoom对象会执行原先的原型方法
		// 还原
		myChart.value._api.dispatchAction({
			type: 'restore',
			from: myChart.value.id,
			key: 'dataZoomSelect',
			dataZoomSelectActive: true,
		});
		//开启默认选中区域缩放
		myChart.value._api.dispatchAction({
			type: 'takeGlobalCursor',
			key: 'dataZoomSelect',
			dataZoomSelectActive: true,
		});
		// 拖动datazoom，更新时间
		myChart.value.on('datazoom', function (e: any) {
			updateTimeRange(myChart.value);
		});
	};
	// 根据图表时间轴范围更新时间筛选
	const updateTimeRange = (myChart: any) => {
		let startValue = myChart.getModel().option.dataZoom[0].startValue;
		let endValue = myChart.getModel().option.dataZoom[0].endValue;
		let start = myChart.getModel().option.xAxis[0].data[startValue]; //起始X轴
		let end = myChart.getModel().option.xAxis[0].data[endValue]; //结束X轴
		dataStartTime.value = start;
		dataEndTime.value = end;
	};