vue how to use echarts, obtain data using axios

1 == "first prepare a container

  < Div the above mentioned id = "echartContainer" style = "width: 400px; height: 400px" > </ div >  <-! Creating a container of echarts ->

2 ==> Use axios and the introduction of the current page on the local static file in the static file op.js introduced echarts

  Axios from Import 'Axios' ; 
  Import} from {Option '../../../static/op.js'   // data format will now js files he is exposed to moderate

   // npm mounted through the upper and ECharts require ( 'echarts') obtained ECharts

   eCharts var = require ( 'eCharts');

op.js following documents, which Riemann is a good distribution of parameters

Option = const Export { 
    title: {text: 'Simple pie' }, 
    ToolTip: {}, 
    XAXIS: { 
        Data: [ "Shirt", "sweater", "chiffon shirt", "pants", " high-heeled shoes, "" socks " ], 
        name: 'products' 
    }, 
    YAXIS: {}, 
    Series: [{ 
        name: ' sales' , 
        type: 'bar' , 
        Data: [], 
        ItemStyle: {    
            Normal: { 
              Color: ' HotPink ' 
            } 
        } 
    }] 
}

 

 

3 == "Write in a method invocation methods, when mounted to the call

     Mounted () {
         // This function is called after the node created 
        the this .drawBarChart ();         
    },

 

3 ==> write a method in methods of

Methods: { 
      drawBarChart () { 
            // based ready dom, instance initialization echarts 
            var myChart = the this .echarts.init (document.getElementById ( 'echartContainer' ));
             // draw the basic diagram 
            myChart.setOption (Option); / / Option is a detailed configuration parameters 
          
            // is not loaded it loads the animation display 
      myChart.showLoading ();
             // get the data 
            axios.get ( '../../ static / b.json' ) then (res =>. {    
                  the setTimeout (() => {   // future make loading animation effect is obvious, here joined the setTimeout, achieved 2s delay 
                    myChart.hideLoading (); // no load out of hiding loading animation
                    myChart.setOption ({   // animation configuration 
                        Series: [{ 
                        Data: res.data.product   // here is the shape of an array of data 
                        }] 
                    }) 
                    }, 2000 ) 
            }) 
            },    

The following parameters are also b.json

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