Comment s'assurer que l'étiquette du deuxième axe x dans Echarts double axe x est visible?

Echarts Dual X-Axe: Comment s'assurer que la deuxième étiquette de l'axe X est visible?

Lors de la création de deux graphiques à axe X à l'aide d'écharts, les étiquettes du deuxième axe X se cachent ou se chevauchent souvent, affectant la lisibilité du graphique. Cet article explique comment résoudre ce problème grâce à une analyse de cas.

Voici un exemple courant de mauvaise configuration:

 xaxis: [{
    Nom: «x axe 1»,
    Min: Démarrage,
    Échelle: vrai,
    axisline: {show: true, linestyle: {colore: couleurs [2]}},
    axisLabel: {backgroundColor: 'Red', format: '{valeur} ml'}
  }, {
    Nom: «x axe 2»,
    axisline: {show: true, linestyle: {colore: couleurs [2]}},
    Min: Démarrage,
    Échelle: vrai,
    axisLabel: {backgroundColor: 'Red', à l'intérieur: true, show: true, hideoverlap: true}
  }]

Même si show: true est défini, les étiquettes du deuxième axe X peuvent toujours ne pas être affichées. Le problème est la configuration des données series .

Solution:

La clé est d'associer correctement series avec le deuxième axe X. Dans la configuration series , vous devez ajouter xAxisIndex: 1 à la série de données qui doit utiliser le deuxième axe x. Voici une configuration series modifiée:

 série: [{
      Type: «Custom»,
      RendeRetem: Renderitem,
      itemStyle: {opacité: 0,8},
      Encoder: {x: [1, 2], y: 0},
      Données: données
    }, {
      Type: «Custom»,
      RendeRetem: Renderitem,
      xaxisIndex: 1, // indique l'utilisation du deuxième élément de l'axe x: {opacité: 0,8},
      Encoder: {x: [1, 2], y: 0},
      Données: données
    }]

En définissant xAxisIndex: 1 , spécifiez explicitement que la série de données utilise le deuxième axe x pour s'assurer que l'étiquette du deuxième axe X est affichée correctement.

Il convient de noter que cette méthode peut avoir le problème du rendu redondant des données. Si vos données de graphique sont importantes, il est recommandé d'explorer de meilleures solutions pour améliorer les performances. Tout le monde est invité à partager des méthodes d'optimisation plus efficaces.

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!