在vue中使用Echarts画曲线图(异步加载数据)
一.引入vue-resource
通过npm下载vue-resource
//命令行中输入 npm install vue-resource --save
在main.js
中引入vue-resource
并注册
// main.js import VueResource from 'vue-resource'
Vue.use(VueResource)
二.设置aysnc-lineChart-option.js
将该曲线图的没有数据的option
抽取到async-lineChart-option.js
中。
此代码在src/echarts/aysnc-lineChart-option.js文件中,代码如下。
export const option = {
title: { text: '曲线图' },
backgroundColor: '#FBFBFB',
tooltip: {
trigger:'axis'
},
xAxis: {
data: [],
name: 'id'
},
yAxis: {},
series: [{
name: 'data',
type: 'line',
data: [],
smooth : true,
itemStyle: {
normal: {
color: 'hotpink'
}
}
}]
}
三.在Curve.vue
中请求数据
1.从async-lineChart-option.js中引入option
2.
在methods
中添加drawLineChart()
方法
3.在mounted()
钩子函数中调用drawBarChart()
4.添加加载动画,在drawLineChart()
方法中添加showLoading()
和hideLoading()
此代码在src/views/Curve.vue中,代码如下:
<script>
import {option} from '../echarts/aysnc-lineChart-option.js' //从aysnc-lineChart-option.js中引入option export default {
name: 'Curve', mounted() {
//调用drawLineChart()
this.drawLineChart();
},
data () {
return { }
},
methods:{ drawLineChart() {
// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('myChart'));
// 绘制基本图表
myChart.setOption(option); //显示加载动画
myChart.showLoading(); //获取数据
this.$axios.get('/getdate').then(res => { //将json对象的所有id数据组成一个数组
var id = [];
for(let i = 0;i < res.data.length;i++){
id.push(res.data[i].id);
} //将json对象中的所有data数据组成一个数组
var data = [];
for(let i = 0;i < res.data.length;i++){
data.push(res.data[i].data);
} setTimeout(()=>{ //为了让加载动画效果明显,这里加入了setTimeout,实现300ms延时
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({
xAxis: {
data: id
},
series: [{
data: data
}]
})
}, 300 )
})
},
}, }; </script>
四.效果图
在vue中使用Echarts画曲线图(异步加载数据)的更多相关文章
- swift中利用系统线程实现异步加载数据同步更新UI
swift中的使用案例样式 // Mark: -数据源更新 typealias AddDataBlock = () ->Void var updataBlock:AddDataBlock? fu ...
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- Vue(基础七)_webpack(webpack异步加载原理)
---恢复内容开始--- 一.前言 1.webpack异步加载原理’ 2.webpack.ensure原理 ...
- Highcharts 基本曲线图;Highcharts 带有数据标签曲线图表;Highcharts 异步加载数据曲线图表
Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...
- HTML5中script的async属性异步加载JS
HTML5中script的async属性异步加载JS HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...
- 新手教程:不写JS,在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
- 在Vue中的load或ready的加载时机
在Vue中的load或ready的加载时机 1.我们来插入一段代码来分析: Js代码如下 <script type="text/javascript"> var app ...
- winform异步加载数据到界面
做一个学习记录. 有两个需求: 1.点击按钮,异步加载数据,不卡顿UI. 2.把获取的数据加载到gridview上面. 对于需求1,2,代码如下: public delegate void ShowD ...
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
随机推荐
- 安装cmake
$ sudo apt-get install build-essential$ wget http://www.cmake.org/files/v3.11/cmake-3.11.3.tar.gz$ t ...
- 【2.0】SpringBoot连接MySql 8.0的url设置
jdbc:mysql://localhost:3306/enterprise?useUnicode=true&&useSSL=false&&characte ...
- python学习-----协程
一.协程的引入 对于单线程下,我们不可避免程序中出现io操作,但如果我们能在自己的程序中(即用户程序级别,而非操作系统级别)控制单线程下的多个任务能在一个任务遇到io阻塞时就切换到另外一个任务去计算, ...
- windows上使用foremost
做CTF题需要这工具来提取文件里的隐藏文件, 网上大部分是linux版本,之前好不容易找了一个exe文件结果还不能用.找了很长时间终于找到了: https://github.com/raddyfiy/ ...
- Python打包项目为EXE程序
安装pyinstaller 如果使用了VirtualENV环境,则必须在要打包的项目环境中安装... 否则会找不到项目需求的包和模块 pip install -i https://pypi.douba ...
- MVC _Ajax的使用【七】
一.本篇主要写的是在MVC项目中一种ajax的使用方法 1. 首先在控制器中创建两个方法,showCreate()和AddUserInfo() using System; using System. ...
- EF Core
一个事务中 先在数据库查出一条数据进行修改 然后在进行查询 他会直接在内存中找到这条数据 不会再数据库查询了 EF Core的 linq语句中可以使用C#方法或函数 在EF6或 ...
- Java实现将文件或者文件夹压缩成zip
最近碰到个需要下载zip压缩包的需求,于是我在网上找了下别人写好的zip工具类.但找了好多篇博客,总是发现有bug.因此就自己来写了个工具类. 这个工具类的功能为: ( ...
- Linux虚拟机的三种网络连接方式
Linux虚拟机的三种网络连接方式 虚拟机网络模式 无论是vmware,virtual box,virtual pc等虚拟机软件,一般来说,虚拟机有三种网络模式: 1.桥接 2.NAT 3.Host- ...
- .NET学习日记【1】
不得不说,之前一年学习的内容基本上在第一章中都有所涉及,而且还讲了很多不知道知识.看完第一张对多态和继承都多了一些体会.在1.4前面的都有很认证的看过,也在vs上面验证了一下.然后也明白了.NET到底 ...