Vue ECharts怎么实现机舱座位选择展示功能

这篇文章主要介绍了Vue ECharts怎么实现机舱座位选择展示功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue ECharts怎么实现机舱座位选择展示功能文章都会有所收获，下面我们一起来看看吧。

 var ROOT_PATH =  'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;$.get(ROOT_PATH + '/data/asset/geo/flight-seats.svg', function (svg) {  echarts.registerMap('flight-seats', { svg: svg });  const takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F'];  option = {    tooltip: {},    geo: {      map: 'flight-seats',      roam: true,      selectedMode: 'multiple',      layoutCenter: ['50%', '50%'],      layoutSize: '95%',      tooltip: {        show: true      },      itemStyle: {        color: '#fff'      },      emphasis: {        itemStyle: {          color: undefined,          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) {    const 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);  });});option && myChart.setOption(option);

关于“Vue ECharts怎么实现机舱座位选择展示功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue ECharts怎么实现机舱座位选择展示功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。