位置: 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织梦去掉文档内链自动连接关键词的下划线(织梦的首页怎么换图片)

  • 微信怎么看别人的添加来源(微信怎么看别人撤回了什么消息)

    微信怎么看别人的添加来源(微信怎么看别人撤回了什么消息)

  • 快手点赞作品看不见了(快手点赞作品看得到吗)

    快手点赞作品看不见了(快手点赞作品看得到吗)

  • 台式机自己可以换显卡吗(台式机自己可以更换什么)

    台式机自己可以换显卡吗(台式机自己可以更换什么)

  • 微信怎么延时到账给别人发钱(微信延迟到怎么设置)

    微信怎么延时到账给别人发钱(微信延迟到怎么设置)

  • 小米10为什么突然没有信号和网络了(小米10为什么突然开不了机)

    小米10为什么突然没有信号和网络了(小米10为什么突然开不了机)

  • 微信正在输入在什么情况下显示(微信上面正在输入)

    微信正在输入在什么情况下显示(微信上面正在输入)

  • 抖音访客怎么查询(抖音访客怎么查具体时间)

    抖音访客怎么查询(抖音访客怎么查具体时间)

  • 苹果g6开头的哪个厂(iphone g6开头是哪里的)

    苹果g6开头的哪个厂(iphone g6开头是哪里的)

  • 电脑没有蓝牙功能怎么连接蓝牙耳机(电脑没有蓝牙功能怎么连接无线鼠标)

    电脑没有蓝牙功能怎么连接蓝牙耳机(电脑没有蓝牙功能怎么连接无线鼠标)

  • 已移除蜂窝移动号码怎么回事(已移除蜂窝移动号码)

    已移除蜂窝移动号码怎么回事(已移除蜂窝移动号码)

  • opop手机听筒声小怎么办(oppo手机听筒声音很小怎么办)

    opop手机听筒声小怎么办(oppo手机听筒声音很小怎么办)

  • 数码摄像机的工作原理是什么(数码摄像机的工作原理图)

    数码摄像机的工作原理是什么(数码摄像机的工作原理图)

  • 腾讯视频vip有什么好处(腾讯视频VIP有什么好看的剧)

    腾讯视频vip有什么好处(腾讯视频VIP有什么好看的剧)

  • 把苹果id账号和密码给别人会怎样(把苹果id账号和密码能看相册吗)

    把苹果id账号和密码给别人会怎样(把苹果id账号和密码能看相册吗)

  • 罗马仕充电宝fit+是什么意思

    罗马仕充电宝fit+是什么意思

  • iphonex什么时候上市的(iphoneX什么时候生产)

    iphonex什么时候上市的(iphoneX什么时候生产)

  • 通过ip能精确定位吗(通过ip地址可以定位到多精细)

    通过ip能精确定位吗(通过ip地址可以定位到多精细)

  • 键盘上的end键在哪里(键盘的end键在哪里)

    键盘上的end键在哪里(键盘的end键在哪里)

  • 京东评价中心内容怎么删除(京东评价中心内容怎么写)

    京东评价中心内容怎么删除(京东评价中心内容怎么写)

  • 怎样打开压缩文件(怎样打开压缩文件夹)

    怎样打开压缩文件(怎样打开压缩文件夹)

  • 无感支付微信怎么用(无感支付微信和支付宝都开通)

    无感支付微信怎么用(无感支付微信和支付宝都开通)

  • 黑鲨烧鸡模式如何开启(黑鲨2pro烧鸡模式怎么开)

    黑鲨烧鸡模式如何开启(黑鲨2pro烧鸡模式怎么开)

  • 飞猪怎么查看购买历史(飞猪在哪里看)

    飞猪怎么查看购买历史(飞猪在哪里看)

  • 笔记本电脑任务栏没反应(笔记本电脑任务管理器快捷键ctrl+alt+)

    笔记本电脑任务栏没反应(笔记本电脑任务管理器快捷键ctrl+alt+)

  • 微博信用分怎么看(微博信用分怎么提690)

    微博信用分怎么看(微博信用分怎么提690)

  • mac切换不了中文咋办? mac没有将文字转换为简体中文解决办法(mac切换不了中文怎么回事)

    mac切换不了中文咋办? mac没有将文字转换为简体中文解决办法(mac切换不了中文怎么回事)

  • 赠与税是什么税种
  • 个体定期定额怎么征税2023
  • 金税盘当月不抵扣如何做分录
  • 公司买的微波炉计入什么科目
  • 企业所得税退抵税费申请(汇算清缴)怎么撤销
  • 支票盖财务章盖在哪里
  • 应交税金应交增值税已交税金怎么结转
  • 增值税税率如何计算
  • 应交税费附加税期末有余额吗
  • 营改增对建筑业的影响有哪些
  • 预缴税款怎么操作
  • 地税有哪些税种类型
  • 国外汇款 用什么理由
  • 餐饮行业月营业额怎么算
  • 公户以借款形式打款给个人,对个人有影响么?
  • 应收账款坏账收回会计处理
  • 实际成本法的会计分录怎么写
  • bootmgr is missing怎么手动解决
  • win10如何关闭自动修复
  • 卸载软件怎么清理干净
  • 拦截恶意网址是什么意思
  • 结转人工费会计分录
  • 当期损益都有啥
  • 免抵退税的账务处理
  • 补充医疗税前扣除还是税后扣除
  • 计提折旧和计提减值
  • element-ui表格
  • javascript语言基础
  • 国有土地租赁合同规定多少年
  • 刚购入的固定资产怎么算
  • jsoup js
  • css实现文字颜色渐变
  • css过渡动画属性
  • node.js deno
  • echarts中国地图代码
  • yii框架搭建
  • js不同类型的工厂函数
  • 实发工资知道如何发放吗
  • 苹果2021年在中国不能用了吗
  • 免抵退申报汇总表在哪里
  • 成本费用票包括哪些
  • 织梦栏目描述调用
  • 报销备用金的摘要
  • php脚本加密
  • 出口货物不缴纳增值税
  • 开工程款发票有什么规定?
  • 清税证明怎么在网上申请
  • 过路费报销计入什么科目
  • 自然人股东原价转让股权
  • 研发费用的范围包括哪些
  • 税务局核定税种需要多久
  • 每季度末是什么意思
  • 福利费需要通过应付职工薪酬吗
  • 公户转到老板私户要多久
  • 支付货款怎么做记账凭证
  • 职工罚款的会计处理办法
  • 销售费用进项税抵扣
  • 资金信息综合服务
  • 汇算清缴前取得发票可以税前扣除吗
  • 以前年度调整
  • 建筑企业工程项目物资管理驼中华
  • windows8.
  • win8激活点不进去
  • win8升win8.1
  • windows10mode
  • centos的防火墙怎么关
  • win7 0x80070002处理方法
  • win8功能大全介绍
  • js中事件的三要素
  • Node.js中的核心模块包括哪些内容?
  • unity的monodevelop
  • 有道词典下载安装
  • 天龙3d畅游端下载
  • python用什么编辑
  • python的入门教程
  • 60后歌手有哪些
  • 河南的省直
  • 发票查验怎么弄
  • 地税局开的发票
  • 中国古代的税收制度的演变
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设