vue+echarts实现动态折线图的方法与注意


Posted in Javascript onSeptember 01, 2020

之前公司有个绘制实时盈利率折线图的需求,实现的还不错,今天来分享下vue+echarts实现动态折线图的方法。

实现代码

<template>
 <div id="myChart"></div>
</template>

<script>
import echarts from 'echarts'
export default {
 name: 'DynamicLineChart',
 data () {
  return {
  	// 实时数据数组
   date: [],
   yieldRate: [],
   yieldIndex: [],
   // 折线图echarts初始化选项
   echartsOption: {
    legend: {
     data: ['实际收益率', '大盘收益率'],
    },
    xAxis: {
     name: '时间',
     nameTextStyle: {
      fontWeight: 600,
      fontSize: 18
     },
     type: 'category',
     boundaryGap: false,
     data: this.date,	// 绑定实时数据数组
    },
    yAxis: {
     name: '实际收益率',
     nameTextStyle: {
      fontWeight: 600,
      fontSize: 18
     },
     type: 'value',
     scale: true,
     boundaryGap: ['15%', '15%'],
     axisLabel: {
      interval: 'auto',
      formatter: '{value} %'
     }
    },
    tooltip: {
     trigger: 'axis',
    },
    series: [
     {
      name:'实际收益率',
      type:'line',
      smooth: true,
      data: this.yieldRate,	// 绑定实时数据数组
     },
     {
      name:'大盘收益率',
      type:'line',
      smooth: true,
      data: this.yieldIndex,	// 绑定实时数据数组
     }
    ]
   }
  }
 },
 mounted () {
  this.myChart = echarts.init(document.getElementById('myChart'), 'light');	// 初始化echarts, theme为light
  this.myChart.setOption(this.echartsOption);	// echarts设置初始化选项
  setInterval(this.addData, 3000);	// 每三秒更新实时数据到折线图
 },
 methods: {
 	// 获取当前时间
  getTime : function() {	
   var ts = arguments[0] || 0;
   var t, h, i, s;
   t = ts ? new Date(ts * 1000) : new Date();
   h = t.getHours();
   i = t.getMinutes();
   s = t.getSeconds();
   // 定义时间格式
   return (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
  },
  // 添加实时数据
  addData : function() {
  	// 从接口获取数据并添加到数组
   this.$axios.get('url').then((res) => {
    this.yieldRate.push((res.data.actualProfitRate * 100).toFixed(3));
    this.yieldIndex.push((res.data.benchmarkProfitRate * 100).toFixed(3));
    this.date.push(this.getTime(Math.round(new Date().getTime() / 1000)));
    // 重新将数组赋值给echarts选项
    this.echartsOption.xAxis.data = this.date;
    this.echartsOption.series[0].data = this.yieldRate;
    this.echartsOption.series[1].data = this.yieldIndex;
    this.myChart.setOption(this.echartsOption);
   });
  }
 }
}
</script>

<style>
// 设定宽高,不然超出windows会显示不出来
#myChart{
 width: 100%;
 height: 500px;
 margin: 0 auto;
}
</style>

要注意的有三点:

  • mounted中init并setOption初始化echarts
  • echartsOption里的data绑定数组
  • setInterval中要更新数组并重新将数组赋值给echarts选项

效果图

vue+echarts实现动态折线图的方法与注意

总结

到此这篇关于vue+echarts实现动态折线图的文章就介绍到这了,更多相关vue+echarts动态折线图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
node.js 如何监视文件变化
Sep 01 #Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 #jQuery
谈谈node.js中的模块系统
Sep 01 #Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 #Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 #Javascript
vue离开当前页面触发的函数代码
Sep 01 #Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 #Javascript
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
PHP4(windows版本)中的COM函数
2006/10/09 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
JS实现拖动模糊框特效
2020/08/25 Javascript
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
私有程序集与共享程序集有什么区别
2013/04/05 面试题
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
结对共建工作方案
2014/06/02 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
春节慰问信范文
2015/02/15 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
MySQL数据库事务的四大特性
2022/04/20 MySQL