echart图表渲染合并策略

目录

调用方式

notMerge

普通合并

规则

例子

替换合并

规则

例子

---

echarts渲染函数setOption

调用方式

chart.setOption(option, {
    notMerge: boolean;
    replaceMerge?: string | string[];
    lazyUpdate: boolean;
});

notMerge

false （默认）
如果为 true，表示所有组件都会被删除
如果为 false, 有replaceMerge选项时，这类组件会进行替换合并
如果为 false, 没有replaceMerge选项时，会进行普通合并 

replaceMerge

用户可以在这里指定一个或多个组件，如：xAxis, series，这些指定的组件会进行 "replaceMerge"

普通合并

规则

特点：只会增加不会删除

注：官方文档说“id”与“name”都可以作为区分标识，但我测试的时候发现“name”不行

1. 对 option 中每个有声明 id 的“组件描述”，寻找能匹配其 id 的已有的组件，找到的话则合并
2. 对剩余的“组件描述”，寻找还未执行过合并的已有组件，找到的话则合并（所以大家一定要写 id）
3. 在第二条的前提下，对还剩余的“组件描述”，创建新组件

例子

 初始化渲染

点击添加柱状图、点击添加折线图,并覆盖柱状图，结果显示一条折线图。这种现象是因为“销量1”与“销量3”的id一样，所以第二次的图表覆盖了第一次渲染的图表 -- 规则1

对于规则2 -- 如果“销量1”与“销量3”不写id，就符合规则2了

图1 

 点击添加柱状图、点击添加折线图，结果显示两个图表。这种现象是因为“销量1”与“销量2”的id不一样，所以两次setOption是两个不同的图表 -- 规则3

图2 

替换合并

规则

1. 对 option 中每个有声明 id 的“组件描述”，寻找能匹配其 id 的已有的组件，找到的话则合并
2. 删除其他没匹配到的已有组件 （被删除的地方可能会出现null）
3. 对剩余的“组件描述”，创建新组件

例子

在上述例子上增加下列代码

在图2 例子的基础上，“点击对柱状图进行合并,对折线图进行替换(删除)”，结果柱状图数据被更新 --规则1，折线图“销量2”消失，变为新的折线图“销量4” -- 规则3

图3 

如果没有{replaceMerge: ['series'] 选项，则图上会显示三个图表

 图4