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 继承详解(四)
Jul 13 Javascript
javascript天然的迭代器
Oct 29 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
koa-router源码学习小结
Sep 07 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 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
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python3读取zip文件信息的方法
2015/05/22 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
python中实现词云图的示例
2020/12/19 Python
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
秘书专业自荐信范文
2013/12/26 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
火箭队口号
2014/06/18 职场文书
节约粮食标语
2014/06/18 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
三方合作意向书范本
2015/05/09 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
oracle数据库去除重复数据
2022/05/20 Oracle