L'intégration de visualisations cartographiques dans un environnement Vue 3 avec ECharts 5 présente certains défis, notamment depuis que les fichiers de cartes ne sont plus fournis nativement avec la bibliothèque. Ce guide technique détaille comment charger des données géographiques, configurer un proxy de développement pour éviter les erreurs CORS et initialiser correctement le rendu.

1. Gestion des fichiers de cartes JSON

Depuis la version 5.0 d'ECharts, les fichiers de cartes (comme china.json ou world.json) doivent être fournis manuellement. Deux approches principales existent :

A. Chargement depuis le répertoire public

Dans un projet Vue 3, les ressources statiques placées dans le dossier /public sont accessibles via un chemin absolu. Il est recommandé de créer un sous-dossier /public/maps/.

import * as echarts from "echarts";
// Importation directe si le fichier est traité par le bundler
import donneesGeo from "/public/maps/region_france.json";

B. Utilisation de packages tiers

Il est également possible d'installer des bibliothèques contanant les fichiers de géométrie via NPM, puis de les importer directement danss vos composants.

2. Résolution des problèmes de跨域 (CORS) avec Axios

Lors de la récupération de fichiers JSON depuis un serveur distant ou une API, vous renconrterez probablement des restrictions de politique de même origine (Same-Origin Policy). Pour le développement, la solution consiste à configurer un proxy dans vue.config.js.

// vue.config.js
module.exports = {
 devServer: {
   proxy: {
     '/serveur-api': {
       target: 'https://echarts.apache.org', 
       changeOrigin: true,
       pathRewrite: {
         '^/serveur-api': ''
       }
     }
   }
 }
};

3. Implémentation asynchrone et cycle de vie

L'une des erreurs courantes consiste à tenter d'initialiser ECharts avant que les données Axios ne soient complètement chargées. L'utilisation de async/await permet de garantir l'ordre d'exécution.

<template>
 <div class="conteneur-visualisation">
   <div id="carte-echarts" style="width: 100%; height: 500px;"></div>
 </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
 name: "ComposantCarte",
 data() {
   return {
     instanceChart: null,
     donneesStats: []
   };
 },
 methods: {
   async preparerDonnees() {
     try {
       // Récupération des statistiques via une API fictive
       const reponseStats = await axios.get("http://localhost:8081/api/stats-regions");
       this.donneesStats = reponseStats.data.liste;

       // Récupération du fond de carte via le proxy configuré
       const reponseGeo = await axios.get("/serveur-api/examples/data/asset/geo/USA.json");
       
       this.initialiserGraphique(reponseGeo.data);
     } catch (erreur) {
       console.error("Erreur de chargement :", erreur);
     }
   },

   initialiserGraphique(structureGeo) {
     const domElement = document.getElementById("carte-echarts");
     this.instanceChart = echarts.init(domElement);

     // Enregistrement de la carte auprès d'ECharts
     echarts.registerMap("ZoneGeo", structureGeo);

     const configuration = {
       title: {
         text: "Densité de Population",
         left: "center"
       },
       tooltip: {
         trigger: "item"
       },
       visualMap: {
         min: 0,
         max: 5000000,
         text: ["Élevé", "Bas"],
         calculable: true,
         inRange: {
           color: ["#e0f3f8", "#ffffbf", "#f46d43"]
         }
       },
       series: [
         {
           name: "Données régionales",
           type: "map",
           map: "ZoneGeo",
           roam: true,
           data: this.donneesStats
         }
       ]
     };

     this.instanceChart.setOption(configuration);
   }
 },
 mounted() {
   this.preparerDonnees();
 }
};
</script>

4. Points de vigilance techniques

• Cycle de vie : Toujours initialiser l'instance ECharts dans le hook mounted(), car l'élément DOM doit exister.
• Asynchronisme : Si vous n'utilisez pas async/await, assurez-vous que la méthode setOption est appelée à l'intérieur du bloc .then() de votre promesse Axios.
• Nettoyage : Pour éviter les fuites de mémoire, détruisez l'instance ECharts avec this.instanceChart.dispose() dans le hook beforeUnmount().
• Réactivité : Si les données changent fréquemment, utilisez un watch sur vos données pour appeler à nouveau setOption avec les nouvelles valeurs sans réinitialiser toute la carte.