现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取。
所以本项目的需求是请求服务器获得二维数组,并生成曲线图。曲线图的横纵坐标均从获得的数据中取得。
Echarts官方文档:
https://ecomfe.github.io/echarts-doc/public/en/index.html
前端框架使用vue,服务器使用express搭建,交互使用axios。

一.引入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画曲线图(异步加载数据)的更多相关文章

  1. swift中利用系统线程实现异步加载数据同步更新UI

    swift中的使用案例样式 // Mark: -数据源更新 typealias AddDataBlock = () ->Void var updataBlock:AddDataBlock? fu ...

  2. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  3. Vue(基础七)_webpack(webpack异步加载原理)

    ---恢复内容开始--- 一.前言 1.webpack异步加载原理’                                           2.webpack.ensure原理     ...

  4. Highcharts 基本曲线图;Highcharts 带有数据标签曲线图表;Highcharts 异步加载数据曲线图表

    Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...

  5. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  6. 新手教程:不写JS,在MIP页中实现异步加载数据

    从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...

  7. 在Vue中的load或ready的加载时机

    在Vue中的load或ready的加载时机 1.我们来插入一段代码来分析: Js代码如下 <script type="text/javascript"> var app ...

  8. winform异步加载数据到界面

    做一个学习记录. 有两个需求: 1.点击按钮,异步加载数据,不卡顿UI. 2.把获取的数据加载到gridview上面. 对于需求1,2,代码如下: public delegate void ShowD ...

  9. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

随机推荐

  1. 2018-2019-1 20189206 《Linux内核原理与分析》第九周作业

    #linux内核分析学习笔记 --第八章 进程的切换和系统的一般执行过程 学习目标:重点关注进程切换的过程,进程调度的时机,操作系统的基本构成以及一般的执行过程. 进程调度的时机 因为进程的调度只发生 ...

  2. 虚拟主机、VPS、ECS云服务器 区别

    在阿里云上买了个云服务器. ssh命令都没通,找服务端同事帮我看,说我买错了.应该买ECS. 1.虚拟主机 虚拟主机就是利用虚拟化的技术,将一台服务器划分出一定大小的空间,每个空间都给予单独的 FTP ...

  3. pandas之时间序列

    Pandas中提供了许多用来处理时间格式文本的方法,包括按不同方法生成一个时间序列,修改时间的格式,重采样等等. 按不同的方法生成时间序列 In [7]: import pandas as pd # ...

  4. 【C#数据结构系列】图

    一:图 图状结构简称图,是另一种非线性结构,它比树形结构更复杂.树形结构中的结点是一对多的关系,结点间具有明显的层次和分支关系.每一层的结点可以和下一层的多个结点相关,但只能和上一层的一个结点相关.而 ...

  5. 8、zabbix监控方式及分布式监控(04)

    zabbix支持的监控方式 zabbix所能够显示的且可指定为监控接口类型的监控方式: Agent passive active SNMP:Simple Network Management Prot ...

  6. [数据结构]P1.3 栈 Stack

    * 注: 本文/本系列谢绝转载,如有转载,本人有权利追究相应责任. 栈是一种先进后出的结构(FILO),常见的操作有:push 入栈.pop删除栈顶元素并返回.peek 查看栈顶元素 与其他线性结构一 ...

  7. 流畅的python笔记

    鸭子类型协议不完全总结序列:len,getitem切片:getitemv[0]分量的取值和写值:getitem和setitemv.x属性的取值和写值:getattr和setattr迭代:1)iter, ...

  8. webpack.optimize.UglifyJsPlugin配置说明

    https://segmentfault.com/a/1190000008995453?utm_source=tuicool&utm_medium=referral

  9. 移动端解决悬浮层(悬浮header、footer)会遮挡住内容的方法

    固定Footer Bootstrap框架提供了两种固定导航条的方式: ☑  .navbar-fixed-top:导航条固定在浏览器窗口顶部 ☑  .navbar-fixed-bottom:导航条固定在 ...

  10. 牛客练习赛23CD

    链接:https://www.nowcoder.com/acm/contest/156/C 来源:牛客网 题目描述 托米完成了1317的上一个任务,十分高兴,可是考验还没有结束 说话间1317给了托米 ...