axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数
Posted HappyHacking!
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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.异步同步方法生(命周期函数一般函数)
异步方法
1 test () { 2 let self = this 3 axios.get("/fy/get").then((result) => { 4 let res = result.data 5 let tempTitle = eval(‘(‘ + res + ‘)‘).component[0] 6 let tempData = tempTitle.trend 7 console.log("****test*****", tempData) 8 self.covid = { 9 title: {// 标题 10 // text: ‘新增确诊/疑似病例‘, 11 text: tempTitle.title, 12 textStyle: { 13 fontWeight: "normal", 14 color: "green", // 标题颜色 15 fontSize: 14 16 }, 17 // left: ‘50px‘ 18 }, 19 legend: {// 图例 20 textStyle: { 21 fontSize: 14 22 }, 23 data: [‘疑似病例‘,‘新增病例‘], 24 right:‘right‘ 25 }, 26 tooltip: {// 工具提示 27 trigger: ‘axis‘, 28 axisPointer: { 29 type: ‘cross‘ 30 } 31 }, 32 xAxis: { 33 // type: ‘category‘, 34 data: tempData.updateDate, // 在x轴显示时间 35 axisLabel: { //横坐标字体颜色 36 show: true, 37 textStyle: { 38 color: "red" 39 } 40 }, 41 axisLine: { 42 lineStyle: { 43 color: "red" 44 } 45 } 46 }, 47 yAxis: { 48 type: ‘value‘, 49 axisLabel: { //纵坐标字体颜色 50 show: true, 51 textStyle: { 52 color: "green" 53 } 54 }, 55 axisLine: { 56 lineStyle: { 57 color: "green" 58 } 59 } 60 }, 61 series: [ 62 {// 一系列 63 type: ‘line‘, 64 name: ‘新增病例‘, 65 color: ‘blue‘, // 折线颜色 66 smooth: true, 67 data: tempData.list[4].data 68 },{// 一系列 69 type: ‘line‘, 70 name: ‘疑似病例‘, 71 color: ‘yellow‘, // 折线颜色 72 smooth: true, 73 data: tempData.list[5].data 74 } 75 ], 76 animationDuration: 3000 77 }
同步方法
生命周期函数
1 async created(){ 2 // 性能好于 beforeCreate (用时短 0.5s 左右) mounted (用时短 0.3s 左右) 3 console.log("mounted",) 4 let promisD = await this.func() 5 // console.log(promisD) 6 let tempTitle = eval(‘(‘ + promisD.data + ‘)‘).component[0] // 为了取 title 7 let tempData = tempTitle.trend // 目标数据 8 console.log("mounted", tempData.updateDate) 9 this.covid = { 10 title: {// 标题 11 // text: ‘新增确诊/疑似病例‘, 12 text: tempTitle.title, 13 textStyle: { 14 fontWeight: "normal", 15 color: "green", // 标题颜色 16 fontSize: 14 17 }, 18 // left: ‘50px‘ 19 }, 20 legend: {// 图例 21 textStyle: { 22 fontSize: 14 23 }, 24 data: [‘疑似病例‘,‘新增病例‘], 25 right:‘right‘ 26 }, 27 tooltip: {// 工具提示 28 trigger: ‘axis‘, 29 axisPointer: { 30 type: ‘cross‘ 31 } 32 }, 33 xAxis: { 34 // type: ‘category‘, 35 data: tempData.updateDate, // 在x轴显示时间 36 axisLabel: { //横坐标字体颜色 37 show: true, 38 textStyle: { 39 color: "red" 40 } 41 }, 42 axisLine: { 43 lineStyle: { 44 color: "red" 45 } 46 } 47 }, 48 yAxis: { 49 type: ‘value‘, 50 axisLabel: { //纵坐标字体颜色 51 show: true, 52 textStyle: { 53 color: "green" 54 } 55 }, 56 axisLine: { 57 lineStyle: { 58 color: "green" 59 } 60 } 61 }, 62 series: [ 63 {// 一系列 64 type: ‘line‘, 65 name: ‘新增病例‘, 66 color: ‘blue‘, // 折线颜色 67 smooth: true, 68 data: tempData.list[4].data 69 },{// 一系列 70 type: ‘line‘, 71 name: ‘疑似病例‘, 72 color: ‘yellow‘, // 折线颜色 73 smooth: true, 74 data: tempData.list[5].data 75 } 76 ], 77 animationDuration: 3000 78 } 79 }, 80 methods: { 81 func () { // axios 数据在不同场景下做不同的处理时(在对应的方法中取处理)或相同处理(返回数据直接在 then 中处理) 82 return new Promise((resolve, reject) => { 83 axios.get("/fy/get").then((res) => { 84 resolve(res) 85 }).catch((error) => { 86 reject(error) 87 }) 88 }) 89 // this.covid.xAxis.data = tempData.updateDate 90 }, 91 }
一般函数
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()
完整代码:
1 <template> 2 <v-chart class="echarts" :options="covid" :auto-resize="true"/> 3 </template> 4 5 <script> 6 import ECharts from ‘vue-echarts‘ 7 import ‘echarts/lib/chart/line‘ 8 import "echarts/lib/component/title" 9 import "echarts/lib/component/legend" 10 import "echarts/lib/component/tooltip" 11 import axios from ‘axios‘ 12 var timerShaft = [], confirmedCase = [], suspectedCase = [] 13 export default { 14 components: { 15 ‘v-chart‘: ECharts 16 }, 17 data () { 18 19 /** 20 * covid 在异步方法或同步方法中处理否则-后半折线动画异常(return 里赋值会失去动画效果) 21 * 1.axios 异步获取 created 22 * 2.axios 同步获取 23 */ 24 this.test() // 异步方法中处理数据 25 this.initCovid() // 同步方法中处理数据 (加载时间不稳定 2.5s - 1.5s 波动) 26 return { 27 covid:{} 28 } 29 }, 30 beforeCreate(){ 31 // 可以 修改 let promisD = await this.$options.methods.func() 32 // console.log("beforeCreate",) 33 }, 34 /** 35 * 生命周期函数中处理 36 */ 37 // async created(){ 38 // // 性能好于 beforeCreate (用时短 0.5s 左右) mounted (用时短 0.3s 左右) 39 // console.log("mounted",) 40 // let promisD = await this.func() 41 // // console.log(promisD) 42 // let tempTitle = eval(‘(‘ + promisD.data + ‘)‘).component[0] // 为了取 title 43 // let tempData = tempTitle.trend // 目标数据 44 // console.log("mounted", tempData.updateDate) 45 // this.covid = { 46 // title: {// 标题 47 // // text: ‘新增确诊/疑似病例‘, 48 // text: tempTitle.title, 49 // textStyle: { 50 // fontWeight: "normal", 51 // color: "green", // 标题颜色 52 // fontSize: 14 53 // }, 54 // // left: ‘50px‘ 55 // }, 56 // legend: {// 图例 57 // textStyle: { 58 // fontSize: 14 59 // }, 60 // data: [‘疑似病例‘,‘新增病例‘], 61 // right:‘right‘ 62 // }, 63 // tooltip: {// 工具提示 64 // trigger: ‘axis‘, 65 // axisPointer: { 66 // type: ‘cross‘ 67 // } 68 // }, 69 // xAxis: { 70 // // type: ‘category‘, 71 // data: tempData.updateDate, // 在x轴显示时间 72 // axisLabel: { //横坐标字体颜色 73 // show: true, 74 // textStyle: { 75 // color: "red" 76 // } 77 // }, 78 // axisLine: { 79 // lineStyle: { 80 // color: "red" 81 // } 82 // } 83 // }, 84 // yAxis: { 85 // type: ‘value‘, 86 // axisLabel: { //纵坐标字体颜色 87 // show: true, 88 // textStyle: { 89 // color: "green" 90 // } 91 // }, 92 // axisLine: { 93 // lineStyle: { 94 // color: "green" 95 // } 96 // } 97 // }, 98 // series: [ 99 // {// 一系列 100 // type: ‘line‘, 101 // name: ‘新增病例‘, 102 // color: ‘blue‘, // 折线颜色 103 // smooth: true, 104 // data: tempData.list[4].data 105 // },{// 一系列 106 // type: ‘line‘, 107 // name: ‘疑似病例‘, 108 // color: ‘yellow‘, // 折线颜色 109 // smooth: true, 110 // data: tempData.list[5].data 111 // } 112 // ], 113 // animationDuration: 3000 114 // } 115 // }, 116 117 methods: { 118 async initCovid () { 119 // 同 create 120 console.log("代码同 create 方法") 121 }, 122 test () { 123 let self = this 124 axios.get("/fy/get").then((result) => { 125 let res = result.data 126 let tempTitle = eval(‘(‘ + res + ‘)‘).component[0] 127 let tempData = tempTitle.trend 128 console.log("****test*****", tempData) 129 self.covid = { 130 title: {// 标题 131 // text: ‘新增确诊/疑似病例‘, 132 text: tempTitle.title, 133 textStyle: { 134 fontWeight: "normal", 135 color: "green", // 标题颜色 136 fontSize: 14 137 }, 138 // left: ‘50px‘ 139 }, 140 legend: {// 图例 141 textStyle: { 142 fontSize: 14 143 }, 144 data: [‘疑似病例‘,‘新增病例‘], 145 right:‘right‘ 146 }, 147 tooltip: {// 工具提示 148 trigger: ‘axis‘, 149 axisPointer: { 150 type: ‘cross‘ 151 } 152 }, 153 xAxis: { 154 // type: ‘category‘, 155 data: tempData.updateDate, // 在x轴显示时间 156 axisLabel: { //横坐标字体颜色 157 show: true, 158 textStyle: { 159 color: "red" 160 } 161 }, 162 axisLine: { 163 lineStyle: { 164 color: "red" 165 } 166 } 167 }, 168 yAxis: { 169 type: ‘value‘, 170 axisLabel: { //纵坐标字体颜色 171 show: true, 172 textStyle: { 173 color: "green" 174 } 175 }, 176 axisLine: { 177 lineStyle: { 178 color: "green" 179 } 180 } 181 }, 182 series: [ 183 {// 一系列 184 type: ‘line‘, 185 name: ‘新增病例‘, 186 color: ‘blue‘, // 折线颜色 187 smooth: true, 188 data: tempData.list[4].data 189 },{// 一系列 190 type: ‘line‘, 191 name: ‘疑似病例‘, 192 color: ‘yellow‘, // 折线颜色 193 smooth: true, 194 data: tempData.list[5].data 195 } 196 ], 197 animationDuration: 3000 198 } 199 }) 200 201 }, 202 func () { // axios 数据在不同场景下做不同的处理时(在对应的方法中取处理)或相同处理(返回数据直接在 then 中处理) 203 return new Promise((resolve, reject) => { 204 axios.get("/fy/get").then((res) => { 205 resolve(res) 206 }).catch((error) => { 207 reject(error) 208 }) 209 }) 210 // this.covid.xAxis.data = tempData.updateDate 211 }, 212 monthDay () { 213 let currentDate = new Date();// 当天日期 214 let currentDay = currentDate.getDate();// 具体某一天 215 let month, date, confirmed=0, suspected=0// 定义变量 月和天 216 for (let i = 20; i >= 0; i-- ) {// 取14天包括当天 217 let accordDate = currentDate.setDate(currentDay - i);// 符合条件的日期 218 month = new Date(accordDate).getMonth() + 1 219 date = new Date(accordDate).getDate() 220 confirmed = confirmed + 100 221 suspected = suspected + 500 222 confirmedCase.push(confirmed) 223 suspectedCase.push(suspected) 224 timerShaft.push(month + ‘.‘ + date) 225 } 226 // console.log(‘eee‘, timerShaft) 227 // console.log(‘case‘, confirmedCase) 228 } 229 } 230 } 231 </script> 232 <style> 233 #container{ 234 width: 100%; 235 height: 100%; 236 } 237 .echarts { 238 /* :auto-resize 自动大小默认是 false */ 239 /* width: auto; 240 height: 50%; */ 241 } 242 </style>
demo 地址: https://github.com/dopocheng/alone-part/tree/master/src/views/echarts/covid-19
以上是关于axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数的主要内容，如果未能解决你的问题，请参考以下文章
promise/axios async/await使用方法汇总
Vue 接口 promise + fetch + axios + async 和 await
Vue 接口 promise + fetch + axios + async 和 await