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中拿到这个名字的时候就可以对它进行操作啦，我们可以把他当做参数传给后端，获取这个商品更详细的实时信息了。