ECharts 마우스 이벤트 처리 방법 상세 설명
사용자 의 조작 과 행동 경 로 를 기록 하기 위해 서 는 마우스 이벤트 처리 와 구성 요소 가 상호작용 하 는 행위 사건 의 처 리 를 완성 해 야 합 니 다.
어떤 이벤트 에 응답 하 는 함 수 를 이벤트 처리 프로그램 이 라 고도 하고 이벤트 처리 함수,이벤트 핸들 이 라 고도 할 수 있 습 니 다.마우스 이 벤트 는 마우스 로 도 표를 클릭 한 그래 픽(예 를 들 어 click,dblclick,contextmenu)이나 hover 도표 의 그래 픽(예 를 들 어 mouseover,mouseout,mousemove)을 조작 할 때 발생 하 는 이벤트 입 니 다.
ECharts 에서 사용자 의 모든 조작 은 해당 하 는 사건 을 촉발 할 수 있 습 니 다.ECharts 에 서 는 click,dblclick,mousedown,mousemove,mouseup,mouseover,mouseout,globalout,contextmenu 등 9 가지 일반적인 마우스 이 벤트 를 지원 합 니 다.
그 중에서 도 클릭 이벤트 가 가장 많이 사용 된다.일반적인 마우스 이벤트 및 설명 은 표 와 같다.
하나의 도표 요소 에서 mousedown 과 mouseup 사건 을 연이어 촉발 해 야 click 사건 을 촉발 할 수 있 습 니 다.두 번 의 click 이벤트 가 연이어 촉발 되 어야 dblclick 이벤트 가 발생 합 니 다.mousedown 이나 mouseup 중 하 나 를 취소 하면 click 이벤트 가 발생 하지 않 습 니 다.click 이 벤트 를 직접 또는 간접 적 으로 취소 하면 dblclick 이 벤트 는 실행 되 지 않 습 니 다.
모 대학의 2020 년 전공 모집 상황 을 이용 해 기둥 모양 그림 을 그린다.그림 과 같다.
마 우 스 를 클릭 하여 이벤트 의 막대 그래프 에 있 는'인공지능'기둥 을 추가 하면 위의 그림 과 같은 알림 대화 상자 가 팝 업 됩 니 다.
알림 대화 상자 의 확인 단 추 를 누 르 면 다음 그림 과 같은 바 이 두 검색 페이지 를 자동 으로 엽 니 다.
이 그림 의 원본 코드 는 다음 과 같 습 니 다.
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main")); // dom， ECharts
var option = { //
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba 0.1
title: { text: ' 2020 ', left: 70, top: 9 },
tooltip: { tooltip: { show: true }, },
legend: { data: ['2019 '], left: 422, top: 8 },
xAxis: { // x
data: [" ", " ", "ERP", " ", " ", " ", " "]
},
yAxis: {}, // y
series: [{ //
name: ' :',
type: 'bar', barWidth: 55, //
data: [350, 200, 66, 210, 466, 200, 135]
}]
};
myChart.setOption(option); //
//
myChart.on('click', function (params) {
var yt = alert(" , :" + params.name);
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
window.addEventListener("resize", function () {
myChart.resize(); //
});
myChart.setOption(option); // echarts
</script>
</body>
</html>
리 셋 함수 자 체 는 주 함수 의 매개 변수 입 니 다.리 셋 함 수 를 매개 변수 로 다른 주 함수 에 전달 하고 주 함수 가 실 행 된 후에 리 셋 함 수 를 실행 합 니 다.이 과정 을 반전 이 라 고 한다.리 셋 함수 에서 대상 의 데이터 이름,시리즈 이름 을 얻 은 다음 에 데이터 에서 다른 정 보 를 얻 은 후에 도 표를 업데이트 하고 부 층 을 표시 합 니 다.
제품 판 매 량 과 생산량 이윤 데 이 터 를 이용 하여 막대 그래프 를 그립 니 다.그림 과 같 습 니 다.
왼쪽 그림 의 두 번 째 제품 인'양모 셔츠'의'생산량'기둥 을 누 르 면 오른쪽 그림 과 같은 알림 대화 상자 가 팝 업 됩 니 다.
오른쪽 그림 에서 왼쪽 그림 의 두 번 째 제품 인'양모 셔츠'의'생산량'기둥 파 람 스 매개 변수의 각 속성 정 보 를 얻 을 수 있다.
그림 의 원본 코드 는 다음 과 같 습 니 다.
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
// dom， ECharts
var myChart = echarts.init(document.getElementById("main"));
var option = { //
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba 0.1
title: { text: ' ', left: 70, top: 9 },
xAxis: { // x
data: [" ", " ", " ", " ", " ", " "]
},
yAxis: {}, // y
tooltip: { //
trigger: 'item', show: true,
formatter: "{a} <br/>{b} : {c}"
},
legend: {},
series: [ //
{ // 1：
name: ' ', type: 'bar',
data: [5, 28, 16, 20, 15, 33]
},
{ // 2：
name: ' ', type: 'bar',
data: [15, 38, 20, 24, 20, 45]
},
{ // 3：
name: ' ', type: 'bar',
data: [25, 15, 10, 10, 15, 22]
}
]
};
myChart.setOption(option); //
window.addEventListener("resize", function () {
myChart.resize(); //
});
//
myChart.on('click', function (params) {
alert(" " + (params.dataIndex + 1) + " :" + params.name + " " +
params.seriesName + " :" + params.value +
"
1--componentType:" + params.componentType +
"
2--seriesType:" + params.seriesType +
"
3--seriesIndex:" + params.seriesIndex +
"
4--seriesName:" + params.seriesName +
"
5--name:" + params.name +
"
6--dataIndex:" + params.dataIndex +
"
7--data:" + params.datax +
"
8--dataType:" + params.dataType +
"
9--value:" + params.value +
"
10--color:" + params.color);
});
myChart.setOption(option); // echarts
</script>
</body>
</html>
마지막 11 줄 에서 마지막 두 번 째 줄 코드 는 마우스 이벤트 의 매개 변수 인 params 의 10 가지 기본 속성 을 순서대로 방문 하고 그림 5-13 의 알림 대화 상자 의 각 줄 에 순서대로 표시 합 니 다.
그 중의 params.data,params.dataType 의 값 은 undefined 입 니 다.
총결산
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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
