ECharts - Impossible de créer une ligne de marquage verticale sur l'axe des temps (xAxis)

Question

Impossible d'ajouter des marqueurs verticaux à l'axe x lorsque le type d'axe est "temps". Je voulais ajouter des marqueurs qui représentent des événements sur l'axe du temps à des dates différentes.

Échantillon que j'ai essayé, https://jsfiddle.net/msbasanth/ez3cgm5d/3/

Lorsque le type de xAxis est 'catégorie' ou 'valeur', je suis en mesure d'ajouter la ligne de marquage sans problème. Voici comment j'ai défini markerLine dans xAxis.

 xAxis: {
          type: "time",
          axisTick: {
            show: false,
          },
          markLine: {
            data: [
     [
        {
            name: 'Mark line between two points',
            x: 100,
            y: 100
        },
        {
            x: 500,
            y: 200
        }
    ]
],
          }
        }

https://jsfiddle.net/msbasanth/2g614wzu/

Dans cet exemple, j'ai pu voir des marqueurs ajoutés à l'axe des x (type : "time") mais cela semble complexe et je vois qu'ils ont une approximation de l'axe des temps. Existe-t-il un moyen direct de placer un marqueur dans l'axe des temps sur des valeurs de date spécifiées ?

Answer 1

La ligne de démarcation dans echarts n'est pas liée à l'axe, elle est liée à la série.

Avec le type d'axe x comme temps, vous pouvez créer des lignes de marquage verticales en spécifiant la valeur de l'axe x comme chaîne de date dans la configuration de la ligne de marquage.

Reportez-vous au code ci-dessous, pour obtenir des lignes de démarcation verticales.

 series: [
      {
        data: data,
        type: "line",
        markLine: {
          data: [
          [
            { name: "Imp Day 01", xAxis: '1998-01-01',yAxis: 0  },
            { name: "end", xAxis: '1998-01-01',  yAxis:'max' },
          ],
          [
            { name: "Imp Day 02", xAxis: '1998-08-01', yAxis: 0 },
            { name: "end", xAxis: '1998-08-01', yAxis:'max' },
          ]
          ],
        },
        lineStyle: {
          color: "rgba(242, 145, 72, 1)",
        },
      },
    ]