vue-echarts, 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                 }
View Code

　　同步方法

生命周期函数

 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 }
View Code

一般函数

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>
View Code

 

demo 地址: https://github.com/dopocheng/alone-part/tree/master/src/views/echarts/covid-19

 

posted @ 2020-02-28 10:17  HappyHacking!  阅读(670)  评论(0)  编辑  收藏  举报