Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of vue echarts how to achieve flight seat selection, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this vue echarts article on how to achieve flight seat selection. Let's take a look at it.

Background

Recently in echarts officials saw an example of flight seat selection, feel good, can be expanded, reduced, the mouse over the seat can display the seat number, allowing the default seat selection. So I took a little time during the 5.1 holiday to write an article to delve into and analyze the example and parse the complete code for the example. First of all, let's look at the effect diagram of the example.

Realization idea

The code is implemented using echarts, which mainly uses the knowledge of svg and custom map.

The complete code for the example

In the function of selecting seats, we can also easily achieve it by using div layout plus background map, but it does not support scaling. In the case of more locations and want to see details, we need to use svg, which can expand the vector graphics that will not be distorted after reduction. With echarts rendering capabilities and scalability, the features can achieve a good user experience.

The main features of this example are roughly the following

Seats default to three states, unselected (white), self-selected (green), and have been chosen by others (red)

Can be enlarged, shrunk, the picture is not distorted, clear

Hold the mouse over the seat to display the seat number.

Portability, change to svg file, can be changed to cinema seats, or conference room seats

Simple, fast, with less than 100 lines of code

Code analysis to get svg

In the sample code, the first step is to get a svg file.

$.get (ROOT_PATH +'/ data/asset/geo/flight-seats.svg', function (svg) {/ /....})

Use jquery to get a svg file. The full path of svg is https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/flight-seats.svg.

Click to access. But here's what it says.

Only one nose is displayed because the svg is too large. To see the full picture, you need to use a special svg viewing software.

The svg obtained using jquery is the encoding of the svg file. We can debug, print the contents of svg and have a look.

You can see here that it is the specific content of svg.

Register a custom map

Echarts can be used with maps to achieve custom location coordinate layout rendering. But it is not limited to Baidu and Amap. He also supports registering a svg that conforms to map data as a map.

Let's take a look at echarts's api for registering a custom map.

RegisterMap

Click here for a full explanation

The general meaning of the document is that you can configure a geoJson thing, and then echarts can parse the internal coordinates, and then render, support search.

Documentation related to geo in echarts.

Https://echarts.apache.org/zh/option.html#geo

This component can configure some name, color, index, can be selected, interactive color, hover effect.

This is also my first time to extend the GeoJSON thing a little bit. It is a format used to encode various geographic data structures.

A programmed map that uses special attributes to express lines, faces, points, and colors on the map. Area.

The following geometry types are supported with GeoJSON: Point,LineString, Polygon,MultiPoint,MultiLineString, and MultiPolygon. Geometric objects with other attributes are Feature objects. The feature set is contained in the FeatureCollection object.

What is said here is wrong. Welcome the boss to slap bricks and preach and dispel doubts.

Related documents

If you want to start talking here, with my current knowledge, it is certainly not thorough enough. If you are interested, you can leave a message in the comments section. The next article can bring you a more detailed analysis of geojson.

Back to the main line, then the registerMap method is actually to transform svg into a standard map coordinate system. However, the location of the converted map is not based on longitude and latitude, but because of name.

Echarts.registerMap ('flight-seats', {svg: svg})

All right, this is the end of the meaning of the above code. In fact, think about it, behind each api involves a lot of knowledge. As long as you are careful and have the spirit of exploration, you will certainly learn more and learn better than others. Knowledge is coherent, not alone. If you learn from the same example, you can learn the Tao only if you integrate it.

Configuration of geo components

There are many components in echarts, such as brush (region selection component), parallel (parallel coordinate system), timeline,calendar (Calendar coordinate system), one of which is geo, Geographic coordinate system component.

The geographic coordinate system component is used for map drawing, and supports the drawing of scatter plots and line sets on the geographical coordinate system.

All configuration items for the geo component can be queried here for detailed parsing.

This is the component used in this case, so let's take a look at how the example is configured.

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)}

The above is the configuration of the geo component in the example, let's take a closer look at each configuration item.

Map

First of all, map points to a custom map we just registered, 'flight-seats'.

Map: 'flight-seats'

Roam

The roam keyword is used to configure whether to turn on mouse zoom and pan roaming. Not enabled by default. If you only want to turn on zooming or panning, you can set it to 'scale' or' move'. Set to true to enable all

