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 ...
随机推荐
- http请求头中的content-type属性
在HTTP请求中,我们每天都在使用Content-Type来指定不同格式的请求信息,但是却很少有人去全面了解Content-Type中允许的值有多少,因此这里来了解一下Content-Type的可用值 ...
- （数据科学学习手札73）盘点pandas 1.0.0中的新特性
本文对应脚本及数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 毫无疑问pandas已经成为基于Pytho ...
- Sublime Text 3 部分安装过程记录
概览: Sublime Text 3下载网址 Package Control的安装 Install Package报错(There are no packages availabel for inst ...
- xsd 和 wsdl
xsd : 可用方便 不同的语言之间的 用命令行来 转换对应语言的. wsdl: 可用方便不同语言的类描述 用命令行 来相互转换. 类似 thift me ?
- Lobooi 结对作业（24235+24229）
结队作业 GitHub项目地址 https://github.com/Lobooi/PairProgramming.git 伙伴博客地址 https://www.cnblogs.com/lanti/p ...
- 字符串(String)的创建，以及字符串的属性及方法
1.String对象的创建 方法1: var txt = new String("i am String"); console.log(txt); // 结果为:i am Stri ...
- hash算法与拉链法解决冲突
<?php class HashNode { public $key; public $value; public $nextNode; public function __construct( ...
- 曹工说Spring Boot源码（15）-- Spring从xml文件里到底得到了什么（context：load-time-weaver 完整解析）
写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...
- PAT乙级(Basic Level)真题，福尔摩斯的约会
题目描述 大侦探福尔摩斯接到一张奇怪的字条:“我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm”.大侦探很快就明 ...
- ceph问题
问题1: [root@admin-node my-cluster]# ceph -s cluster 4ca35731-2ccf-47fb-9f06-41fae858626d health HEALT ...