如何通过echarts点击按钮重新渲染图表并实时更新数据？

本文共计1469个文字，预计阅读时间需要6分钟。

目录 + ECharts点击按钮从新渲染图表并更新数据 + 效果图 + 思路 + ECharts 3点击按钮动态更新数据

1.后台代码（模拟数据）

2.前台界面

3.ECharts 代码

4.点击搜索按钮触发的函数

5.效果展示 + ECharts点击按钮

目录

• echarts点击按钮从新渲染图表并更新数据
• 效果图
• 思路
• echarts3点击按钮动态更新数据
• 1.后台代码（模拟数据）
• 2.前台界面
• 3.echarts代码
• 4.点击搜索按钮触发的函数
• 5.效果

echarts点击按钮从新渲染图表并更新数据

效果图

像这样的，点击一个会显示不同的数据的试图。

思路

很简单，就是点击按钮后从新调用一下echarts试图的方法，然后把新的数据当参数传给echarts方法内，然后给到data就能渲染了。

上代码

export default { data() { return { //默认给一个数据，一进来就能看到的。