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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
javascript fullscreen全屏实现代码
Apr 09 Javascript
JavaScript 事件查询综合
Jul 13 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
js实现自定义路由
Feb 04 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
小程序实现发表评论功能
Jul 06 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
React实现评论的添加和删除
Oct 20 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 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读取html并截取字符串的简单代码
2009/11/30 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
解决Vue项目中tff报错的问题
2020/10/21 Javascript
Python中有趣在__call__函数
2015/06/21 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
python 解决函数返回return的问题
2020/12/05 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
通信工程专业女生个人求职信
2013/09/21 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
高中班主任评语大全
2014/04/25 职场文书
学雷锋日活动总结
2015/02/06 职场文书
python flask框架快速入门
2021/05/14 Python
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android