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


Posted in Vue.js onMay 15, 2022

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实现机舱座位选择展示的文章就介绍到这了!


Tags in this post...

Vue.js 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
vue postcss-px2rem 自适应布局
May 15 #Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
vue使用watch监听属性变化
Apr 30 #Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
vue项目如何打包之项目打包优化(让打包的js文件变小)
关于vue-router-link选择样式设置
Apr 30 #Vue.js
You might like
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
python操作MySQL数据库的方法分享
2012/05/29 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
scrapy爬虫完整实例
2018/01/25 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
通过实例解析Python return运行原理
2020/03/04 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Python urllib3软件包的使用说明
2020/11/18 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
思想品德课教学反思
2014/02/10 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
给朋友的赠语
2015/06/23 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书