echartsInstance. setOption 被忽略的配置项 notMerge —— Echarts小记

官方说明

(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
or
(option: Object, opts?: {
    notMerge?: boolean;
    replaceMerge?: string | string[];
    lazyUpdate?: boolean;
})

设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成。

在实际应用中一般很少会用到notMerge的配置，官方文档中的说明如下：

notMerge: boolean 可选。

是否不跟之前设置的 option 进行合并。默认为false。即表示合并。合并的规则，详见组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。

那么一般在什么情况下使用这个属性呢？在文档说明中需要特别注意是针对组件合并模式中NORMAL_MERGE的说明：

• 对于一种类型的组件（类型指，“component main type”，如：xAxis, series），新来的 option 中的每个“组件描述”（如：{type: 'xAxis', id: 'xx', name: 'kk', ...}）会被尽量合并到已存在的组件中。剩余的情况，会在组件列表尾部创建新的组件。整体规则细节如下：

  • 先依次对 option 中每个有声明 id 或者 name 的“组件描述”，寻找能匹配其id或者name
    的已有的组件，找到的话则合并。
  • 再依次对 option 中剩余的“组件描述”，寻找还未执行过前一条的已有组件，找到的话则合并。
  • 其他option中剩余的“组件描述”，用于在组件列表尾部创建新组件。

• 特点：

  • 永远不会删除已存在的组件。也就是说，只支持增加，或者更新组件。
  • “component index” 永远不会改变。
  • 如果 id 和 name 没有在 option 中被指定（这是经常出现的情况），组件会按照它在 option 中的顺序一一合并到已有组件中。这种设定比较符合直觉。

代码示例

先上demo代码（此处以Vue为基础）：

notMerge为默认的效果

<template>
    <div class="echarts-demo">
        <div id="DemoChart"></div>
        <div @click="addData">增加十条随机数据</div>
    </div>
</template>

<script>
const ScatterSimpleData = [
    [10.0, 8.04],
    [8.07, 6.95],
    [13.0, 7.58],
    [9.05, 8.81],
    [11.0, 8.33],
    [14.0, 7.66],
    [13.4, 6.81],
    [10.0, 6.33],
    [14.0, 8.96],
    [12.5, 6.82],
];
const echarts = require('echarts');

let $demoChart = null;
const random2Fixed = (max, min) => {
    return (Math.random() * (max - min) + min).toFixed(2);
}
const randomInt = (max, min) => {
    return Math.round(random2Fixed(max, min))
}
export default {
    name: "EchartsDemo",
    data() {
        return {
            demoChart: null,
            chartData: [],
        }
    },
    mounted() {
        this.chartData = ScatterSimpleData;
        $demoChart = document.getElementById('DemoChart');
        this.demoChart = echarts.init($demoChart);
        this.demoChart.setOption({
            xAxis: {},
            yAxis: {},
            series: [{
                id: 1, // 重点注意此处，和addData进行的对比
                name: 'series1', // 重点注意此处，和addData进行的对比
                symbolSize: 20,
                data: this.chartData,
                type: 'scatter'
            }]
        })
    },
    methods: {
        addData() {
            let temp = ScatterSimpleData.filter((item, idx) => idx >= 5);
            this.chartData = temp.concat(new Array(5).fill('').map(() => {
                return [random2Fixed(15, 5), random2Fixed(15, 5)];
            }))

            this.demoChart.setOption({
                xAxis: {},
                yAxis: {},
                series: [{
                    id: 2, // 重点注意此处，和mounted进行的对比
                    name: 'series2', // 重点注意此处，和mounted进行的对比
                    symbolSize: 20,
                    data: this.chartData,
                    type: 'scatter'
                }]
            })
        }
    }
}
</script>

<style scoped lang="scss">
#DemoChart {
    width: 500px;
    height: 500px;
    box-shadow: inset 0 0 10px 4px rgba(0, 0, 0, .05);
    margin: 0 auto;
}
</style>

初始化图形如下图所示：

点击增加十条随机数据后得到的结果如下图：

按照代码逻辑，点击增加十条随机数据后，应该仅存在addData中的数据，但是结果却是初始和新增数据同步展示了。此时便是notMerge属性作用的使用场景了。

notMerge: true的效果

如下方式修改代码，增加notMerge为true的配置：

	method: {
		addData(){
			...//其他代码
			this.demoChart.setOption({
                xAxis: {},
                yAxis: {},
                series: [{
                    id: 2,
                    name: 'series2',
                    symbolSize: 20,
                    data: this.chartData,
                    type: 'scatter'
                }]
            }, true)
            ...//其他代码
		}
	}            

执行后结果，点击前：

点击后：

此时更新效果符合最初预期设想。

要说明的是，如果在数据更新时并未涉及到series如上述代码中的改变，仅仅是改变同一series中的数据时，notMerge属性的配置与否则无区别。

参考资料

Echarts 官方文档