位置: IT常识 - 正文

vue 甘特图 一行多条任务 可拖拽(基于vue的开源甘特图控件)

编辑:rootadmin
#1、安装 highcharts npm install highcharts --save #2、页面引用 // 引入 import Highcharts from 'highcharts/highcharts-gantt.src.js' // 引入拖拽 import factory from ' ... 1、安装 highchartsnpm install highcharts --save2、页面引用// 引入import Highcharts from 'highcharts/highcharts-gantt.src.js'// 引入拖拽import factory from 'highcharts/modules/draggable-points.js'factory(Highcharts)3、封装组件<!-- * @Descripttion: 新甘特图 * @version: 0.0.1 * @Author: PengShuai * @Date: 2023-01-12 13:20:44 * @LastEditors: PengShuai * @LastEditTime: 2023-02-01 15:00:55--><template> <div class="BaseNewGantt"> <div id="container"></div> </div></template><script>import Highcharts from 'highcharts/highcharts-gantt.src.js'import factory from 'highcharts/modules/draggable-points.js'factory(Highcharts)export default { name: 'BaseNewGantt', data() { return { isShow: true, tableConfig: [], } }, props: { // 甘特图配置 ganttConfig: { type: Object, default: () => { return { data: [], columnsConfig: [], } }, }, }, mounted() {}, methods: { // 页面初始化 init() { Highcharts.setOptions({ global: { useUTC: false, // 不使用utc时间 }, // 默认都是英文的,这里做了部分中文翻译 lang: { noData: '暂无数据', months: [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', ], shortMonths: [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', ], weekdays: ['日', '一', '二', '三', '四', '五', '六'], buttons: [ { type: 'month', count: 1, text: '月' }, { type: 'month', count: 3, text: '季度' }, { type: 'month', count: 6, text: '半年' }, { type: 'ytd', text: 'YTD' }, { type: 'year', count: 1, text: '年' }, { type: 'all', text: '所有' }, ], rangeSelectorZoom: '范围', }, }) this.getGantt() }, getGantt() { const _this = this const day = 1000 * 60 * 60 * 24 const map = Highcharts.map // 获取数据源 let series = this.ganttConfig.data // 左侧表格配置 this.columnsConfig = [] if (this.ganttConfig.tableConfig.length > 0) { this.ganttConfig.tableConfig.forEach((item) => { let obj = { title: { text: item.title, }, categories: map(series, function (s) { return s[item.labels] }), } this.columnsConfig.push(obj) }) } Highcharts.ganttChart('container', { plotOptions: { series: { animation: true, dragDrop: { draggableX: true, // 是否横向拖动 draggableY: false, // 是否纵向拖动 dragPrecisionX: day, }, dataLabels: { enabled: true, format: '{point.title}', style: { cursor: 'default', opacity: _this.isShow ? 0 : 1, pointerEvents: 'none', }, }, allowPointSelect: true, point: { events: { dragStart: _this.onDragStart, drag: _this.onDrag, drop: _this.onDrop, select: _this.onHandleSelect, }, }, }, }, yAxis: { type: 'category', grid: { enabled: true, borderColor: 'rgba(0,0,0,0.3)', borderWidth: 1, columns: _this.columnsConfig, }, }, xAxis: [ { currentDateIndicator: true, grid: { borderWidth: 1, // 右侧表头边框宽度 cellHeight: 0, // 右侧日期表头高度 }, labels: { format: '{value:%d}日', }, }, { labels: { format: '{value:%Y年-%m月}', }, }, ], // 提示信息 tooltip: { formatter: function () { return `<div> ${this.point.title}<br/> 开始时间: ${_this.$library.common.formatDate( new Date(this.point.start), 'YYYY-MM-DD', )}<br/> 结束时间: ${_this.$library.common.formatDate( new Date(this.point.end), 'YYYY-MM-DD', )}<br/> </div>` }, }, navigator: { enabled: true, series: { type: 'gantt', pointPlacement: 0.5, pointPadding: 0.25, }, yAxis: { min: 0, max: 6, reversed: true, categories: [], }, }, series: series, // 显示滚动条 scrollbar: { enabled: true, }, // 顶部筛选按钮 rangeSelector: { enabled: true, selected: 0, buttons: [ { type: 'month', count: 1, text: '月' }, { type: 'month', count: 3, text: '季度' }, { type: 'month', count: 6, text: '半年' }, { type: 'ytd', text: 'YTD' }, { type: 'year', count: 1, text: '年' }, { type: 'all', text: '所有' }, ], }, // // 去掉右下角版权信息 credits: { enabled: false, }, }) }, // 拖动开始 onDragStart(e) {}, // 拖动 onDrag(e) {}, // 拖动停止 onDrop(e) { this.$emit('onDragStop', e.target.options) }, // 选择事件 onHandleSelect(e) { this.$emit('onHandleSelect', e.target.options) console.log(e) }, // 是否显示标题 onShowTitle() { // 标题过长 隐藏 更改文字透明度 this.isShow = !this.isShow // 重新加载 this.getGantt() }, },}</script><style lang="less" scoped>.BaseNewGantt { height: calc(100% - 70px); overflow: auto;}</style>4、组件使用<base-gantt ref="gantt" :ganttConfig="ganttConfig" @onDragStop="onDragStop" @onHandleSelect="onHandleSelect"></base-gantt>

