ECharts 다 중 도표 연동 기능 의 실현 과정
ECharts 는 여러 도표 연결(connect)기능 을 제공 합 니 다.연 결 된 여러 도 표 는 구성 요소 이 벤트 를 공유 하고 그림 을 저장 할 때 자동 으로 연결 할 수 있 습 니 다.다 중 도표 연동 은 직각 계 아래 tooltip 의 연동 을 지원 합 니 다.
EChart 의 다 중 도표 연동 을 실현 하려 면 다음 과 같은 두 가지 방법 을 사용 할 수 있다.
(1)각 ECharts 대상 을 같은 group 값 으로 설정 하고 ECharts 대상 의 connect 방법 을 호출 할 때 group 값 을 입력 하여 여러 ECharts 대상 을 사용 하여 연동 관 계 를 맺 습 니 다.형식 은 다음 과 같 습 니 다.
myChart1.group = 'group1'; //첫 번 째 ECharts 대상 에 group 값 을 설정 합 니 다.
myChart2.group = 'group1'; //두 번 째 ECharts 대상 에 게 같은 group 값 을 설정 합 니 다.
echarts.connect('group1'); //ECharts 대상 의 connect 방법 을 호출 할 때 group 값 을 입력 합 니 다.
(2)ECharts 의 connect 방법 을 직접 호출 합 니 다.매개 변 수 는 여러 개의 연동 이 필요 한 ECharts 대상 으로 구 성 된 배열 입 니 다.형식 은 다음 과 같 습 니 다.
echarts.connect([myChart1,myChart2]);
기 존의 다 중 도표 연결 을 해제 하려 면 disConnect 방법 을 사용 할 수 있 습 니 다.형식 은 다음 과 같 습 니 다.
echarts.disConnect('group1');
한 학원의 2019 년 과 2020 년 전공 모집 현황 을 활용 해 막대 그래프 연동 도 표를 그 렸 다.
그림 을 통 해 알 수 있 듯 이 모두 상하 두 개의 기둥 모양 그림 이 있 는데 각각 2019,2020 두 년도 의 학생 모집 상황 을 총괄한다.멀 티 그래프 연동 이 구 축 돼 있어 2019 년 이나 2020 년 인공지능 전문 기둥 위로 마우스 가 미 끄 러 졌 을 때 시스템 은 2019 년,2020 년 인공지능 전공 에 해당 하 는 상세 안내 상자(tooltip)를 자동 으로 팝 업 한다.
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<div id="main1" style="width: 600px; height:400px"></div>
<div id="main2" style="width: 600px; height:400px"></div>
<script type="text/javascript">
// dom， ECharts
var myChart1 = echarts.init(document.getElementById("main1"));
var option1 = { // 1
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba 0.1
title: { text: ' 2019 ', left: 40, top: 5 },
tooltip: { tooltip: { show: true }, },
legend: { data: ['2019 '], left: 422, top: 8 },
xAxis: [{
data: [" ", " ", "Oracle", "ERP", " ",
" ", " ", " "],axisLabel:{interval: 0}
}],
yAxis: [{ type: 'value', }],
series: [{ // 1
name: '2019 ',
type: 'bar', barWidth: 40, //
data: [125, 62, 45, 56, 123, 205, 108, 128],
}]
};
// dom, ECharts
var myChart2 = echarts.init(document.getElementById("main2"));
var option2 = { // 2
color: ['blue', 'LimeGreen', 'DarkGreen', 'red', 'Purple'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba 0.1
title: { text: ' 2020 ', left: 40, top: 8 },
tooltip: { show: true },
legend: { data: ['2020 '], left: 422, top: 8 },
xAxis: [{
data: [" ", " ", "Oracle", "ERP", " ",
" ", " ", " "],axisLabel:{interval: 0}
}],
yAxis: [{ type: 'value', }],
series: [{ // 2
name: '2020 ',
type: 'bar', barWidth: 40, //
data: [325, 98, 53, 48, 222, 256, 123, 111],
}]
};
myChart1.setOption(option1); // myChart1
myChart2.setOption(option2); // myChart2
// 1： echarts group
myChart1.group = 'group1';
myChart2.group = 'group1';
echarts.connect('group1');
// 2： echarts myChart1，myChart2
//echarts.connect([myChart1,myChart2]);
</script>
</body>
</html>
그림 에서 알 수 있 듯 이 위의 떡 그림 과 아래 의 기둥 모양 그림(기둥 모양 그림 도 공구 상 자 를 통 해 접 는 선 그림 으로 바 꿀 수 있다).마우스 로 떡 그림 의 한 섹 터 를 지나 갈 때 떡 그림 에 나타 난 상세 한 안내 상 자 는 해당 섹 터 에 해당 하 는 년도 의 학생 모집 인원 과 각 년도 의 총 학생 모집 인원 을 차지 하 는 비례 를 나타 내 는 동시에 기둥 모양 그림(또는 접 는 선 그림)도 해당 하 는 상세 한 안내 상자 가 나타 나 년도 각 학과 의 학생 모집 인원 에 대한 상세 한 데 이 터 를 나타 낸다.
원본 코드 는 다음 과 같 습 니 다:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<div id="main1" style="width: 600px; height:400px"></div>
<div id="main2" style="width: 600px; height:400px"></div>
<script type="text/javascript">
// dom， ECharts
var myChart1 = echarts.init(document.getElementById("main1"));
var option1 = { // 1 option1
color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', // ，rgba 0.1
title: { text: ' ', x: 'center', y: 12 },
tooltip: { trigger: "item", formatter: "{a}<br/>{b}:{c}({d}%)" },
legend: {
orient: 'vertical', x: 15, y: 15,
data: ['2016', '2017', '2018', '2019', '2020']
},
series: [{ // 1
name: ' :', type: 'pie',
radius: '70%', center: ['50%', 190],
data: [
{ value: 1695, name: '2016' }, { value: 1790, name: '2017' },
{ value: 2250, name: '2018' }, { value: 2550, name: '2019' },
{ value: 2570, name: '2020' }]
}]
};
myChart1.setOption(option1); //
// dom， ECharts
var myChart2 = echarts.init(document.getElementById("main2"));
var option2 = { // 2
color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', // ，rgba 0.1
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, //
legend: { //
left: 42, top: 25,
data: [' ', 'Oracle', ' ', ' ', ' ']
},
toolbox: { // 2
show: true, orient: 'vertical', left: 550, top: 'center',
feature: {
mark: { show: true }, restore: { show: true }, saveAsImage: { show: true },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] }
}
},
xAxis: [{
type: 'category',
data: ['2016', '2017', '2018', '2019', '2020']
}], // 2 x
yAxis: [{ type: 'value', splitArea: { show: true } }], // 2 y
series: [ // 2
{
name: ' ', type: 'bar', stack: ' ',
data: [301, 334, 390, 330, 320], barWidth: 45,
},
{ name: 'Oracle', type: 'bar', stack: ' ', data: [101, 134, 90, 230, 210] },
{ name: ' ', type: 'bar', stack: ' ', data: [191, 234, 290, 330, 310] },
{ name: ' ', type: 'bar', stack: ' ', data: [201, 154, 190, 330, 410] },
{ name: ' ', type: 'bar', stack: ' ', data: [901, 934, 1290, 1330, 1320] }
]
};
myChart2.setOption(option2); //
// 1： echarts group
myChart1.group = 'group1';
myChart2.group = 'group1';
echarts.connect('group1');
// 2： echarts myChart1，myChart2
//echarts.connect([myChart1,myChart2]);
</script>
</body>
</html>
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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
