echats的常见问题及其解决方案

echarts简介

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
ECharts官网链接:https://echarts.apache.org/zh/index.html
下面我在解答问题时不会仅仅只给出解答方案,顺便也会提到一些相关的解决思路。

问题1:禁掉echarts中legend的默认行为并使用自定义行为

首先我们知道其默认行为是由切换图例所产生的,所以在这里与其直接相关的事件就是legendselectchanged ,具体详情可以参看echarts的事件部分。
所以如果我们想禁止掉其默认行为甚至想要自定义自己的行为,那么就得从此事件着手。
解决代码如下:

this.echartsInstance.on('legendselectchanged', this.legendSelectChangedHandler);
private legendSelectChangedHandler = (e: any) => {
    this.suppressSelection(this.echartsInstance, e);
    this.selectHandler(e);
  }
private suppressSelection(chart: echarts.ECharts, params: any) {
    chart.setOption({ animation: false });
    chart.dispatchAction({
      type: 'legendSelect',
      name: params.name
    });
    chart.setOption({ animation: true });
  }

下面我解释一下上述代码,首先是给echarts实例绑定legendselectchanged事件,然后在绑定的事件中做了两件事,分别是禁止掉原生的行为然后执行自定义的行为。
为何函数suppressSelection短短三句代码就能够禁掉其默认行为?
首先,animation: false表示关系echarts的所有动画效果,详情可以参看echarts的配置项部分。所谓关闭动画其实就是没有中间过程只有结果,而其第二句代码表示再次触发的当前元素的选择事件,一来一回,又由于关闭了动画效果所以在外面看来是没有任何变化,最后再开启动画效果继续执行我们自定义的行为。
这种骚操作其实就是完全可以看成障眼法,但是确实实现了禁掉默认行为的效果。
如果只是仅仅想要禁掉legend的默认行为那么还有一种更为简便的方式。
在echarts的setOption里面新增配置如下的一行代码:

legend: {
        selectedMode:false,
    },

问题2:echarts的click事件作用范围

首先,echarts默认绑定的click事件只对其配置的series有效,而对xAxis以及legend等配置项默认是没有效果的。
对于xAxis和yAxis配置项可以通过给其新增配置以下一行简单代码即可让其相应默认绑定的鼠标click事件。

xAxis: {
        triggerEvent: true,
      },
yAxis: {
        triggerEvent: true,
      },

但是如果是对于类似legend等默认没有此等功能的配置项,那么最有效的一个解决办法就是给全局document绑定一个click事件,然后根据自己所需结合echarts所提供的功能在document的click事件里实现自己想要做的行为。
注意:click事件只是echarts鼠标事件的一个代表事件,其相关的其它鼠标事件也有此作用范围的问题,大家可以参考此思路进行对症下药。

结语

目前,我才刚开始接触echarts,所以遇到的一些常见问题还并不多,随着继续使用和学习,后面遇到的一些与echarts相关的问题会继续在此篇博客中进行更新。如果大家有遇到什么有关echarts相关的常见问题,欢迎评论区留言,我也会积极参与讨论。

猜你喜欢

转载自blog.csdn.net/asd0356/article/details/108165815