目录
背景
最近在echarts官网上看到一个航班选座的例子。 我认为这是非常好的。 它可以放大和缩小。 当鼠标放在座位上时，可以显示座位号，并且默认允许选择座位。 于是我在5.1的周末花了一点时间写了一篇文章，深入研究分析这个例子，分析这个例子的完整代码。 首先我们看一下例子的效果图。
实施思路
代码是使用echarts实现的，主要利用了关于svg和自定义地图的知识。
示例的完整代码
对于选座功能，我们也可以利用div布局和背景图片的技术手段轻松实现，但不支持缩放。 当位置较多电影选座echarts，想要查看细节时，就需要使用 svg，它可以放大、缩小、不失真的矢量图形。 凭借echarts的渲染能力和可扩展性，完成的功能可以达到良好的用户体验。
该示例的主要特点大致如下：
代码分析获取svg
在示例代码中，首先是获取 svg 文件。
$.get(ROOT_PATH + '/data/asset/geo/flight-seats.svg', function (svg) {
// ....
})
使用jquery获取svg文件，svg的完整路径为@asf-site/examples/data/asset/geo/flight-seats.svg
点击访问。 但它显示是这样的。
只显示了客机的头部，这是由于svg太大所致。 如果你想看到整个东西，你需要使用专门的svg查看软件。
使用jquery得到的svg就是svg文件的编码。 我们可以调试并复制svg的内容来看看。
这里可以看到svg的具体内容。
注册自定义地图
echarts可以与地图配合使用，实现自定义位置坐标布局渲染。 但不限于百度、高德地图。 它还支持将符合地图数据的svg注册为地图。
我们看一下注册echarts自定义地图的API。
注册地图
完整解释
文档的大致意思是，你可以配置一个geoJson的东西，然后echarts就可以解析出内部坐标，然后进行渲染，并且支持搜索。
echarts中geo的相关文档。
这个组件可以配置一些名称，颜色，索引，可以选择，交互后的颜色，以及hover的效果。
这里对GeoJSON做一点扩展，也是我第一次接触。 它是一种用于编码各种地理数据结构的格式。
一种程序化地图，使用一些特殊属性来表达地图上的线、面、点和颜色。 区域。
GeoJSON 支持以下几何类型：Point、LineString、Polygon、MultiPoint、MultiLineString 和 MultiPolygon。 具有附加属性的几何对象是特征对象。 要素集合包含在FeatureCollection 对象中。
这里说的有误，欢迎掠夺者指正、指正。
相关文件
如果要在这里讲的话，以我目前的了解，一定是不够透彻的。 如果您有兴趣，可以在评论区留言。 上一篇文章可以给大家带来对geojson更加详细的分析。
回到主线，registerMap的方法就是将svg转换成标准地图坐标系。 只不过转换后的地图的位置并不是根据经度和经度，而是因为名字。
echarts.registerMap('flight-seats', { svg: svg });
好了，前面代码的意思就解释到这里了。 虽然想想，每一个api都涉及到很多知识。 只要你细心，有探索精神，你一定会比别人学得更多，学得更好。 知识是连贯的，并不单独存在。 举一反三，融会贯通。
地理组件的配置
echarts中的组件有brush（区域选择组件）、parallel（平行坐标系）、timeline、calendar（月历坐标系）等组件，其中之一就是geo，地理坐标系组件。
地理坐标系组件用于绘制地图，支持在地理坐标系上绘制散点图和线集。
所有与geo组件相关的配置项都可以详细分析。
本例中使用了该组件，所以让我们看看示例是如何配置的。
geo: {
map: 'flight-seats',
roam: true,
selectedMode: 'multiple',
layoutCenter: ['50%', '50%'],
layoutSize: '95%',
tooltip: {
show: true
},
itemStyle: {
color: '#fff'
},
emphasis: {
itemStyle: {
color: null,
borderColor: 'green',
borderWidth: 2
},
label: {
show: false
}
},
select: {
itemStyle: {
color: 'green'
},
label: {
show: false,
textBorderColor: '#fff',
textBorderWidth: 2
}
},
regions: makeTakenRegions(takenSeatNames)
}
以上是示例中geo组件的配置。 我们来仔细分析一下每一个配置项。
地图
首先，地图指向我们刚刚注册的自定义地图“航班座位”
map: 'flight-seats',
漫游
iroam 关键字用于配置是否启用键盘缩放和平移漫游。 默认情况下不启用它。 如果只想启用缩放或平移，可以将其设置为“缩放”或“移动”。设置为 true 可同时启用
选择模式
正如字面意思，selectedMode数组用于配置选择模式，表示是否支持多选，默认关闭，支持布尔值和字符串。 字符串值可以选择为“single”以指示单选择，或“multiple”以指示多选择。
布局中心、布局大小
用于调整echarts实例在dom容器中的初始位置。
工具提示
是否开启工具提示效果，开启后，键盘放在座位上时会有文字提示当前座位。
项目样式
座椅默认样式、配置颜色、字体
强调
突出显示状态下的六边形和标签样式。
选择
处于选定状态的六边形和标签样式。
地区
配置地图中特定区域的样式。 这里传入的是一个链表，降级后选择的座位信息，
已经默认选择
每一项的数据格式是这样的
{
name: '26E',
silent: true,
itemStyle: {
color: '#bf0e08'
},
emphasis: {
itemStyle: {
borderColor: '#aaa',
borderWidth: 1
}
},
select: {
itemStyle: {
color: '#bf0e08'
}
}
}
有一个属性叫silent，它的作用是显卡是否不响应而触发键盘风暴，默认为false，即响应并触发键盘风暴。
本例的echarts配置已经解释到这里了。 这里的坐标系不是使用经度和经度，而是使用每个座位的名称来查找。 所以在svg中可以找到对应的名字。 名称的值必须是唯一的。
除了核心配置之外，本例中还有两个辅助功能。 上去看看吧。
makeTakenRegions 函数
该功能是将已经定义好的所选座位数据转换为低格式的座位样式数据。
以下是默认选择的已定义座位。
var takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F'];
地理选择已更改
在这个例子的最后，有一个bug函数
myChart.on('geoselectchanged', function (params) {
var selectedNames = params.allSelected[0].name.slice();
// Remove taken seats.
for (var i = selectedNames.length - 1; i >= 0; i--) {
if (takenSeatNames.indexOf(selectedNames[i]) >= 0) {
selectedNames.splice(i, 1);
}
}
console.log('selected', selectedNames);
});
这几行代码是做什么用的？
当我们点击座位的时候，有一个点击风暴，用来处理点击后的交互，然后获取当前用户选择的座位。
geoselectchanged world是在geo中切换地图区域选择状态的风暴。
当用户点击选择风暴时就会触发风暴。
我们可以调试这个函数，看看params的内容是什么
这是用来处理点击已经选好的座位的，而不是选择它。 该函数的使用场景是获取当前用户选择的座位列表。 例如，用户选择座位后需要将座位信息发送到后台存储。
主要功能是判断所选择的席位是否已被其他人选择，如果已被选择，则将其淘汰。
举一反三
分析完代码，我们明白了各个配置项的含义电影选座echarts，那么我们就趁热打铁做一道类似的连接题吧，从而达到举一反三、融会贯通的目的。
需求，定义一个svg文件，有6个小方块，用它作为选座功能。
定义 mysvg 文件
html代码
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
$.get('/mysvg.svg', function (svg) {
echarts.registerMap('flight-seats', { svg: svg });
var takenSeatNames = ['a1'];
option = {
tooltip: {
},
geo: {
map: 'flight-seats',
roam: true,
selectedMode: 'multiple',
layoutCenter: ['50%', '50%'],
layoutSize: '95%',
tooltip: {
show: true
},
itemStyle: {
color: '#fff'
},
emphasis: {
itemStyle: {
color: null,
borderColor: 'green',
borderWidth: 2
},
label: {
show: false
}
},
select: {
itemStyle: {
color: 'green'
},
label: {
show: false,
textBorderColor: '#fff',
textBorderWidth: 2
}
},
regions: makeTakenRegions(takenSeatNames)
}
};
function makeTakenRegions(takenSeatNames) {
var regions = [];
for (var i = 0; i = 0; i--) {
if (takenSeatNames.indexOf(selectedNames[i]) >= 0) {
selectedNames.splice(i, 1);
}
}
console.log('selected', selectedNames);
});
})
疗效图
当心
如果你掌握了echarts的geo自定义地图，那么你可以做出很多例子
例如像这样
这样的
和这个
你只需要一个svg文件和几个名字，就可以制作出你想要的地图系统图。
最后对你说一句话：
不积跬步，无以至千里；不积跬步，无以至千里； 不积小流，就不能成江海。
至此，这篇关于vueecharts航班选座的案例分析的文章就介绍到这里了。 更多相关vueecharts航班选座案例内容请搜索之前的文章或继续浏览下方相关文章。 希望大家以后多多支持我！
