Echarts Dual X 축에서 두 번째 x 축의 레이블이 표시되는지 확인하는 방법은 무엇입니까?

Echarts Dual X-Axis : 두 번째 X 축 레이블이 보이는 방법은 무엇입니까?

Echarts를 사용하여 듀얼 X 축 차트를 만들 때 두 번째 X 축의 레이블은 종종 숨거나 겹치므로 차트의 가독성에 영향을 미칩니다. 이 기사에서는 사례 분석을 통해이 문제를 해결하는 방법을 설명합니다.

오해의 일반적인 예는 다음과 같습니다.

 Xaxis : [{
    이름 : 'X Axis 1',
    MIN : STARTTIME,
    스케일 : 사실,
    Axisline : {show : true, linestyle : {color : color [2]}},
    axisLabel : {backgroundColor : 'red', formatter : '{value} ml'}
  }, {
    이름 : 'X Axis 2',
    Axisline : {show : true, linestyle : {color : color [2]}},
    MIN : STARTTIME,
    스케일 : 사실,
    axisLabel : {backgroundColor : 'Red', 내부 : true, show : true, hideoverlap : true}
  }]

show: true 설정 되더라도 두 번째 x 축의 레이블은 여전히 ​​표시되지 않을 수 있습니다. 문제는 series 데이터 구성입니다.

해결책:

열쇠는 series 데이터를 두 번째 x 축과 올바르게 연결하는 것입니다. series 구성에서는 두 번째 x 축을 사용해야하는 데이터 시리즈에 xAxisIndex: 1 속성을 추가해야합니다. 다음은 수정 된 series 구성입니다.

 시리즈: [{
      유형 : 'Custom',
      RenderItem : RenderItem,
      ItemStyle : {불투명도 : 0.8},
      인코딩 : {x : [1, 2], y : 0},
      데이터 : 데이터
    }, {
      유형 : 'Custom',
      RenderItem : RenderItem,
      xaxisindex : 1, // 두 번째 x 축 항목 스타일의 사용을 나타냅니다 : {불투명도 : 0.8},
      인코딩 : {x : [1, 2], y : 0},
      데이터 : 데이터
    }]

xAxisIndex: 1 설정하면 데이터 시리즈가 두 번째 x 축을 사용하여 두 번째 x 축의 레이블이 올바르게 표시되도록 명시 적으로 지정합니다.

이 방법은 데이터 중복 렌더링의 문제가있을 수 있습니다. 차트 데이터가 크면 성능 향상을위한 더 나은 솔루션을 탐색하는 것이 좋습니다. 모두보다 효과적인 최적화 방법을 공유 할 수 있습니다.

위 내용은 Echarts Dual X 축에서 두 번째 x 축의 레이블이 표시되는지 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!