在vue中通過(guò)axios異步使用echarts的方法

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

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

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

<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() {
 // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
 let myChart = this.$echarts.init(document.getElementById('myChart'))
 // 繪制圖表
 myChart.setOption({
 title: {}, //{text: '異步數(shù)據(jù)加載示例'},
 tooltip: {},
 xAxis: {
 data: [] //["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
 },
 yAxis: {},
 series: [{
 name: '銷(xiāo)量',
 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: '銷(xiāo)量',
 type: 'bar',
 data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
 }]
 });
 })
 }
 }
 }
</script>

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

 this.$http.get("./static/dat.json").then((res) => {
 setTimeout(() => { //未來(lái)讓加載動(dòng)畫(huà)效果明顯,這里加入了setTimeout,實(shí)現(xiàn)3s延時(shí)
 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(); //隱藏加載動(dòng)畫(huà)
 myChart.setOption({
 title: data.title,
 xAxis: [{
 data: data.xAxis.data
 }],
 series: [{
 name: '銷(xiāo)量',
 type: 'bar',
 data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
 }]
 });
 }, 3000)
 })
 }
 }