vue+echarts实现动态折线图的方法与注意
作者:JeffreytheCoder 发布时间:2023-07-02 16:29:06
标签:vue,echart,折线图
之前公司有个绘制实时盈利率折线图的需求,实现的还不错,今天来分享下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选项
效果图
来源:https://blog.csdn.net/weixin_41421986/article/details/108310468
0
投稿
猜你喜欢
- 本文实例讲述了python实现爬取百度图片的方法。分享给大家供大家参考,具体如下:import jsonimport itertoolsim
- 大家好,前面入门已经说了那么多基础知识了,下面我们做几个实战项目来挑战一下吧。那么这次为大家带来,Python爬取糗事百科的小段子的例子。首
- 闲暇时间用tkinter写了个简易计算器,可实现简单的加减乘除运算,用了Button和Entry2个控件,下面是代码,只是简单的用了偏函数p
- 下文要实现的可视化大屏内容:需要在地图上将我司船舶的轨迹展示出来。听起来很简单,一开始我也是这样想的。通过一些BI工具应该可以轻松实现,比如
- 如下所示:import pandas as pd from pandas import * import numpy as np data
- 简单实现平面的点K均值分析,使用欧几里得距离,并用pylab展示。import pylab as pl#calc Euclid squire
- 现在大部分网站都使用asp+access构建,这样的话通过下载access数据库简单就可以对网站进行破坏! 而很多的网站都不太重
- 一 Process对象的join方法在主进程运行过程中如果想并发地执行其他的任务,我们可以开启子进程,此时主进程的任务与子进程的任务分两种情
- 观察者模式中的主题对象一般存在着一个其他服务依赖的核心服务,并且维护着其他依赖此核心服务的对象列表(即观察者或监视者列表),当主题对象发生变
- 前言NumPy(Numerical Python)是Python的一种开源的数值计算扩展。这种工具可用来存储和处理大型矩阵,比Python自
- 某些情况下:我们希望在一个SQL Server下访问另一个sqlserver数据库上的数据,或者访问其他oracle数据库上的数据,要想完成
- 并行查询其优势就是可以通过多个线程来处理查询作业,从而提高查询的效率。SQL Server数据库为具有多个CPU的数据库服务器提供并行查询的
- 特点:不需要另外加个清除DIV:after(伪对象)--设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏
- 如下所示:import pandas as pddata = pd.read_excel('123.xls','Sh
- 前言Django项目本身就可以启动运行,为什么还需要部署到Apache或者Nginx上呢?初学者都会遇到这个问题,我们来看看官方解释:It&
- Python 中的运算符什么是运算符?举个简单的例子 4 +5 = 9 。 例子中,4 和 5 被称为操作数,"+" 称
- 后台收到一个读者需求人事部门有最近3年每个月全公司的工资Excel文件,一共500多个。现在和1位员工有一件劳动纠纷,需要把这1位员工散落在
- 一、前言很多网站提供视频转GIF的功能,但要么收费要么有广告实际上我们通过python,几行代码就能够实现视频转gif二、教程1. 安装必备
- 1.查看Anaconda中有哪些虚拟环境及所在目录:在桌面搜索框中输入Anaconda Prompt并打开输入命令conda env lis
- 思考:测试用例执行后,如何生成一个直观漂亮的测试报告呢?分析:1.unittest单元测试框架本身带有一个textTestRunner类,可