echarts中appendData的详细讲解

appendData 的说明

appendData 接口提供了分片加载后，增量渲染的能力。
appendData在大数据量(如：百万以上)的渲染场景，分片加载数据和增量渲染。
在大数据量的场景下（例如地理数的打点），就算数据使用二进制格式。
也会有几十或上百兆，在互联网环境下，往往需要分片加载。
渲染新加入的数据块时不会清除原有已经渲染的部分。
上面这一段话，是echarts官网中对appendData的描述。
文字地址说明： https://echarts.apache.org/zh/api.html#echartsInstance.appendData
需要注意的是：
现在不支持系列（series） 使用 dataset 同时使用 appendData。
只支持系列使用自己的 series.data 时使用 appendData。
目前并非所有的图表都支持分片加载时的增量渲染。【重要】
目前支持的图有：ECharts 基础版本的 散点图（scatter） 和 线图（lines）。
ECharts GL 的 散点图（scatterGL）、线图（linesGL） 和 可视化建筑群（polygons3D）。

appendData 的语法

1. chart.appendData({
2.   seriesIndex?: number, // 必须是已存在的系列索引，说明：不能够添加新的折线。
3.   // 增加的数据。
4.   data?: Array|TypedArray // 要追加的数据点
5. })

复制代码

通过上面的语法说明一个问题(appendData 不能新增一条线)

appendData 方法只能用于向已存在的数据系列追加数据点，而不能添加新的数据系列（即新的线条）。
也就是说：appendData 不能新增一条线。
原因：根据这个方法的参数可以推断除不能够新增1条折线。原因如下：
appendData 方法用于向图表中追加数据，它接受一个对象作为参数，该对象包含 seriesIndex 和 data 两个属性。
seriesIndex: number, // 必须是已存在的系列索引
appendData 的特别说明

appendData 方法不会自动更新x轴，因此我们需要手动更新x轴的数据。
所以：如果我们要使用 appendData 跟新折线图,柱状图的数据。
必须要配合：setOption 来跟新 x轴。
看到这里是是不是感觉到很扯~~~~~
其实并不扯，appendData 就不能用在 series 系列的图表中。
网上其他文章使用 appendData 跟新折线图，柱状图的，一定也使用了 setOption 来跟新 x轴。
那我们思考一下，我都使用了 setOption 来更新X轴，为啥还要多使用 appendData 呢?
因此：appendData不能用在折线图，柱状图中。
折线图单独使用 appendData 会引发错误 Uncaught TypeError: Cannot read properties of undefined (reading '0')

1. <template>
2.   
3.     <el-button @click="startStream">开始追加数据</el-button>
4.    
5.   
6. </template>

复制代码

appendData 更新Y轴数据，setOption来跟新X轴

1. ... 单独使用 appendData 会引发错误 Uncaught TypeError: Cannot read properties of undefined (reading '0')...
2. ... 其他代码不变 ...
3.   methods: {
4.     // 启动实时数据流
5.     startStream() {
6.       if(!this.xAxisData.includes("20:23:06")){
7.         // 向X轴添加数据
8.         this.xAxisData.push("20:23:06")
9.         // 我们可以理解为：向Y轴追加数据。appendData只能跟新Y轴数据。
10.         this.myChart.appendData({
11.           seriesIndex: 0,
12.           data: [1000]
13.         });
15.         // 更新X轴数据
16.         this.myChart.setOption({
17.           xAxis: {
18.             data: this.xAxisData
19.           }
20.         });
21.       }
22.     }
23.   }
24. </script>

复制代码

[x轴的数，y轴数据]这样形式的数据appendData可以更新嘛?

有机智的小伙伴会说：appendData 方法不会自动更新x轴。
那么如果我们的数据是下面这种形式：

1. seriesData:  [
2.   [ "2023-12-04 09:50:07", "0.137"],
3.   ................................,
4.   [ "2023-12-04 10:50:07", "0.143"],
5.   ]

复制代码

是不是就可以使用appendData 跟新折线图的数据了？
答案是：不可以。下面我们可以来看下

1. <template>
2.   
3.     <el-button @click="startStream">开始追加数据</el-button>
4.    
5.   
6. </template>

复制代码

折线图追加数据使用 setOption

1. <template>
2.   
3.     <el-button @click="startStream">开始追加数据</el-button>
4.    
5.   
6. </template>

复制代码

                                                                                                                               

                                                微信                                                                                                本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
                        如果文中有什么错误，欢迎指出。以免更多的人被误导。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！