Echarts 기본 입문 기둥 모양 그림,접 는 선 그림 공통 설정
네 걸음
1 dom 용기 찾기
2 Init 초기 화
3 설정 옵션
4 setOptions

거의 124 단계 가 같 습 니 다.options 는 설정 항목 입 니 다.아이콘 을 보 여주 고 싶 은 대로 맞 춥 니 다.

가장 기본 적 인 최대 치 최소 치 의 막대 그래프

2 평균치 markLine 속성


3 수치 표시 기둥 너비,가로 막대 그래프
수치 표시 label 속성


기둥 너비 barWidth


가로 면 두 축의 변화 에 만 주의 하면 됩 니 다.


유 니 버 설 설정
제목
tooltip:힌트
toolbox 도구 단추
legend 그림


tooltip 프롬프트 상자 구성 요소,마우스 가 도 표를 미 끄 러 질 때 알림


formatter 도 함 수 를 설정 할 수 있 습 니 다.


toolbox
그림,데이터 보기,동적 형식 전환,데이터 영역 크기 조정,리 셋 등 다섯 가지 도구 등 기능 을 내 보 낼 수 있 습 니 다.


legend 그림 예,시리즈 선별 에 사용 하려 면 series 와 함께 사용 해 야 합 니 다.




네 개의 유 니 버 설 설정 을 기본적으로 사용 합 니 다.
title 제목 tooltip 프롬프트 상자 도구 단추 toolbox 그림:legend
접선 도


기본 그리 기
크기 평균 값,표시 구간
크기 평균 값 은 막대 그래프 와 같 습 니 다.


레이 블 구간 markArea


라인 제어 부 드 럽 고 매 끄 럽 습 니 다.


충전 스타일


가장자리 에 바짝 붙 어 있다



y 축 범위
scale


중첩 그림 serise 각 설정 stack:'all'
정상이다

겹 쳐 서 설정 가능

시리즈 마다 다 넣 어 요.

이렇게 되 고 겹 치지 않 지만 Y 축의 변화 에 주의해 야 한다.위의 그 라인 의 출발점 은 1000 이 고 그 는 위 에 1000 만 추가 했다.

여기에 areaStyle 까지.

중첩 효과 가 더욱 뚜렷 하 다.
총결산
Echarts 기본 입문 의 막대 그래프,접 는 선 그래프 의 유 니 버 설 설정 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Echarts 막대 그래프 접 는 선 그래프 의 유 니 버 설 설정 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
어쩌면 echarts에 더 좋은 방법echarts를 React에 유용하게 사용하세요. echarts-for-react 기반 Make echarts come in handy for React. Based on 🌈 사용하기 쉬움(기본 레이아웃 및 스타일 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.