推荐整理分享vue 甘特图 一行多条任务 可拖拽(基于vue的开源甘特图控件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 甘特图 一行 多个,vue甘特图实例,vue使用甘特图,vue 甘特图 一行 多个,vue 甘特图 一行 多个,甘特图一行上显示多个时段,vue 甘特图 一行 多个,vue甘特图实例,内容如对您有帮助,希望把文章链接给更多的朋友!

vue 甘特图 一行多条任务 可拖拽(基于vue的开源甘特图控件)

data中配置

// 甘特图配置 ganttConfig: { // 数据源 data: [], // 左侧表格列配置 tableConfig: [ { title: '设备名称', labels: 'machineName', }, { title: '设备编码', labels: 'machineNo', }, ], },

事件

// 拖动停止onDragStop(option) {},// 甘特图选中onHandleSelect(option) { this.selectGanttRowData = option},5、实例

6、官网地址

https://www.hcharts.cn/演示地址https://www.hcharts.cn/demo/gantt

本文链接地址:https://www.jiuchutong.com/zhishi/311949.html 转载请保留说明!

上一篇:织梦后台直接添加会员功能开发方法(织梦怎么建站)

下一篇:dedecms织梦去掉文档内链自动连接关键词的下划线(织梦的首页怎么换图片)

  • ipad扬声器在哪里设置(iPad扬声器在哪里)

    ipad扬声器在哪里设置(iPad扬声器在哪里)

  • 华为nova3i和荣耀20青春版对比(华为nova3i和荣耀10哪个好)

    华为nova3i和荣耀20青春版对比(华为nova3i和荣耀10哪个好)

  • 苹果曝光锁定怎么用(苹果曝光锁定怎么关)

    苹果曝光锁定怎么用(苹果曝光锁定怎么关)

  • 拼多多访客突然下降是什么情况(拼多多访客突然掉了)

    拼多多访客突然下降是什么情况(拼多多访客突然掉了)

  • 因特网最主要的服务方式是(因特网最主要的服务方式是www吗)

    因特网最主要的服务方式是(因特网最主要的服务方式是www吗)

  • 腾讯会议可以查看学生观看时间吗(腾讯会议可以查到别人手机号码)

    腾讯会议可以查看学生观看时间吗(腾讯会议可以查到别人手机号码)

  • 为什么快手表情包突然没了(为什么快手表情显示不出来)

    为什么快手表情包突然没了(为什么快手表情显示不出来)

  • 抖音怎么看别人的在线状态(抖音怎么看别人不留访客记录)

    抖音怎么看别人的在线状态(抖音怎么看别人不留访客记录)

  • 怎么看别人抖音点赞的人(怎么看别人抖音收藏的作品)

    怎么看别人抖音点赞的人(怎么看别人抖音收藏的作品)

  • 微信视频卡住不动有声音(微信视频卡住不动有声音跟别人视频不卡)

    微信视频卡住不动有声音(微信视频卡住不动有声音跟别人视频不卡)

  • 支付宝拉黑好友期间的可以收到信息吗(支付宝拉黑好友还能看到信息么)

    支付宝拉黑好友期间的可以收到信息吗(支付宝拉黑好友还能看到信息么)

  • 华为手表gt支持苹果吗(华为手表gt支持音乐播放吗)

    华为手表gt支持苹果吗(华为手表gt支持音乐播放吗)

  • 小米扫地机器人1c和1s有什么区别(小米扫地机器人连接wifi教程)

    小米扫地机器人1c和1s有什么区别(小米扫地机器人连接wifi教程)

  • 蓝牙影响wifi速度解决(蓝牙会影响网络速度吗)

    蓝牙影响wifi速度解决(蓝牙会影响网络速度吗)

  • 怎么看一篇文章有多少字(怎么看一篇文章是sci几区)

    怎么看一篇文章有多少字(怎么看一篇文章是sci几区)

  • 什么是Breeno(什么是breeno速览)

    什么是Breeno(什么是breeno速览)

  • 显卡自带声卡吗(显卡自带声卡吗怎么设置)

    显卡自带声卡吗(显卡自带声卡吗怎么设置)

  • 电脑没有网络怎么安装驱动(电脑没有网络怎么办)

    电脑没有网络怎么安装驱动(电脑没有网络怎么办)

  • sim卡已关闭什么意思(sim卡已关闭了打不开怎么办)

    sim卡已关闭什么意思(sim卡已关闭了打不开怎么办)

  • qq显示忙碌是什么意思(qq忙碌是啥意思)

    qq显示忙碌是什么意思(qq忙碌是啥意思)

  • 苹果手机有5g手机吗(苹果手机5g手机壳)

    苹果手机有5g手机吗(苹果手机5g手机壳)

  • 夸克链信怎么注销账号(夸克链信网页版登录)

    夸克链信怎么注销账号(夸克链信网页版登录)

  • 华为日历怎么显示行程(华为日历怎么显示黄历宜忌)

    华为日历怎么显示行程(华为日历怎么显示黄历宜忌)

  • soul登不上去怎么回事(soul登不了怎么办)

    soul登不上去怎么回事(soul登不了怎么办)

  • vivox27有红外功能吗(vivox27有红外线)

    vivox27有红外功能吗(vivox27有红外线)

  • 怎么把qq的表情包弄到微信里(怎么把qq的表情包转移到微信)

    怎么把qq的表情包弄到微信里(怎么把qq的表情包转移到微信)

  • 2400万像素算高吗(2400万像素相机够用吗)

    2400万像素算高吗(2400万像素相机够用吗)

  • 如何解决蓝屏错误提示c000021a(如何解决蓝屏错误代码0x000007B问题)

    如何解决蓝屏错误提示c000021a(如何解决蓝屏错误代码0x000007B问题)

  • 报个税的工资表
  • 建筑企业利润率低的原因
  • 综保区和自贸区的联系
  • 增值税专用发票电子版
  • 完税证明必须本人办理吗
  • 开办费抵扣多少企业所得税
  • 境外投资子公司审计报告人民币汇率
  • 上市公司现金流充足说明什么
  • 增值税税收返还资料
  • 生育津贴个税汇算清缴可以扣除吗
  • 境内企业是否可以出境
  • 发票上的备注怎么填写步骤
  • 固定资产进项税的账务处理
  • 购买国债兑现时要交税吗
  • 纸巾可以开专票吗
  • 微众银行账户验证账户0019向您尾号677账户
  • 月末增值税怎么计算
  • 社保支付账号是什么
  • 个人缴付的年金是什么
  • 现金支付奖金
  • 收到商品预付款怎么做分录
  • mac硬盘的常见问题及解决
  • 在win7系统中将打开窗口拖到屏幕顶端
  • 自产货物用于生产
  • 应付股利的会计科目
  • php curd
  • 捐赠与赞助
  • 文件错误会追究拟稿人吗
  • 虚假财务报表的法律后果
  • 长期借款科目的期末余额反映尚未偿还的借款本金
  • flex布局子元素height100
  • Docker部署nginx
  • icon图标教程
  • 收到现金股利会影响利润吗
  • 塔卡夫斯基镜子
  • php curl_exec
  • 单图像三维重建
  • 建筑企业安装水电过程中很难发现的潜在问题
  • nodejs如何使用
  • 【Netty系列・高级篇】Netty核心源码解析
  • 业务招待费可以结转以后年度扣除吗
  • 小规模企业所得税优惠政策最新2022
  • 所得税汇算清缴调整项目
  • 小企业会计准则调整以前年度费用分录
  • 资产负债有哪些科目
  • 什么叫做固定资本
  • 已认证被作废发什么短信
  • 物流公司挂靠会计处理?
  • 公司销售一批物品怎么做
  • 计提个人所得税会计分录怎么做账
  • 季节性停工固定资产折旧计入什么科目
  • 对公账户付个人工资怎么入账
  • 专用发票过期未认证最新规定
  • 装订好的凭证可以拿掉一页吗
  • 房产税什么时候开始征收2023
  • win7哪年停止更新
  • ubuntu怎么样
  • git checkout撤销
  • win10系统开不了热点
  • 小米4刷windows 10
  • hp是什么软件缩写
  • oeloader.exe - oeloader是什么进程 有什么用
  • linux 截屏
  • win8系统笔记本忘记开机密码怎么办
  • ,linux
  • .json()
  • Extjs4 类的定义和扩展实例
  • yarn和npm一起使用冲突
  • adt Failed to create the Java Virtual Machine.
  • curl发送formdata
  • android界面控件
  • shell字符串比较相等
  • unity 静态函数
  • android:padding="10dp"
  • jquery手册手机版
  • python函数的方法
  • 广东省国家税务局电子发票系统,网络设置
  • 丹阳税务局一分局领导
  • 税务稽查立案标准的法律文件
  • 郑州广电地址
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设