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 的语法
chart.appendData({
seriesIndex?: number, // 必须是已存在的系列索引，说明：不能够添加新的折线。
// 增加的数据。
data?: Array|TypedArray // 要追加的数据点
})通过上面的语法说明一个问题(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')
<template>
<el-button @click="startStream">开始追加数据</el-button>
</template>
appendData 更新Y轴数据，setOption来跟新X轴
... 单独使用 appendData 会引发错误 Uncaught TypeError: Cannot read properties of undefined (reading '0')...
... 其他代码不变 ...
methods: {
// 启动实时数据流
startStream() {
if(!this.xAxisData.includes("20:23:06")){
// 向X轴添加数据
this.xAxisData.push("20:23:06")
// 我们可以理解为：向Y轴追加数据。appendData只能跟新Y轴数据。
this.myChart.appendData({
seriesIndex: 0,
data:
});
// 更新X轴数据
this.myChart.setOption({
xAxis: {
data: this.xAxisData
}
});
}
}
}
</script>
这样形式的数据appendData可以更新嘛?
有机智的小伙伴会说：appendData 方法不会自动更新x轴。
那么如果我们的数据是下面这种形式：
seriesData:[
[ "2023-12-04 09:50:07", "0.137"],
................................,
[ "2023-12-04 10:50:07", "0.143"],
]是不是就可以使用appendData 跟新折线图的数据了？
答案是：不可以。下面我们可以来看下
<template>
<el-button @click="startStream">开始追加数据</el-button>
</template>
折线图追加数据使用 setOption
<template>
<el-button @click="startStream">开始追加数据</el-button>
</template>
微信 本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 用心讨论，共获提升！ 这个好，看起来很实用 这个有用。 分享、互助 让互联网精神温暖你我 感谢发布原创作品，程序园因你更精彩 yyds。多谢分享 收藏一下 不知道什么时候能用到 用心讨论，共获提升！ 懂技术并乐意极积无私分享的人越来越少。珍惜 这个有用。 感谢分享，学习下。 收藏一下 不知道什么时候能用到 谢谢分享，辛苦了 东西不错很实用谢谢分享 谢谢分享，试用一下 东西不错很实用谢谢分享 懂技术并乐意极积无私分享的人越来越少。珍惜 这个好，看起来很实用 前排留名，哈哈哈
页:
[1]
2