Echarts支持基于轴线缩放的,在slider模式中应用的很成熟,但体验和样式并不能得到来自设计和产品的认可,他们想要的样式和功能是长这样的
那就需要大量自定义的功能,首先你的在toolbox.feature里自定义x轴y轴以及还原功能icon
这些图标可以自行去iconfont上面找,我是直接下载为png格式,存到项目的文件夹中,再引入到组件中的方式
markdown
toolbox: {
feature: {
myXAxisX: {
show: true,
title: '',
icon: computed(() => {
return 'image://' + xIcon_default;
}),
onclick: function (val) {
console.log('点击x轴缩放');
});
},
},
其中xIcon_default的引入 import xIcon_default from '@/assets/images/zuoyoujiantou.png';
同理,y轴和还原icon也参照这样的设置方式 这里还需要设置dataZoom,既然是只允许某一个轴线的缩放,比如是基于x轴缩放,而y轴不允许缩放
markdown
dataZoom: [
{
type: 'inside',
xAxisIndex: 0,
filterMode: 'none',
start: 0,
end: 100,
},
{
type: 'inside',
yAxisIndex: 'none',
filterMode: 'none',
start: 0,
end: 100,
},
],
缩放的状态你需要去记录下来
csharp
myChart.on('dataZoom', function (params) {
const { batch } = params;
console.log(batch)
});
获取的batch对应start和end存到dataZoom对应的轴线的start和end中 x轴是dataZoom[0] y 轴是dataZoom[1], 到了这一步如果不切换的情况下,x轴的缩放是没问题的了,那么切换到y轴呢 要把dataZoom[0].xAxisIndex改为none dataZoom[1].yAxisIndex改为0 这样就可以实现y轴的缩放了,但会有一个问题,就是x轴缩放的状态,在切换到y轴时并不能保持,就需要手动去设置,把x轴缩放的状态batch值的start和end赋值给xAxis.max和xAxis.min 这样就可以实现切换轴线缩放,状态的无缝衔接了