福州网站建设外贸名词解释seo
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轴下的字体 默认为truetextStyle: {//textStyle里面写y轴下的字体的样式color: '#333',fontSize: 13,},},//用于设置y轴的那一条线axisLine: {show: true, //这里的show用于设置是否显示y轴那一条线 默认为truelineStyle: {//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;};