一 解决 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} <br/>`
for (const item of params) {
if (item.value !== undefined) {
res += `<span style="background: ${item.color}; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${item.seriesName} :${item.value}<br/>`
}
}
return res
}
},