Amchart integration With Vue-Js

Amchart integration With Vue-Js

::: Create A project with vue clI

::: Download Amchart JS file's from this URL
  → https://www.amcharts.com/download/
  
::: Extract in 
  → vueProjectName/static/

::: Include All Js Files in the vueProjectName/index.HTML file
  // **Path
  → <script src="../static/amcharts/amcharts.js"></script>
  → <script src="../static/amcharts/pie.js"></script>
  → <script src="../static/amcharts/plugins/export/export.min.js"></script>
  → <link rel="stylesheet" href="../static/amcharts/plugins/export/export.css" type="text/css" media="all" />
  → <script src="../static/amcharts/themes/light.js"></script>
  → <script src="../static/amcharts/plugins/dataloader/dataloader.min.js" type="text/javascript"></script>
  
::: Reference URL for Piechart (DEMO)
  → http://jsfiddle.net/api/post/library/pure/
  
::: Use 'Dataloader' instead of 'dataProvider' to Load Via Ajax 
  → 
    "dataLoader": {
        "url": "http://localhost:port/ApiUrl",
          "format": "json",
          "init": function ( options, chart ) {
            console.log( 'Loading started' );
          },
          "load": function ( options, chart ) {
            console.log( 'Loaded file: ' + options.url );
          },
          "complete": function ( chart ) {
            console.log( 'Woohoo! Finished loading' );
          },
          "error": function ( options, chart ) {
            console.log( 'Ummm something went wrong loading this file: ' + options.url );
          },
          "progress": function( totalPercent, filePercent, url ) {
            console.log( 'Total percent loaded: ' + Math.round( totalPercent ) );
          }
    },
      "valueField": "population",
      "titleField": "name",
      "startEffect": "elastic",       // easeOutSine, easeInSine, elastic, bounce
      "startDuration": 2,
      "labelRadius": 15,

::: URL JSON format →
            [
              {
                name: "Bangladesh",
                population: 1500
              },
              {
                name: "India",
                population: 9547
              },
              {
                name: "Nepal",
                population: 841
              },
              {
                name: "Vutan",
                population: 665
              }
          ]


::: Must Include tha CSS Style
  → Check Demo CSS style from that LINK → http://jsfiddle.net/api/post/library/pure/
  
::: Change 'Loading data...' TO Something else
  → URL : VueProjectName\static\amcharts\plugins\dataloader\dataloader.min.js
  → Search For → Loading data...
  → Replace With AnyThing.