axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数
1.vue-echarts 安装和组件引用
插件官网 https://github.com/ecomfe/vue-echarts
安装 npm install eacharts vue-echarts
页面引入 import ECharts from 'vue-echarts'
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line' // 折线图
import "echarts/lib/component/title" // 标题展示
import "echarts/lib/component/legend" // 图例展示
import "echarts/lib/component/tooltip" // 鼠标悬浮提示
2.API 接口获取方法(axios)和options 赋值
插件官网 https://github.com/axios/axios
1⃣️安装 npm install axios
main.js
import axios from 'axios'
Vue.prototype.$http = axios // axios 请求接口数据配置
covid_19.vue
import axios from 'axios'
// 使用
axios.get('/fy/get').then((result) => { 数据处理 })
2⃣️options 赋值
options 在 return 中赋值异步和同步获取得到的折线图动画异常(非匀速过度或无动画);建议将对象 options 放到 axios 回调函数中赋值
let self = this
axios.get("/fy/get").then((result) => {
let res = result.data
let tempTitle = eval('(' + res + ')').component[0]
let tempData = tempTitle.trend
console.log("****test*****", tempData)
self.covid = {
title: {// 标题
// text: '新增确诊/疑似病例',
text: tempTitle.title,
textStyle: {
fontWeight: "normal",
color: "green", // 标题颜色
fontSize: 14
},
// left: '50px'
},
legend:{
}
...省略代码块...
}
})
3.异步同步方法生(命周期函数一般函数)
异步方法
test () {
let self = this
axios.get("/fy/get").then((result) => {
let res = result.data
let tempTitle = eval('(' + res + ')').component[0]
let tempData = tempTitle.trend
console.log("****test*****", tempData)
self.covid = {
title: {// 标题
// text: '新增确诊/疑似病例',
text: tempTitle.title,
textStyle: {
fontWeight: "normal",
color: "green", // 标题颜色
fontSize: 14
},
// left: '50px'
},
legend: {// 图例
textStyle: {
fontSize: 14
},
data: ['疑似病例','新增病例'],
right:'right'
},
tooltip: {// 工具提示
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
// type: 'category',
data: tempData.updateDate, // 在x轴显示时间
axisLabel: { //横坐标字体颜色
show: true,
textStyle: {
color: "red"
}
},
axisLine: {
lineStyle: {
color: "red"
}
}
},
yAxis: {
type: 'value',
axisLabel: { //纵坐标字体颜色
show: true,
textStyle: {
color: "green"
}
},
axisLine: {
lineStyle: {
color: "green"
}
}
},
series: [
{// 一系列
type: 'line',
name: '新增病例',
color: 'blue', // 折线颜色
smooth: true,
data: tempData.list[4].data
},{// 一系列
type: 'line',
name: '疑似病例',
color: 'yellow', // 折线颜色
smooth: true,
data: tempData.list[5].data
}
],
animationDuration: 3000
}
同步方法
生命周期函数
async created(){
// 性能好于 beforeCreate (用时短 0.5s 左右) mounted (用时短 0.3s 左右)
console.log("mounted",)
let promisD = await this.func()
// console.log(promisD)
let tempTitle = eval('(' + promisD.data + ')').component[0] // 为了取 title
let tempData = tempTitle.trend // 目标数据
console.log("mounted", tempData.updateDate)
this.covid = {
title: {// 标题
// text: '新增确诊/疑似病例',
text: tempTitle.title,
textStyle: {
fontWeight: "normal",
color: "green", // 标题颜色
fontSize: 14
},
// left: '50px'
},
legend: {// 图例
textStyle: {
fontSize: 14
},
data: ['疑似病例','新增病例'],
right:'right'
},
tooltip: {// 工具提示
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
// type: 'category',
data: tempData.updateDate, // 在x轴显示时间
axisLabel: { //横坐标字体颜色
show: true,
textStyle: {
color: "red"
}
},
axisLine: {
lineStyle: {
color: "red"
}
}
},
yAxis: {
type: 'value',
axisLabel: { //纵坐标字体颜色
show: true,
textStyle: {
color: "green"
}
},
axisLine: {
lineStyle: {
color: "green"
}
}
},
series: [
{// 一系列
type: 'line',
name: '新增病例',
color: 'blue', // 折线颜色
smooth: true,
data: tempData.list[4].data
},{// 一系列
type: 'line',
name: '疑似病例',
color: 'yellow', // 折线颜色
smooth: true,
data: tempData.list[5].data
}
],
animationDuration: 3000
}
},
methods: {
func () { // axios 数据在不同场景下做不同的处理时(在对应的方法中取处理)或相同处理(返回数据直接在 then 中处理)
return new Promise((resolve, reject) => {
axios.get("/fy/get").then((res) => {
resolve(res)
}).catch((error) => {
reject(error)
})
})
// this.covid.xAxis.data = tempData.updateDate
},
}
一般函数
async initCovid () {
// 同 create
console.log("代码同 create 方法")
重点:axios 跨域代理配置
main.js
axios.defaults.baseURL = '/api' //关键代码 实际请求localhost:8080/api/fy/get/
vue.config.js
module.exports = {
devServer: {
proxy: { // 注意不是 proxyTable
'/api':{ // 找到 API 并替换前面地址
target: 'https://www.maomin.club', // 代理后真正请求 https://www.maomin.club/fy/get
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
注意:在 beforeCreate 生命周期函数中 获取 data 中数据方式 this.$options.data().属性
调用methods 中方法 this.$options.methods.func()
完整代码:
<template>
<v-chart class="echarts" :options="covid" :auto-resize="true"/>
</template> <script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import "echarts/lib/component/title"
import "echarts/lib/component/legend"
import "echarts/lib/component/tooltip"
import axios from 'axios'
var timerShaft = [], confirmedCase = [], suspectedCase = []
export default {
components: {
'v-chart': ECharts
},
data () { /**
* covid 在异步方法或同步方法中处理否则-后半折线动画异常(return 里赋值会失去动画效果)
* 1.axios 异步获取 created
* 2.axios 同步获取
*/
this.test() // 异步方法中处理数据
this.initCovid() // 同步方法中处理数据 (加载时间不稳定 2.5s - 1.5s 波动)
return {
covid:{}
}
},
beforeCreate(){
// 可以 修改 let promisD = await this.$options.methods.func()
// console.log("beforeCreate",)
},
/**
* 生命周期函数中处理
*/
// async created(){
// // 性能好于 beforeCreate (用时短 0.5s 左右) mounted (用时短 0.3s 左右)
// console.log("mounted",)
// let promisD = await this.func()
// // console.log(promisD)
// let tempTitle = eval('(' + promisD.data + ')').component[0] // 为了取 title
// let tempData = tempTitle.trend // 目标数据
// console.log("mounted", tempData.updateDate)
// this.covid = {
// title: {// 标题
// // text: '新增确诊/疑似病例',
// text: tempTitle.title,
// textStyle: {
// fontWeight: "normal",
// color: "green", // 标题颜色
// fontSize: 14
// },
// // left: '50px'
// },
// legend: {// 图例
// textStyle: {
// fontSize: 14
// },
// data: ['疑似病例','新增病例'],
// right:'right'
// },
// tooltip: {// 工具提示
// trigger: 'axis',
// axisPointer: {
// type: 'cross'
// }
// },
// xAxis: {
// // type: 'category',
// data: tempData.updateDate, // 在x轴显示时间
// axisLabel: { //横坐标字体颜色
// show: true,
// textStyle: {
// color: "red"
// }
// },
// axisLine: {
// lineStyle: {
// color: "red"
// }
// }
// },
// yAxis: {
// type: 'value',
// axisLabel: { //纵坐标字体颜色
// show: true,
// textStyle: {
// color: "green"
// }
// },
// axisLine: {
// lineStyle: {
// color: "green"
// }
// }
// },
// series: [
// {// 一系列
// type: 'line',
// name: '新增病例',
// color: 'blue', // 折线颜色
// smooth: true,
// data: tempData.list[4].data
// },{// 一系列
// type: 'line',
// name: '疑似病例',
// color: 'yellow', // 折线颜色
// smooth: true,
// data: tempData.list[5].data
// }
// ],
// animationDuration: 3000
// }
// }, methods: {
async initCovid () {
// 同 create
console.log("代码同 create 方法")
},
test () {
let self = this
axios.get("/fy/get").then((result) => {
let res = result.data
let tempTitle = eval('(' + res + ')').component[0]
let tempData = tempTitle.trend
console.log("****test*****", tempData)
self.covid = {
title: {// 标题
// text: '新增确诊/疑似病例',
text: tempTitle.title,
textStyle: {
fontWeight: "normal",
color: "green", // 标题颜色
fontSize: 14
},
// left: '50px'
},
legend: {// 图例
textStyle: {
fontSize: 14
},
data: ['疑似病例','新增病例'],
right:'right'
},
tooltip: {// 工具提示
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
// type: 'category',
data: tempData.updateDate, // 在x轴显示时间
axisLabel: { //横坐标字体颜色
show: true,
textStyle: {
color: "red"
}
},
axisLine: {
lineStyle: {
color: "red"
}
}
},
yAxis: {
type: 'value',
axisLabel: { //纵坐标字体颜色
show: true,
textStyle: {
color: "green"
}
},
axisLine: {
lineStyle: {
color: "green"
}
}
},
series: [
{// 一系列
type: 'line',
name: '新增病例',
color: 'blue', // 折线颜色
smooth: true,
data: tempData.list[4].data
},{// 一系列
type: 'line',
name: '疑似病例',
color: 'yellow', // 折线颜色
smooth: true,
data: tempData.list[5].data
}
],
animationDuration: 3000
}
}) },
func () { // axios 数据在不同场景下做不同的处理时(在对应的方法中取处理)或相同处理(返回数据直接在 then 中处理)
return new Promise((resolve, reject) => {
axios.get("/fy/get").then((res) => {
resolve(res)
}).catch((error) => {
reject(error)
})
})
// this.covid.xAxis.data = tempData.updateDate
},
monthDay () {
let currentDate = new Date();// 当天日期
let currentDay = currentDate.getDate();// 具体某一天
let month, date, confirmed=0, suspected=0// 定义变量 月和天
for (let i = 20; i >= 0; i-- ) {// 取14天包括当天
let accordDate = currentDate.setDate(currentDay - i);// 符合条件的日期
month = new Date(accordDate).getMonth() + 1
date = new Date(accordDate).getDate()
confirmed = confirmed + 100
suspected = suspected + 500
confirmedCase.push(confirmed)
suspectedCase.push(suspected)
timerShaft.push(month + '.' + date)
}
// console.log('eee', timerShaft)
// console.log('case', confirmedCase)
}
}
}
</script>
<style>
#container{
width: 100%;
height: 100%;
}
.echarts {
/* :auto-resize 自动大小默认是 false */
/* width: auto;
height: 50%; */
}
</style>
demo 地址: https://github.com/dopocheng/alone-part/tree/master/src/views/echarts/covid-19
axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数的更多相关文章
- vue学习过程总结（07） - vue的后台服务API封装及跨域问题的解决
以登录流程为例说明接口的封装. 1.登录调用后台的登录api 登录界面的代码 <template> <div class="login-page"> < ...
- 填个小坑，Vue不支持IE8及以下，跨域ajax不支持IE9
这特么就尴尬了,说好的Vue支持IE8及以下的呢,引入jquery,测试IE个浏览器,IE9仍然显示不正常, 然而命令行测试Vue仍然存在, 数据回不来!数据回不来!数据回不来! 好吧 肉包子打狗$ ...
- ASP.NET WebApi+Vue前后端分离之允许启用跨域请求
前言: 这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目.前端使用Vue,后端则是使用ASP.NET WebApi.在搭建完成前后端框架后,进行接口测试时发现了一个前后端分 ...
- axios FastMock 跨域 代理
发送请求: 实现:发送请求,获取数据. 原本想自己写服务,后来无意间找到FastMock这个东东,于是就有了下文... 首先我安装了axios,在fastmock注册好了并创建了一个接口,怎么搞自行百 ...
- vue跨域代理配置
实际:http://a.com/b.php 代理:http://localhost/b.php 配置config/index.js proxyTable: { '/api': { target:'ht ...
- 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...
- vue+django分离开发的思想和跨域问题的解决
一.介绍 在前后端分离的开发过程中,会涉及到跨域的问题,比如本次个人使用的Django+vue的框架,在vue对Django进行响应,Django再将响应的数据返回给vue,vue在进行渲染,如果不设 ...
- Vue+SpringBoot前后端分离中的跨域问题
在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不 ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
随机推荐
- C++符合类型：指针和引用
1. 引用(左值引用) 引用为对象起了另外一个名字,引用类型引用另外一种类型. int ival = 1024; int &refval = ival; //refval指向ival(是iva ...
- 高精度算法（C/C++）
高精度算法 (C/C++) 做ACM题的时候,经常遇到大数的加减乘除,乘幂,阶乘的计算,这时给定的数据类型往往不够表示最后结果,这时就需要用到高精度算法.高精度算法的本质是把大数拆成若干固定长度的块, ...
- 5分钟搭建网站实时分析：Grafana+日志服务实战
原文地址:https://yq.aliyun.com/articles/227006 阿里云日志服务是针对日志类数据一站式服务,用户只需要将精力集中在分析上,过程中数据采集.对接各种存储计算.数据索引 ...
- Python-直接存储类实例作为序列的元素
如果我们需要存储的数据有很多属性,并且存储的数量很多,可选择定义一个类来表示数据类型,而类的实体作为单个的成员进行存储,这样做的好处是可以只存储一个容器,而不需要每次都存储大量的数据,并且可以限制对数 ...
- 基准测试--->sysbench
sysbench sysbench简介 sysbench是跨平台的基准测试工具,支持多线程,支持多种数据库:主要包括以下几种测试: cpu性能 磁盘io性能 调度程序性能 内存分配及传输速度 POSI ...
- 什么是ip地址、子网掩码、网关和DNS？
什么是ip地址? IP是32位二进制数据,通常以十进制表示,并以“.”分隔.IP地址是一种逻辑地地址,用来标识网络中一个个主机,IP有唯一性,即每台机器的IP在全世界是唯一的. IP地址=网络地址+主 ...
- ActiveMQ 快速入门教程系列 第二章 发布-订阅者模式实现
第二章我们会介绍怎样实现一个发布者对多个订阅者的消息传递 Topic和queue的最大区别在于topic是以广播的形式,通知所有在线监听的客户端有新的消息,没有监听的客户端将收不到消息:而queue则 ...
- CUDA学习（七）之使用CUDA内置API计时
问题:对于使用GPU计算时,都想知道kernel函数运行所耗费的时间,使用CUDA内置的API可以方便准确的获得kernel运行时间. 在CPU上,可以使用clock()函数和GetTickCount ...
- Arduino系列之LCD1602模块使用方法（一）
下面我将简单介绍LCD1602模块的使用方法: 1602液晶显示器(1602 Liquid Crystal Display,此后简称1602 LCD)是一种常见的字符液晶显示器,因其能显示16*2个字 ...
- python笔记16
1.今日内容 模块基础知识 time/datetime json/picle shutil logging 其他 2.内容回顾和补充 2.1模块(类库) 内置 第三方 自定义 面试题: 列举常用内置模 ...