1. Conversion d'un thème ECharts basique en variables CSS
Développeur Front-EndContexte
Un développeur doit intégrer un graphique ECharts dans une application web et souhaite réutiliser sa palette de couleurs comme variables CSS globales.
Problème
Extraire manuellement les couleurs et la taille de police par défaut du JSON du thème prend du temps et présente des risques d'erreurs de copie.
Utilisation
Collez le JSON du thème contenant la palette de couleurs et le style de texte, choisissez le format 'Variables CSS', définissez le préfixe 'chart' et activez la normalisation hexadécimale.
{
"color": ["#5470c6", "#91cc75", "#fac858"],
"backgroundColor": "rgb(255, 255, 255)",
"textStyle": { "fontSize": 12, "color": "#333333" }
}Résultat
Génération d'un bloc CSS :root contenant les variables --chart-color-1, --chart-background-color et --chart-text-style-font-size prêtes à être insérées dans le fichier CSS du projet.