Echarts는 비행기 좌석 선택을 사용하여 장치 상태를 실시간으로 모니터링하는 방법과 유사합니다.
문제 설명:
Echart는 맵의 구성 항목에 대해 충분히 명확하지 않습니다. 프로젝트에서 내 Svg 이미지를 맵으로 사용하려면 맵을 어떻게 구성해야 합니까? 이것이 제가 겪은 문제이며 해결책은 다음과 같습니다.
$.get(ROOT_PATH + '/data/asset/geo/flight-seats.svg', function (svg) { echarts.registerMap('flight-seats', { svg: svg });
이것은 echart에서 제공하는 기본 이미지 및 등록 코드입니다. 약간의 설명을 보면 SVG를 획득한 후 flight-seats라는 이름으로 SVG를 등록한 것으로 나와 있습니다.
해결책:
1. 먼저 지도를 직접 등록해야 합니다.
제가 하는 일은 먼저 SVG 이미지의 코드를 가져와서 ``를 사용하여 SVG 코드를 래핑하고 변수로 정의합니다. 아래와 같이
여기에 등록합니다. 이전 이름은 아래 구성 항목과 일치해야 합니다.
2. SVG 코드에서 구성해야 하는 포인트(상태를 변경해야 하는 장치 또는 장소)의 이름 속성을 수정합니다. .
여기 g는 내 포인트 그룹화를 위한 코드입니다. 여기 포인트의 이름 속성을 PO로 변경했습니다( 참고: 여기의 이름은 고유한 값이어야 합니다 ). 따라서 고유한 해당 이름을 갖게 됩니다. 이 속성이 설정되면 echart에서 클릭 가능한 이벤트가 됩니다.
3. 옵션 구성: 지도 구성 옵션은 이 문서를 참조하세요.
이 기사는 CSDN 블로거 "Bring My Plaid Shirt"의 원본 기사이며 CC 4.0 BY-SA 저작권 계약을 따릅니다. 재인쇄 시 원본 소스 링크와 이 설명을 첨부해 주세요.
원본 링크: https://blog.csdn.net/github_35631540/article/details/116300038
4. 구성에서 지역 속성을 수정합니다.
echart 예제는 makeTakenRegions 함수를 제공하는데, 실제로 그 핵심은 각 포인트에 해당하는 이름에 대한 스타일 속성을 별도로 구성하는 것입니다. 코드는 아래와 같이 표시됩니다.
function makeTakenRegions(takenSeatNames, bName) {
//传入配置项regions的函数,takenSeatNames,bNanme都是包含着上述点名字的数组，例如takenSeatNames=[PO,AO]
var regions = [];
for (var i = 0; i < takenSeatNames.length; i++) {
regions.push({
//最后返回regions这个数组，传入每个名字的配置项，每个名字都是一个对象
name: takenSeatNames[i], //传入的名字
silent: true,
itemStyle: {
color: "#bf0e08", //初始颜色
},
emphasis: {
itemStyle: {
//悬浮的样式
borderColor: "#aaa",
borderWidth: 1,
color: "#bf0e08",
},
},
select: {
//选中的样式
itemStyle: {
color: "#bf0e08",
},
},
});
}
for (var i = 0; i < bName.length; i++) {
//可以有不同状态，takenSeatNames我用红色，这一类我用白色
regions.push({
name: preAlarmName[i],
silent: true,
itemStyle: {
color: "#FFDB44",
},
emphasis: {
itemStyle: {
borderColor: "#aaa",
borderWidth: 1,
color: "#FFDB44",
},
},
select: {
itemStyle: {
color: "#FFDB44",
},
},
});
}
return regions;
}
takeSeatNames, bName에 값이 있는 한 포인트 스타일의 상태는 변경될 수 있습니다. 효과는 다음과 같습니다.
그래서 타이머를 추가하여 백엔드에서 다양한 디바이스나 제품의 상태를 폴링 방식으로 요청할 수 있습니다.(여기서 websocket을 사용할 수 있는지는 모르겠습니다. 폴링 없이 사용해 볼 수도 있습니다. 운영됩니다.)
5. 제품 상태를 동적으로 변경하는 것 외에도 클릭 기능을 추가할 수도 있습니다.
myChart.on("geoselectchanged", function (params) {})
Echart는 실제로 각 포인트의 클릭 이벤트인 메소드를 제공합니다. Params는 현재 선택된 모든 포인트입니다. 이는 옵션에 작성된 선택 모드가 단일인지 다중인지에 따라 하나 또는 다중일 수 있습니다 . 따라서 params에서 이름을 얻으면 해당 이름에 대해 작업을 수행할 수 있으며, 이를 백엔드에 매개변수로 전달하여 제품에 대한 보다 자세한 실시간 정보를 얻을 수 있습니다.