解决echarts使用renderItem自定义图表时的残影问题

公司有一个需求是绘制人员的排班任务甘特图，因为有大量自定义元素和复杂交互，在初版时采用dom+Virtual List的办法来做，显示和交互的效果都不错，但是一旦数据量大的时候，就算是Virtual List在滚动时都会很卡，于是就有了通过echarts使用canvas来绘制甘特图的想法，主要是通过echarts的renderItem自定义图表来展示，于是开始踩坑。

option

yAxis: {
　　type: 'value'
}.
xAxis: {
　　type: 'time'
}
series: [
    {
        id: 'flightData',
        type: 'custom',
        renderItem: this.renderGanttItem,
        dimensions: [null, { type: 'time' }, { type: 'time' }, { type: 'ordinal' }],
        encode: {
            x: [1, 2],
            y: 0,
        },
        data: echarts.util.map(_missions, (item, index) => {
            let startTime = new Date(this.root.options.startTime)
            let endTime = new Date(this.root.options.endTime)
            return [index, startTime, endTime].concat(item);
        }),
    },
    {
        type: 'custom',
        renderItem: this.renderAxisLabelItem,
        dimensions: [null, { type: 'ordinal' }],
        encode: {
            x: -1, // Then this series will not controlled by x.
            y: 0
        },
        data: echarts.util.map(_staffList, function (item, index) {
            return [index].concat(item);
        }),
    }
],
dataZoom:[
    {
        id: 'slider_x',
        type: 'slider',
        xAxisIndex: 0,
        filterMode: 'none',
        height: 20,
        bottom: 0,
        start: this.zoom.x_left,
        end: this.zoom.x_right,
        handleIcon: dragIcon,
        handleSize: '80%',
        showDetail: false,
        backgroundColor:'#E4E7ED9E',
        throttle: 100
    },
    {
        id: 'slider_y',
        type: 'slider',
        filterMode: 'weakFilter',
        fillerColor:'#d2d9e4',
        yAxisIndex: 0,
        zoomLock: true,
        width: 20,
        right: 0,
        start: this.zoom.y_top,
        end: this.zoom.y_bottom,
        handleSize: 0,
        showDetail: false,
        backgroundColor:'#E4E7ED9E',
        throttle: 100
    },
    {
        type: 'inside',
        id: 'insideX',
        xAxisIndex: 0,
        throttle: 100,
        zoomOnMouseWheel: false,
        moveOnMouseMove: true
    },
    {
        type: 'inside',
        id: 'insideY',
        yAxisIndex: 0,
        throttle: 100,
        zoomOnMouseWheel: false,
        moveOnMouseMove: true,
        moveOnMouseWheel: true
    }
]

 

这时候碰到问题：renderGanttItem返回的元素group数量是变化的，因为时间轴的移动，显示的元素在不停变化，元素数量当然在变化，echarts对于减少和新增的元素，在界面上会出现残影、动画跳动的问题。参考了文档严格定义了唯一的series-custom.renderItem.return_rect.id也不能解决。

解决办法一

通过设置series-custom.renderItem.return_rect.ignore，节点是否完全被忽略（既不渲染，也不响应事件）。当视口离开元素时，把元素的ignore设置为true，当元素一定出现添加和减少时，先 调用this.myChart.clear()，保证不会在renderItem中有元素增减。

这个办法有用，但是碰到每行元素很多的时候，就算时设置了ignore，也可以看到卡顿，没有canvas对比dom的流畅，只能修改dataZoom-slider.throttle增加节流来减少卡顿。

解决办法二

通过查看源码，看到这样一段注释：

// Usage:
// (1) By default, `elOption.$mergeChildren` is `'byIndex'`, which indicates that
//     the existing children will not be removed, and enables the feature that
//     update some of the props of some of the children simply by construct
//     the returned children of `renderItem` like:
//     `var children = group.children = []; children[3] = {opacity: 0.5};`
// (2) If `elOption.$mergeChildren` is `'byName'`, add/update/remove children
//     by child.name. But that might be lower performance.
// (3) If `elOption.$mergeChildren` is `false`, the existing children will be
//     replaced totally.
// (4) If `!elOption.children`, following the "merge" principle, nothing will happen.
//
// For implementation simpleness, do not provide a direct way to remove sinlge
// child (otherwise the total indicies of the children array have to be modified).
// User can remove a single child by set its `ignore` as `true` or replace
// it by another element, where its `$merge` can be set as `true` if necessary.

 

在renderItem返回的group元素中设置$mergeChildren='byName'，并且给每一类元素设置一个name，这样每次都会根据name来更新元素

renderGanttItem = (params, api) => {
　　　...

　　　　return {
　　　　　　type: 'group',
　　　　　　name: 'gantt-group',
　　　　　　id: categoryIndex,
　　　　　　info: {data:item},
　　　　　　children: allChildren,
　　　　　　$mergeChildren: 'byName'
　　　　};

}

这样设置了以后，大量元素滚动也非常顺滑，解决问题