echarts如何切换缩放方向的同时,不还原缩放,x轴方向缩放切换成y轴方向缩放像这种,切换时不改变原本图表缩放位置
echarts自定义按钮如何控制高亮,自定义按钮点击常亮,再点击取消常亮
切换缩放方向但不还原缩放:
要实现echarts中切换x轴和y轴缩放方向时不还原缩放,可以通过修改echarts中的缩放参数来实现。
首先,可以使用 echarts.getZr() 方法获取 echarts 实例中的 zrender 对象,然后通过 zrHandler.on 方法监听鼠标滚轮事件,在事件处理函数中修改缩放方向参数 scale,将其设置为当前需要缩放的方向,同时禁止还原缩放:
let chart = echarts.init(document.getElementById('myChart'));
let zr = chart.getZr();
let scale = [1, 1]; // 初始缩放比例
let isXScale = true; // 初始缩放方向
// 监听鼠标滚轮事件
zr.handler.on('mousewheel', function (e) {
let delta = e.wheelDelta > 0 ? 1.2 : 1 / 1.2;
let point = zr.painter.getPoint(e.event);
let oldScale = scale.slice();
// 切换缩放方向
if (isXScale) {
scale[0] *= delta;
} else {
scale[1] *= delta;
}
// 禁止还原缩放
if (scale[0] < 1) {
scale[0] = 1;
}
if (scale[1] < 1) {
scale[1] = 1;
}
// 计算缩放中心点位置
let deltaX = (scale[0] - oldScale[0]) * (point[0] - zr.painter._width / 2);
let deltaY = (scale[1] - oldScale[1]) * (point[1] - zr.painter._height / 2);
// 设置缩放参数
chart.setOption({
series: {
id: 'mySeries',
scale: scale,
center: [null, null],
zoom: 1
},
graphic: {
id: 'myGraphic',
scale: scale,
position: [deltaX, deltaY]
}
});
// 阻止事件冒泡
e.event.preventDefault();
e.event.stopPropagation();
});
// 切换缩放方向
function toggleScale() {
isXScale = !isXScale;
}
其中,isXScale 表示当前缩放方向是否为 x 轴方向,初始值为 true;toggleScale() 函数用于切换缩放方向,可以将其绑定到按钮的点击事件上。
控制自定义按钮高亮状态:
要实现 echarts 中自定义按钮的高亮效果,可以通过在按钮的点击事件处理函数中,修改按钮的样式来实现。
首先,可以在 option 中定义一个 buttonHighlight 对象,用于保存按钮的高亮样式和状态:
let option = {
toolbox: {
feature: {
myButton: {
show: true,
title: 'My Button',
icon: 'path/to/icon',
onclick: function () {
//
// 切换按钮高亮状态
if (option.toolbox.feature.buttonHighlight.active) {
option.toolbox.feature.buttonHighlight.active = false;
option.toolbox.feature.buttonHighlight.iconStyle.opacity = 1;
} else {
option.toolbox.feature.buttonHighlight.active = true;
option.toolbox.feature.buttonHighlight.iconStyle.opacity = 0.5;
}
// 更新 echarts 实例
chart.setOption(option);
}
},
buttonHighlight: {
active: false,
iconStyle: {
opacity: 1
}
}
},
// 其他配置项
}
其中,buttonHighlight
对象包含两个属性:
active
表示按钮的高亮状态,初始值为 false
。iconStyle
对象保存按钮的样式,包括颜色、大小、透明度等。在按钮的点击事件处理函数中,首先判断当前按钮是否处于高亮状态,如果是,则将 active
属性设置为 false
,将按钮的透明度设置为 1
,否则将 active
属性设置为 true
,将按钮的透明度设置为 0.5
。
最后,通过调用 chart.setOption(option)
方法来更新 echarts 实例中的配置项,从而实现按钮高亮效果的切换。