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 $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
详解Vue router路由
Nov 20 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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 文件夹删除、php清除缓存程序
2009/08/25 PHP
php curl_init函数用法
2014/01/31 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
JQuery基础语法小结
2015/02/27 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
利用python获得时间的实例说明
2013/03/25 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python tornado修改log输出方式
2019/11/18 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
人力资源部培训专员岗位职责
2014/01/02 职场文书
合作经营协议书
2014/04/17 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
礼貌问候语大全
2015/11/10 职场文书
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android