Echarts의 자질구레한 조작 지식

1,지도의 크기 조절에 관하여:
우선 Echarts의 도표(지도)는 일반적으로div에 따라 초기화되는 것을 알아야 한다. 이div의 크기는 기본적으로 도표의 크기이다. 만약에 도표의 기본값이div보다 작으면 기본값의 크기가 된다.이때 생성된 도표의 크기와 도표가 있는 위치(도표를 구성하는div에 사용되는 위치)를 제어하려면 하나의 속성에 의존해야 한다. 맵Location이라는 속성은 시리즈에 속하고 하위 속성으로 위치와 크기의 설정을 포함한다.예를 들면 다음과 같습니다.
 mapLocation:{              x:'10',               y:'10',               width:'80%',               height:'80%'             }
위의 조작은 지도를 echarts를 초기화하려는div의 왼쪽 상단 거리와 왼쪽 10px의 위치에 표시하고 지도 크기는div 크기의 80%에 달한다
2. 선형 또는 원통형 그래프와 같은 좌표계가 있는 그래프의 크기에 대한 제어:
역시 이 오래된 문제는 도표를 초기화하는div의 크기가 기본 설정의 도표 크기에 꼭 맞는 것은 아니기 때문에 우리도 수동으로 크기 위치를 조정해야 한다. 좌표계가 있는 설정은 비교적 간단하다. Option 아래의 속성인 grid,grid의 하위 속성은 표시 위치(왼쪽 상단을 기준으로 x와 y,x2와 y2를 오른쪽 하단 좌표), 도표의 크기(width,height)에 관한 것이 많다.
3, Echart의 맵에 대한 마우스 휠 크기 조절 기능:
이 기능은 비교적 간단하다. 본고의 목적은 기록적인 정리를 하는 것이기 때문에 매우 간단한 설정이다.
option 아래 시리즈에 있는 roam의 기본값은false입니다. 축소 기능이 없고true로 바꾸면 됩니다.
4, Echart의 동적 데이터 표시에 대한 고려 사항
이것도 사실 비교적 간단하다. Echart의 대부분 속성(모든 것이겠지)은 변수 값을 받아들일 수 있기 때문에 동적 디스플레이 데이터의 조작은 기본적으로 그래프를 구성할 때 필요한 옵션에 대해 데이터 부분에 대한 값 부여 조작은 그로 하여금 하나의 변수와 기다리게 하고 매번 동적 데이터가 바뀔 때마다 변수의 값을 바꾸고 옵션을 다시 설정하면 된다.
5, 동적 점 그리기, 선 그리기
여기서 말한 점화선은 주로 지도상의 조작을 가리킨다. 먼저 이런 조작은 기본적으로 이 몇 가지 속성에 의존해야 한다는 것을 설명해야 한다. 점화점은 바로 시리즈 아래의 MarkPoint이고 점화선은 MarkLine이다. 주의해야 할 것은 이른바 점과 선이 지도에 닿을 수 있는 이유는 주로 지도에 대응하는 점과 선을 그릴 위치 구역에 좌표가 있어야 한다는 것이다. 이것이 가장 관건적인 것이다.예를 들어 중국 지도를 가져왔습니다. 점을 그릴 때markPoint로 조작하면 점의 스타일 설정에 대한 설정이 있습니다. 데이터 부분에 name과value를 넣는 것이 중점입니다. (name는 지역 이름value는tooltip에 표시되는 값입니다.) 이name를 표시하려면 지역 좌표가 Echart에서 초기화된 지도에서 찾을 수 있어야 합니다.그래서 베이징의 점을 그릴 수 있지만 당신의 현성을 그릴 수 있는 점은 반드시 그릴 수 없기 때문에 이 문제의 해결이 이 부분의 관건이다. 우선 지도의 json이나 js 파일에 이미 일부 지역의 좌표 정보가 있을 가능성이 높다.그러나 이것은 절대적인 것이 아니다. (json이나 js를 열면 볼 수 있다) 이것을 알고 나면 이 속성을 말해야 한다. 시리즈 아래의 GeoCoord, 이 속성은 Echarts3.0에서 찾지 못한 것 같지만 2버전에서 명확한 정의가 있고 3에서도 표시되지 않은 것만 적혀 있다. 이 GeoCoord는 지도상 구역의 경위도의 데이터 집합이다. 그래서 우리가 얻은 구역 좌표를 그에게 부여하면 json에 좌표가 없는 점을 그리는 요구를 해결할 수 있고 이 문제를 해결하는 방법도 있다.만약에 네가 그려야 할 점의 경위도를 미리 알았다면 이런 조작을 할 수 있다. 점을 그릴 때markPoint의 데이터에서name을 전달할 뿐만 아니라valu의 값에 하나의 속성을 더하면 GeoCoord에 대응하는 값이 좌표값이다.예를 들면 다음과 같습니다.
데이터:[{name:'북경',value:'20',geoCoord:[북경의 경위도]}]
6, 도표의 사용자 정의 디스플레이 조작(자신의 요구에 따라 데이터를 표시)
이것도 비교적 간단하다. 한마디로 문서를 찾은 다음에 설정할 구성 요소에 대한 리셋 함수formatter를 이용하여 설정하면 매우 간단하다.
7, Echart에 대한 이벤트 및 동작
문서를 보든지, 문서가 90% 의 문제를 해결할 수 있다. 그 다음으로 할 말은 var mychar = Echarts이다.init(document.getElementById('대응dom 노드 id'));Echarts의 초기화를 진행하는 것은 사실 mychar를 Echarts의 각종 속성 조작을 갖춘 대상으로 바꾸는 것이다. 그래서 이벤트와 동작에 대해 기본적으로 그에 대한 조작이다.
mychar.on ('이벤트 형식',function () {});여기의 이벤트 유형은 클릭과 더블 클릭이 많은지 아니면 홈페이지를 보는지 문서에 있는 API에 대응하는 이벤트가 있습니다
동작 따위는 대응하는 액션이고 첨가 방법은 유사하다.
mychar.dispatchAction({
type:'//여기 type에서 대응하는 동작의 유형을 설정하면 됩니다
//다음은 관련 동작 속성의 설정을 진행하고 서로 다른 동작 속성은 수요에 따라 문서를 찾는다.
});
이렇게 하면 이 에켓에 맞는 동작이 있어요.
8, 여러 개의 Echarts 그래프의 연결

//           group id
chart1.group = 'group1';
chart2.group = 'group1';
echarts.connect('group1');
//                  
echarts.connect([chart1, chart2]);

한 마디로 하면 홈페이지에 있는 문서 설정 항목 매뉴얼을 많이 보세요. 하지만 Echart의 버전 문제에 주의하세요. 오늘 블로거가 구덩이를 만났어요. Echart를 들고 있어요.0의 문서는 2.2.7의 그림을 조정했는데 결과는 당연히 하루 종일 아무런 성과도 없이 돌아왔고 마지막에야 깨달았다. (디버깅을 할 때 자신의 브라우저에 캐시되지 마라)