在vue中通過axios異步使用echarts的方法

來源：懂視網責編：小采時間：2020-11-27 22:21:24

在vue中通過axios異步使用echarts的方法

在vue中通過axios異步使用echarts的方法:現實的工作中, 數據不可能是像之前的demo演示的那樣把數據寫死的. 所有的數據都應該通過發送請求進行獲取, 所以, 這篇文章, 我將在Vue項目中使用Echarts: 在Vue中引入Echarts中的數據提取出來, 放入到static/data.json文件中,請求該文件獲取數據。

推薦度：

點擊下載本文 文檔為doc格式

導讀在vue中通過axios異步使用echarts的方法:現實的工作中, 數據不可能是像之前的demo演示的那樣把數據寫死的. 所有的數據都應該通過發送請求進行獲取, 所以, 這篇文章, 我將在Vue項目中使用Echarts: 在Vue中引入Echarts中的數據提取出來, 放入到static/data.json文件中,請求該文件獲取數據。

現實的工作中, 數據不可能是像之前的demo演示的那樣把數據寫死的. 所有的數據都應該通過發送請求進行獲取, 所以, 這篇文章, 我將在Vue項目中使用Echarts: 在Vue中引入Echarts中的數據提取出來, 放入到static/data.json文件中,請求該文件獲取數據。

一、實現異步加載數據

(一)引入vue-resource

通過npm下載axios

//命令行中輸入
npm install axios --save

在main.js中引入axios并注冊

// main.js
import http from './http'
Vue.prototype.$http = http //掛載到原型上

(二)設置data.json

將該柱狀圖的沒有數據的option抽取到data.json中, 代碼如下:

 {
 "title": { "text": "簡單餅狀圖" },
 "tooltip": {},
 "xAxis": {
 "data": ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"],
 "name": "產品"
 },
 "yAxis": {},
 "series": [{
 "name": "銷量",
 "type": "bar",
 "data": [5, 20, 36, 10, 10, 20],
 "itemStyle": { 
 "normal": {
 "color": "hotpink"
 }
 }
 }]
}

(三)在async-bar-chart.vue中請求數據

從aysnc-barChart-option.js中引入option
在methods中添加drawBarChart()方法
在mounted()鉤子函數中調用drawBarChart()

代碼如下:

<template>
 <div id="myChart" :style="{width: '800px', height: '400px'}"></div>
</template>

<script>
 export default {
 name: 'echarts',
 data() {
 return {
 msg: 'Welcome to Your Vue.js App',
 goods: {}
 }
 },
 mounted() {
 this.drawLine();
 },
 created() {
 this.$http.get('./static/dat.json').then(res => {
 const data = res.data;
 this.goods = data
 console.log(this.goods);
 console.log(Array.from(this.goods.xAxis.data));
 })
 },
 methods: {
 drawLine() {
 // 基于準備好的dom，初始化echarts實例
 let myChart = this.$echarts.init(document.getElementById('myChart'))
 // 繪制圖表
 myChart.setOption({
 title: {}, //{text: '異步數據加載示例'},
 tooltip: {},
 xAxis: {
 data: [] //["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
 },
 yAxis: {},
 series: [{
 name: '銷量',
 type: 'bar',
 data: [] //[5, 20, 36, 10, 10, 20]
 }]
 });
 this.$http.get("./static/dat.json") .then((res) => {
 const data = res.data;
 const list = data.series.map(good=>{
 let list = good.data;
 return [...list]
 })
 console.log(list);
 console.log(Array.from(...list));
 myChart.setOption({
 title: data.title,
 xAxis: [{
 data: data.xAxis.data
 }],
 series: [{
 name: '銷量',
 type: 'bar',
 data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
 }]
 });
 })
 }
 }
 }
</script>

二. 添加加載動畫

如果數據加載時間較長，一個空的坐標軸放在畫布上也會讓用戶覺得是不是產生 bug 了，因此需要一個 loading 的動畫來提示用戶數據正在加載。

ECharts 默認有提供了一個簡單的加載動畫。只需要調用 showLoading 方法顯示。數據加載完成后再調用 hideLoading 方法隱藏加載動畫。

在drawLine()方法中添加showLoading()和hideLoading(), 代碼如下:

 methods: {
 drawLine() {
 // 基于準備好的dom，初始化echarts實例
 let myChart = this.$echarts.init(document.getElementById('myChart'))
 // 繪制圖表
 myChart.setOption({
 title: {}, //{text: '異步數據加載示例'},
 tooltip: {},
 xAxis: {
 data: [] //["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
 },
 yAxis: {},
 series: [{
 name: '銷量',
 type: 'bar',
 data: [] //[5, 20, 36, 10, 10, 20]
 }]
 });
 //顯示加載動畫
 myChart.showLoading();

 this.$http.get("./static/dat.json").then((res) => {
 setTimeout(() => { //未來讓加載動畫效果明顯,這里加入了setTimeout,實現3s延時
 const data = res.data;
 const list = data.series.map(good => {
 let list = good.data;
 return [...list]
 })
 console.log(list);
 console.log(Array.from(...list));
 myChart.hideLoading(); //隱藏加載動畫
 myChart.setOption({
 title: data.title,
 xAxis: [{
 data: data.xAxis.data
 }],
 series: [{
 name: '銷量',
 type: 'bar',
 data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
 }]
 });
 }, 3000)
 })
 }
 }

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

在vue中通過axios異步使用echarts的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 使用的異步

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

在vue中通過axios異步使用echarts的方法

在vue中通過axios異步使用echarts的方法

在vue中通過axios異步使用echarts的方法

最新推薦

猜你喜歡

熱門推薦