Organiser quelques configurations courantes d'echarts (avec des exemples de code)

Je n'entrerai pas dans l'utilisation de base des echarts. Il existe de nombreuses démos sur le site officiel, vous pouvez simplement les copier et les coller. Nous résumons ici principalement les configurations courantes de l’auteur dans l’entreprise.

1. Double axe Y

Lorsque vos données comportent plusieurs polylignes et que certaines lignes contiennent des données volumineuses et que certaines lignes contiennent de très petites données, si elles sont toutes placées sur un axe Y pour afficher les données, la quantité de les données seront Le petit sera très proche de l'axe X, de sorte que la tendance changeante des données ne puisse pas être vue. À ce moment, les données peuvent être affichées séparément. La grande quantité de données est affichée d'un côté. et la petite quantité de données est affichée de l'autre côté.

Il vous suffit de configurer options.yAxis, puis de configurer yAxisIndex pour chaque donnée dans options.series. , 1 a raison. options.yAxis，然后在options.series中，给每个数据配置yAxisIndex即可，0是左边，1是右边。

options = {
    series: [
        {
            data: [...],
            type: "line",
            yAxisIndex: 0,
        },
        {
            data: [...],
            type: "line",
            yAxisIndex: 1,
        },
        ...
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
    ],
}

2.loading效果

echarts自带了loading，在数据加载时可以调用showLoading()，取消加载时可以用hideLoading()

options = {
  title: {
    text: '此时间段暂无数据',
    textStyle: {
      color: 'black',
      fontWeight: 'normal',
      fontSize: 25,
    },
    left: '45%',
    top: '30%',
  },
};

2. L'effet de chargement

echarts est fourni avec le chargement Vous pouvez appeler showLoading() lors du chargement des données, et vous pouvez utiliser hideLoading().

3.espace réservé sans données

echarts ne fournit aucun bon espace réservé sans données, vous ne pouvez utiliser que la modification magique du titre. Lorsqu'il n'y a pas de données, effacez d'abord manuellement l'axe X et l'axe Y, puis ajoutez le titre lorsqu'il y a des données, supprimez le titre.

<br/>

4. Étiquettes avec des unités

L'étiquette par défaut des echarts n'a pas d'unités et les echarts fournissent la configuration des unités. Configurez simplement tooltip.valueFormatter dans chaque polyligne de la série.

Si vous n'êtes pas satisfait du style d'affichage des étiquettes, echarts vous permet également de personnaliser le html de l'étiquette. À ce stade, vous pouvez ajouter des unités dans le html du formateur.

La configuration est la suivante, changez-la selon votre propre projet : rrreee

🎜🎜

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!