Comment utiliser les graphiques électroniques dans Vue.JS

Cette fois, je vais vous montrer comment utiliser les echarts dans Vue.JS et quelles sont les précautions pour utiliser les echarts dans Vue.JS. Ce qui suit est un cas pratique, jetons un coup d'œil.

L'article précédent vous a présenté un exemple détaillé d'utilisation d'ECharts dans webpack. Vous pouvez cliquer pour le voir.

1. Installer à l'aide de NPM (importation globale)

Exécutez la commande suivante :

npm install echarts--save

Introduisez les echarts module

Introduisez le module echarts dans le main.js du projet Vue, c'est-à-dire écrivez le code suivant :

import echarts from 'echarts'
Vue.prototype.$echarts = echarts；

2. L'importation globale ci-dessus regroupera tous les graphiques echarts, ce qui rendra la taille trop grande. Pour résoudre ce problème, je peux utiliser

require

pour importer à la demande, cela. c'est-à-dire, importez ce qui est nécessaire : est :

3. Citez directement

let echarts = require('echarts/lib/echarts')

globalement dans le fichier index.html et utilisez la balise script pour introduire

Remarque : écrivez le chemin des echarts dans src ;

<script src="/static/js/echarts/echarts.js"></script>

Recherchez ensuite webpack.base.conf.js dans le répertoire de construction du projet vue, Fichier de configuration

, dans module.exports Ajoutez l'attribut externals à l'objet, puis configurez le chemin où se trouve echarts :

module.exports = {
.....
externals: {
// 路径：命名空间
 'echarts/dist/echarts':'echarts',
}
}；

Je vous crois J'ai maîtrisé la méthode après avoir lu le cas dans cet article. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Obtenez la progression du téléchargement du fichier directement depuis le serveur

Comment utiliser le sélecteur de date

Utilisation du modèle ejsExcel dans Vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!