Echarts 차트 설정 백분율 표시 및 차트 컨텐트 병합 문제

비즈니스 요구 사항

Echarts 그래프의 디스플레이를 전환하기 위해 동적tab을 개발해야 합니다. 탭 항목은 디스플레이 그래프의 디스플레이 데이터를 지정합니다.

생각을 실현하다

여러 DIV 태그를 사용하여 Echarts 차트를 호스팅합니다.처음에는 여러 개의 DIV 탭 설정 스타일display:none:을 숨기고 탭 전환을 할 때마다 DIV 탭의 스타일을 바꾸어 표시하고 데이터 요청을 하고 도표를 그리는 것이 아이디어였다.

문제가 생기다

백분율로 표시되어야 하는 Echarts 도표는 아주 작은 넓이와 높이만 표시되며, 컨트롤러를 열거나 페이지 레이아웃 크기를 제어하면 갑자기 백분율로 바뀐다.

해결 방향

동적으로 DOM 요소를 취소하고 표시하기 때문에 DOM의 불러오기, 아이콘 그리기에 영향을 줄 수 있습니다.그래서 두 가지 방법을 생각해 봤는데 DOM을 조작하지 않거나 백분율로 표시하지 않거나(매체 조회를 이용한다).
미디어 조회의 방안은 초기에 두 가지 흔히 볼 수 있는 해상도에서 비교적 좋은 디스플레이를 할 수 있지만 이런 응답식은 비교적 큰 한계가 있고 사용자 체험에 영향을 줄 수 있기 때문에 DOM을 조작하지 않는 것을 고려한다.
Echarts 차트 항목을 숨기는 방법을 투명도opacity로 제어할 수 있습니다. 그러면 DOM 작업을 피할 수 있습니다. 이 때 DIV 탭을 부모 탭으로 절대적으로 지정합니다.

새로운 문제

그리고 전환할 때 새로운 문제가 발생했습니다. Echarts의 tooltip 알림 상자는 표시되지 않고 HTML의 마지막 DIV의 tooltip만 표시됩니다.

문제 포지셔닝 실패

이 세부 사항에 대한 생각에서 나는 도표 자체를 포지셔닝했다. 어떤 아이콘이 표시될 수 있는 이상 분명히 아이콘의 문제가 아니다.투명도opacity 속성은 그 속성과 자대의 모든 원소를 투명하게 하는 것이고tooltip가 투명하게 되었는지 background:rgba() 방식으로 투명도를 변경하고 싶었습니다.자체 원소만 투명하면 된다고 생각했다.시험해 본 후에야 비로소 이런 영향이 아니라는 것을 발견하였다.Echarts의 도표가 tooltip을 표시할 수 있는 이상 투명도 자체와 무관하다는 것을 증명한다. 나는 두 번이나 문제의 위치를 잘못 잡았다.

문제 해결

생각한 후에 저는 DIV 라벨의 포지셔닝 방식을 바꾸려고 했는데 상대적인 포지셔닝이 나타날 수 있다는 것을 발견했습니다. 이것은 DIV 등급의 디스플레이에 문제가 생겨tooltip이 표시되지 않고 마지막 DIV 디스플레이와 일치한다는 것을 의미합니다.
따라서 투명도 전환과 동시에 DIV 태그의 디스플레이 수준을 변경하면 문제가 쉽게 해결됩니다.

문제

이 문제에 앞서 저는 DOM을 조작하는 방식으로 도표를 보여 왔습니다. Echarts의 일부 도표에 데이터 내용이 통합되는 상황을 발견했습니다. 도표와 무관한 네트워크 데이터 요청이 아니라 도표의setOption 방법입니다. 두 번째 파라미터는 도표 내용이 통합되는 것을 기본으로 합니다.내용은 다음과 같습니다.

chart.setOption(option, {
    notMerge: ...,
    lazyUpdate: ...,
    silent: ...
});

option 도표의 설정 항목과 데이터는 설정 항목 매뉴얼을 보십시오.1. notMerge는 선택할 수 있습니다. 이전에 설정한 옵션과 병합하지 않을 지 여부입니다. 기본값은false입니다. 병합입니다.2. lazy Update 옵션을 선택할 수 있습니다. 옵션이 설정된 후에 그래프를 바로 업데이트하지 않을 지 여부입니다. 기본값은false입니다. 바로 업데이트합니다.3. silent는 setOption을 호출할 때 이벤트를 던지는 것을 막을 수 있습니다. 기본값은false입니다. 즉, 이벤트를 던지는 것입니다.