温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-05-16 09:39:49 阅读:324 作者:iii 栏目:开发技术
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要介绍了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',
      roamtrue,
      selectedMode'multiple',
      layoutCenter: ['50%''50%'],
      layoutSize'95%',
      tooltip: {
        showtrue
      },
      itemStyle: {
        color'#fff'
      },
      emphasis: {
        itemStyle: {
          color: undefined,
          borderColor'green',
          borderWidth2
        },
        label: {
          showfalse
        }
      },
      select: {
        itemStyle: {
          color'green'
        },
        label: {
          showfalse,
          textBorderColor'#fff',
          textBorderWidth2
        }
      },
      regionsmakeTakenRegions(takenSeatNames)
    }
  };
  function makeTakenRegions(takenSeatNames) {
    var regions = [];
    for (var i = 0; i < takenSeatNames.length; i++) {
      regions.push({
        name: takenSeatNames[i],
        silenttrue,
        itemStyle: {
          color'#bf0e08'
        },
        emphasis: {
          itemStyle: {
            borderColor'#aaa',
            borderWidth1
          }
        },
        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怎么实现机舱座位选择展示功能”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×