echarts更新数据不重绘

一、基本概念

echarts是百度开源的一个专注于数据可视化的图表库。在使用echarts进行动态数据展示时，经常需要更新图表的数据。更新数据时，可以使用setOption方法重新渲染整个图表，也可以使用一些更灵活的方法避免重绘整个图表而只更新部分数据。这些方法包括数据动态修改、动态增加数据、异步加载数据、基于时间轴更新数据等等。这些方法的使用可以提高数据展示的效率和用户体验，减小对服务器的负载。

二、数据动态修改

数据动态修改是一种直接修改echarts实例的数据option的方式。我们可以通过创建echarts实例时的option中的series数组中对应的数据项进行修改。如下例所示，我们更新了第一个系列的第一个数据项的value的值。修改后的数据能够自动更新到图表中。


var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line'
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

option.series[0].data[0] = 150; // 修改第一个系列的第一个数据项的值

myChart.setOption(option); // 更新图表

三、动态增加数据

动态增加数据是指在已有的数据集之上增加新的数据，而不是替换原有的数据集。我们可以通过调用setOption方法来实现动态增加数据。添加数据时，需要将新的数据添加到对应系列的data数组中。如下例所示，我们添加了一条新的线性数据到第一个系列的data数组末端。添加后的数据能够自动更新到图表中。


var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line'
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

option.series[0].data.push(90); // 向第一个系列的data末尾添加一个数据

myChart.setOption(option); // 更新图表

四、异步加载数据

异步加载数据是指在数据加载完成之后，再将数据渲染到图表中。异步加载数据主要应用于处理大量数据或者需要对数据进行筛选处理的情况。我们可以使用异步加载数据源并处理数据后再渲染图表。具体实现可以使用echarts提供的ajax组件或者其他异步加载方式。如下例所示，我们使用了ajax组件加载数据源，然后对数据进行处理，最后将处理后的数据渲染到图表中。


$.get('data.json').done(function (data) {
    // 对数据进行处理
    var processedData = processData(data);

    var option = {
        xAxis: {
            type: 'category',
            data: processedData.categories
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: processedData.data,
            type: 'line'
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
});

五、基于时间轴更新数据

基于时间轴更新数据是指在图表已有基础上，根据时间轴变化来更新图表数据。我们可以使用echarts提供的时间轴组件对数据进行更新。可以使用时间轴组件提供的多种方式进行数据的更新，如单击时间点，拖动时间轴，自动播放等等。如下例所示，我们使用下方的时间轴对图表中的数据进行了更新。


var option = {
    baseOption: {
        timeline: {
            data: ['2014', '2015', '2016', '2017', '2018', '2019'],
            loop: false,
            autoPlay: false,
            currentIndex: 0,
            playInterval: 1000,
            controlStyle: {
                position: 'left'
            }
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line',
            name: '2014'
        }, {
            data: [150, 220, 170, 90, 80, 120, 150],
            type: 'line',
            name: '2015'
        }, {
            data: [180, 230, 190, 100, 90, 130, 170],
            type: 'line',
            name: '2016'
        }]
    },
    options: [{
        title: {
            text: '2014年数据'
        },
        series: [{
            name: '2014'
        }]
    }, {
        title: {
            text: '2015年数据'
        },
        series: [{
            name: '2015'
        }]
    }, {
        title: {
            text: '2016年数据'
        },
        series: [{
            name: '2016'
        }]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

myChart.on('timelinechanged', function (params) {
    var currentIndex = params.currentIndex;
    var series = option.baseOption.series;
    for (var i = 0, l = series.length; i < l; i++) {
        series[i].data = timelineData[currentIndex].data[i];
    }
    myChart.setOption(option);
});