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 相关文章推荐
js模拟hashtable的简单实例
Mar 06 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
浅析js中mvvm模式实现的原理
Oct 06 Javascript
如何通过JS实现转码与解码
Feb 21 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
一个好用的分页函数
2006/11/16 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
js function定义函数使用心得
2010/04/15 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
5种Python单例模式的实现方式
2016/01/14 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python爬取m3u8连接的视频
2018/02/28 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
python实现飞机大战小游戏
2019/11/08 Python
python 带时区的日期格式化操作
2020/10/23 Python
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
存储过程的优点有哪些
2012/09/27 面试题
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
武汉某公司的C#笔试题面试题
2015/12/25 面试题
学校节能减排倡议书
2014/05/16 职场文书
党员民主评议自我评价
2014/10/20 职场文书
如何写好开幕词?
2019/06/24 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书