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 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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常用处理静态操作类
2015/04/03 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
django中模板的html自动转意方法
2018/05/27 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
食堂个人先进事迹
2014/01/22 职场文书
运动会跳远广播稿
2014/02/04 职场文书
难忘的一课教学反思
2014/04/30 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
新郎接新娘保证书
2015/05/08 职场文书
投资合作意向书范本
2015/05/08 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS