vue中如何使用echarts,使用axios獲取數據

1==》首先准備一個容器

  <div id="echartContainer" style="width:400px; height:400px"></div> <!--創建一個echarts的容器-->

2==>在當前的頁面中使用axios 

     引入放在本地在static文件中的靜態文件op.js

     引入echarts

import axios from 'axios';

將數據格式放在js文件中 等會將他暴露出去

import {option} from '../../../static/op.js'

  引入echarts模塊

  var echarts = require('echarts');

op.js文件如下，它黎曼是配置好了的參數

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

 

3==》在調用methods中寫一個方法，在mounted中去調用

     mounted() {
        // 調用這個函數  在節點創建完成之后
        this.drawBarChart();        
    },

 

4==>在methods中寫一個方法

 methods:{
      drawBarChart() {
            // 基於准備好的dom，初始化echarts實例
            var myChart = this.echarts.init(document.getElementById('echartContainer'));
            // 繪制基本圖表
            myChart.setOption(option); //option是一個詳細的配置參數          
            //沒有加載出來顯示加載動畫
            myChart.showLoading();
            //獲取數據
            axios.get('../../static/b.json').then(res => {   
                  setTimeout(()=>{  //未來讓加載動畫效果明顯,這里加入了setTimeout,實現2s延時
                    myChart.hideLoading(); //沒有加載出來隱藏加載動畫
                    myChart.setOption({  //動畫的配置
                        series: [{
                        data: res.data.product  //這里數據是一個數組的形似
                        }]
                    })
                    }, 2000 )
            })
            },    

b.json的參數也是如下的

{
    "product" : [5, 20, 36, 10, 10, 20]
}