Echarts开发随笔

一 解决 echarts 使用setOption重新配置时不清除之前的配置项

问题描述：

如果我们在初始化option之后，然后第一次从接口获取数据渲染结束，然后二次在根据别的条件触发二次请求然后在重新进行渲染，组装series的值，直接使用setOption重新配置，以前的配置项会重复合并，造成显示错误。

---

对应属性

• notMerge 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。
• replaceMerge 可选。用户可以在这里指定一个或多个组件，如：xAxis, series，这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件，也可使用 "replaceMerge"。
• lazyUpdate 可选。在设置完 option 后是否不立即更新图表，默认为 false，即同步立即更新。如果为 true，则会在下一个 animation frame 中，才更新图表。
• silent 可选。阻止调用 setOption 时抛出事件，默认为 false，即抛出事件。

二 解决问题：

• 在重新进行渲染的时候，我们需要对原先数据进行更替，即所有组件都要删除，根据新的option选项进行新的创建
• 属性设置：{notMerge:true} 在进行setOption进行数据初始化的时候第二个参数加进去

解决echarts点击事件多次触发的问题

问题描述:

当我们对柱状图或者对应别的类型图进行点击事件操作时，我们发现事件会重复执行，即事件内对应逻辑会触发两次，尤其是配合series数据重新组装的时候，我们要匹配对应下标对应的数据，如果合并可能两次会对应两次下标，获取的数据可能不是期望的数据。

解决问题：

• 在每次数据进行注册前，进行一次注销

       number_charts.off('click');
       number_charts.on('click',function(params) {
          window.open(jobNumberOption.series[params.seriesIndex].label);
      });

    // params获取的类似series中的数据，根据对应的seriesIndex可以获取到对应小标的数据然后可以获取对应的详细属性

三 去除series中为0或者undefined的选项

问题描述：

当我们组装数据的时候，需要展示所有数据的不同x轴条件的所有数据，举个例子，我们需要展示不同时间对应使用某一款产品的人数，在柱状图中我们组装的data数据中可能有的产品在有的天数数据是0或者我们为了凑数据格式而加的undefined数据，在tooltip展示时候，我们希望展示的是有效数据，需要过滤无用数据

解决问题：

    tooltip: {
      trigger: 'axis',
      confine: true,
      enterable: true,
      formatter: function (params) {
        var res = `${params[0].name} 
`
        for (const item of params) {
          if (item.value !== undefined) {
            res += ` ${item.seriesName} ：${item.value}
`
          }
        }
        return res
      }
    },