SelectedMode

For example, the selectedMode field is used to configure the selection mode, indicating whether multiple selections are supported. It is disabled by default, and Boolean values and strings are supported. Optional string values: 'single'' means single selection, or 'multiple' means multiple selection.

LayoutCenter, layoutSize

Used to adjust the initial position of the instance of echarts in the dom container.

Tooltip

Whether to turn on the tooltip effect, when turned on, there will be a text prompt for the current seat when the mouse is placed on the seat.

ItemStyle

Default seat style, configuration color, font

Emphasis

Polygons and label styles in highlighted states.

Select

Polygons and label styles when selected.

Regions

Configure styles for specific areas in the map. What is passed in here is an array of selected seat information that has been formatted

Has been selected by default

The data format of each item is as follows

{name: '26E, silent: true, itemStyle: {color:' # bf0e08'}, emphasis: {itemStyle: {borderColor:'# aaa', borderWidth: 1}}, select: {itemStyle: {color:'# bf0e08'}

One of these properties is called silent, and its function is whether the graph does not respond to and trigger mouse events, which defaults to false, that is, responding to and triggering mouse events.

The echarts configuration for this example has actually been explained here. The coordinate system here is not found by latitude and longitude, but by the name of each seat. So the corresponding name can be found in svg. The value of name must be unique.

In this example, in addition to the core configuration, there are two helper functions. Let's take a look.

MakeTakenRegions function

This function converts the already defined selected seat data into formatted seat style data.

The following is the defined default seat that has been selected.

Var takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F']

Geoselectchanged

At the end of this example, there is a listening function

MyChart.on ('geoselectchanged', function (params) {var selectedNames = params.allSelected [0] .name.slice (); / / Remove taken seats. For (var I = selectedNames.length-1; I > = 0; iMel -) {if (takenSeatNames.indexOf (selectedNams [I]) > = 0) {selectedNames.splice (I, 1);}} console.log ('selected', selectedNames);})

What are these lines of code for?

When we click on the seat, there is a click event, which is used to deal with the interaction after the click, and then get the seat selected by the current user.

The geoselectchanged world is an event in geo where the map area toggle is selected.

The event is triggered when the user clicks the selection. Related documents

We can debug this function to see what the content of params is.

This is used to deal with clicking on the seats that have been selected, but not selecting them. The use scenario of this function is to obtain the list of seats selected by the current user. For example, the user needs to send the seat information to the backend to save after selecting the seats.

The main function is to determine whether the selected seat has been selected by others, and if it has been selected, it will be removed.

Draw examples from one example to another.

After analyzing the code, we understand the meaning of each configuration item, so we do a similar connection while the iron is hot, in order to achieve the purpose of inference and comprehension.

Requirements, define a svg file, there are 6 boxes, use it to do a seat selection function.

Define the mysvg file

Html code

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

< takenSeatNames.length; i++) { regions.push({ name: takenSeatNames[i], silent: true, itemStyle: { color: '#bf0e08' }, emphasis: { itemStyle: { borderColor: '#aaa', borderWidth: 1 } }, select: { itemStyle: { color: '#bf0e08' } } }); } return regions; } myChart.setOption(option); // Get selected seats. myChart.on('geoselectchanged', function (params) { var selectedNames = params.allSelected[0].name.slice(); // Remove taken seats. for (var i = selectedNames.length - 1; i >

= 0; iMel -) {if (takenSeatNames.indexOf (selectedNams [I]) > = 0) {selectedNames.splice (I, 1);}} console.log ('selected', selectedNames);});}) effect graph

Pay attention

Each seat required for the svg file, the clickable area must be wrapped with a g tag, and the name attribute must be

When defining geojson on the g tag, svg cannot point to a text conclusion

If you have mastered echarts's geo custom map, you can make a lot of examples.

Like this.

Like this

There's something like this.

All you need is a svg file, plus a few name, and you can make the map you want.

This is the end of the article on "how to choose flight seats in vue echarts". Thank you for your reading. I believe you all have a certain understanding of the knowledge of "how to choose flight seats in vue echarts". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.