vue3 echarts使用datazoom,鼠标绘制实现放大与缩小（还原）
echarts的datazoom提供了绘制放大的功能，但通过鼠标绘制只能进行放大
应需求放大与还原都通过鼠标行为实现，增加从右往左绘制时还原放大结果
放大与缩小
关键代码
// 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 myChart = ref();
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;
};