Echarts类似航班选座如何做一个实时监测设备状态的案例：
问题描述：
Echart关于他的地图的配置项说地不够清楚，项目中想用自己的Svg图片作为地图的地图如何配置怎么做？这是我遇见的问题以及解决方案如下；
$.get(ROOT_PATH + '/data/asset/geo/flight-seats.svg', function (svg) { echarts.registerMap('flight-seats', { svg: svg });
这是echart给的默认图片以及注册用的代码，稍微解读一下就是他获取了一张SVG，然后将这张SVG注册了，名字叫 flight-seats。
解决方案：
1. 首先我们也要自己去注册一张地图。
在这里我的做法是这样的，首先把SVG图片的代码拿过来用``，把SVG的代码包裹起来并定义成一个变量。如下图
然后在这里进行注册，前面的名字要和下面的配置项对应
2. 将SVG代码内需要配置的点（设备或者是你需要改状态的地方）把它的name属性修改。
这里的g是我的点分组的代码，我把他这里的点的name属性改为PO（注意：这里的name必须是唯一值），这样它就有唯一对应的名字了，并且当他拥有name这个属性的时候他就在echart内变为可点击的事件了。
3. 配置Options，配置地图的选项可参考这篇文章 。
本文为CSDN博主「拿我格子衫来」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/github_35631540/article/details/116300038
4. 修改配置里面的regions属性 。
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. 除了动态地更改商品的状态外，我们还可以添加点击功能 。
echart提供了方法myChart.on("geoselectchanged", function (params) {})
其实就是每个点的点击事件，params是你当前选中的所有点，这个可能是一个也可以是多个，看你Option内写的选择模式是Single,还是multiple。所以当我们从params中拿到这个名字的时候就可以对它进行操作啦，我们可以把他当做参数传给后端，获取这个商品更详细的实时信息了。