Utilisation simple des Echarts dans le projet Vue

Installer les dépendances Echarts

npm install echarts -S

Créer un graphique

Il doit d'abord être introduit globalement
dans main.js

// 引入 Echarts 
importe les echarts depuis 'echarts' 
Vue.prototype. $ Echarts = echarts

Dans index.vue

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

<script> 
export par défaut { 
  data () { 
    return { 
    } 
  }, 
    mount 
  () { this .drawLine (); 
  }, 
  méthodes: { 
    drawLine () { 
        // Initialiser l'instance 
        Echarts laisser myChart = this . $ echarts.init (document.getElementById ('myChart' ))
         // Dessiner un graphique 
        myChart .setOption ({ 
            title: {text: 'Simple Echarts in Vue' }, 
            info - bulle:{},{}, 
            xAxis: {
                données: [ "Chemise", "Cardigan", "Chemise en mousseline de soie", "Pantalon", "Talons hauts", "Chaussettes" ] 
            }, 
            yAxis: {}, 
            série: [{ 
                nom: 'Ventes' , 
                tapez: 'bar' , 
                données: [ 5, 20, 36, 10, 10, 20 ] 
            }] 
        }); 
    } 
  } 
}
 </ script>

Finition: dessus