关于第二个问题：笔者更倾向于将Chart组件设计成纯组件，即只接收父组件传递的数据进行变化，不在内部进行复杂操作；这也符合目前前端MVVM框架的最佳实践；而且若将数据传递到Chart组件内部再进行处理，一是遇到不需要动态渲染的需求还需要对组件进行额外处理，二是要在Chart内部做ajax操作，这样就导致Chart完全没有了可复用性。
接下来我们修改App.vue
<template> <div> <Chart :option="option"/> </div> </template> <script> import vueEcharts from "./components/vueEcharts"; export default { name: "App", data() { return { //笔者使用了mock数据代表从服务器获取的数据 chartData: { xData: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], sData: [5, 20, 36, 10, 10, 70] } }; }, components: { Chart }, mounted() { this.refreshData(); }, methods: { //添加refreshData方法进行自动设置数据 refreshData() { //横轴数据 let xData = this.chartData.xData, //系列值 sData = this.chartData.sData; for (let i = 0; i < xData.length; i++) { //此处使用let是关键，也可以使用闭包。原理不再赘述 setTimeout(() => { this.option.xAxis.data.push(xData[i]); this.option.series[0].data.push(sData[i]); }, 1000*i)//此处要理解为什么是1000*i } } } }; </script>
至此我们就实现了图表动态数据加载，效果如下图：
总结
这篇教程通过一个动态图表的开发，传递了以下信息：
Echarts如何与Vue结合使用
Vue组件开发、纯组件与“脏”组件的区别
Vue watch的用法
let的特性
JavaScript EventLoop特性
...
大家可以根据这个列表查漏补缺。
后续优化
这个组件还有需要需要优化的点，比如：
间隔时间应该可配置
每分钟从后台获取数据，那么图表展示的数据将会越来越多，越来越密集，浏览器负担越来越大，直到崩溃
没有设置暂停图表刷新的按钮
...
总结
以上所述是小编给大家介绍的使用Vue开发动态刷新Echarts组件的教程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: