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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
javascript 用原型继承来实现对象系统
Mar 22 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
JS常用算法实现代码
Nov 14 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
TypeScript魔法堂之枚举的超实用手册
Oct 29 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
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
PHP实现懒加载的方法
2015/03/07 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
brook javascript框架介绍
2011/10/10 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
Python 元类使用说明
2009/12/18 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Python银行系统实战源码
2019/10/25 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
python实现密码强度校验
2020/03/18 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
董事长助理岗位职责
2014/02/18 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
汇报材料怎么写
2014/12/30 职场文书
保送生自荐信范文
2015/03/26 职场文书
2015年教师节主持词
2015/07/03 职场文书
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang
Java使用HttpClient实现文件下载
2022/08/14 Java/Android