使用Vue开发动态刷新Echarts组件的教程详解


Posted in Javascript onMarch 22, 2018

需求背景:dashboard作为目前企业中后台产品的“门面”,如何更加实时、高效、炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题。今天就从0开始,封装一个动态渲染数据的Echarts折线图组件,抛砖引玉,一起来思考更多有意思的组件。

准备工作

项目结构搭建

因为生产需要(其实是懒),所以本教程使用了 ==vue-cli==进行了项目的基础结构搭建。

npm install -g vue-cli
vue init webpack vue-charts
cd vue-charts
npm run dev

安装Echarts

直接使用npm进行安装。

npm install Echarts --save

引入Echarts

//在main.js加入下面两行代码
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //将echarts注册成Vue的全局属性

到此,准备工作已经完成了。

静态组件开发

因为被《React编程思想》这篇文章毒害太深,所以笔者开发组件也习惯从基础到高级逐步迭代。

静态组件要实现的目的很简单,就是把Echarts图表,渲染到页面上。

新建Chart.vue文件

<template>
 <div :id="id" :style="style"></div>
</template>
<script>
export default {
 name: "Chart",
 data() {
  return {
   //echarts实例
   chart: ""  
  };
 },
 props: {
  //父组件需要传递的参数:id,width,height,option
  id: {
   type: String
  },
  width: {
   type: String,
   default: "100%"
  },
  height: {
   type: String,
   default: "300px"
  },
  option: {
   type: Object,
   //Object类型的prop值一定要用函数return出来,不然会报错。原理和data是一样的,
   //使用闭包保证一个vue实例拥有自己的一份props
   default() {
    return {
     title: {
      text: "vue-Echarts"
     },
     legend: {
      data: ["销量"]
     },
     xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子","tuoxie"]
     },
     series: [
      {
       name: "销量",
       type: "line",
       data: [5, 20, 36, 10, 10, 70]
      }
     ]
    };
   }
  }
 },
 computed: {
  style() {
   return {
    height: this.height,
    width: this.width
   };
  }
 },
 mounted() {
  this.init();
 },
 methods: {
  init() {
   this.chart = this.$echarts.init(document.getElementById(this.id));
   this.chart.setOption(this.option);
  }
 }
};
</script>

上述文件就实现了将一个简单折线图渲染到页面的组件,怎么样是不是很简单?最简使用方法如下:

App.vue

<template>
 <div id="app">
  <Chart id="test"/>
 </div>
</template>
<script>
import Chart from "./components/Chart";
export default {
 name: "App",
 data() {},
 components: {
  Chart
 }
}
</script>

至此,运行程序你应该能看到以下效果:

使用Vue开发动态刷新Echarts组件的教程详解 

第一次迭代

现在我们已经有了一个基础版本,让我们来看看哪些方面做的还不尽如人意:

  1. 图表无法根据窗口大小进行自动缩放,虽然设置了宽度为100%,但是只有刷新页面图表才会重新进行渲染,这会让用户体验变得很差。
  2. 图表目前无法实现数据自动刷新

下面我们来实现这两点:

自动缩放

Echarts本身是不支持自动缩放的,但是Echarts为我们提供了resize方法。

//在init方法中加入下面这行代码
window.addEventListener("resize", this.chart.resize);

只需要这一句,我们就实现了图表跟随窗口大小自适应的需求。

支持数据自动刷新

因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染,这是实现本需求的基础。我们再设想一下,如果想要支持数据的自动刷新,必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据。所幸Vue为我们提供了==watcher==功能,通过它我们可以很方便的实现上述功能:

//在Chart.vue中加入watch
 watch: {
  //观察option的变化
  option: {
   handler(newVal, oldVal) {
    if (this.chart) {
     if (newVal) {
      this.chart.setOption(newVal);
     } else {
      this.chart.setOption(oldVal);
     }
    } else {
      this.init();
    }
   },
   deep: true //对象内部属性的监听,关键。
  }
 }

上面代码就实现了我们对option对象中属性变化的监听,一旦option中的数据有了变化,那么图表就会重新渲染。

实现动态刷新

下一步我想大家都知道了,就是定时从后台拉取数据,然后更新父组件的option就好。这个地方有两个问题需要思考一下:

  1. 如果图表要求每秒增加一个数据,应该如何进行数据的请求才能达到性能与用户体验的平衡?
  2. 动态更新数据的代码,应该放在父组件还是子组件?

对第一个问题,每秒实时获取服务器的数据,肯定是最精确的,这就有两种方案:

  • 每秒向后台请求一次
  • 保持长连接,后台每秒向前端推送一次数据

第一种方案无疑对性能和资源产生了极大的浪费;除非实时性要求特别高(股票系统),否则不推荐这种方式;

第二种方案需要使用web Socket,但在服务端需要进行额外的开发工作。

笔者基于项目的实际需求(实时性要求不高,且后台生成数据也有一定的延迟性),采用了以下方案:

  1. 前端每隔一分钟向后台请求一次数据,且为当前时间的上一分钟的数据;
  2. 前端将上述数据每隔一秒向图表set一次数据

关于第二个问题:笔者更倾向于将Chart组件设计成纯组件,即只接收父组件传递的数据进行变化,不在内部进行复杂操作;这也符合目前前端MVVM框架的最佳实践;而且若将数据传递到Chart组件内部再进行处理,一是遇到不需要动态渲染的需求还需要对组件进行额外处理,二是要在Chart内部做ajax操作,这样就导致Chart完全没有了可复用性。

接下来我们修改App.vue

<template>
 <div id="app">
  <Chart id="test" :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>

至此我们就实现了图表动态数据加载,效果如下图:

 使用Vue开发动态刷新Echarts组件的教程详解

总结

这篇教程通过一个动态图表的开发,传递了以下信息:

  • Echarts如何与Vue结合使用
  • Vue组件开发、纯组件与“脏”组件的区别
  • Vue watch的用法
  • let的特性
  • JavaScript EventLoop特性
  • ...

大家可以根据这个列表查漏补缺。

后续优化

  1. 这个组件还有需要需要优化的点,比如:
  2. 间隔时间应该可配置
  3. 每分钟从后台获取数据,那么图表展示的数据将会越来越多,越来越密集,浏览器负担越来越大,直到崩溃
  4. 没有设置暂停图表刷新的按钮
  5. ...

总结

以上所述是小编给大家介绍的使用Vue开发动态刷新Echarts组件的教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 #Javascript
vuex 的简单使用
Mar 22 #Javascript
Vue.js中的computed工作原理
Mar 22 #Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 #Javascript
JS中的事件委托实例浅析
Mar 22 #Javascript
jquery的 filter()方法使用教程
Mar 22 #jQuery
p5.js实现斐波那契螺旋的示例代码
Mar 22 #Javascript
You might like
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
js 字符串操作函数
2009/07/25 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
jQuery事件用法详解
2016/10/06 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
webpack搭建vue 项目的步骤
2017/12/27 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
关于python写入文件自动换行的问题
2018/06/23 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
几个Linux面试题笔试题
2016/08/01 面试题
什么是会话Bean
2015/05/14 面试题
自我评价200字分享
2013/12/17 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
医院信息公开实施方案
2014/05/09 职场文书
践行三严三实心得体会
2014/10/13 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
统招统分证明
2015/06/23 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书