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

  • 华为手机的呼叫转移在哪里设置(华为手机的呼叫限制密码是多少)

    华为手机的呼叫转移在哪里设置(华为手机的呼叫限制密码是多少)

  • 毒上闪电发货和极速发货区别(毒闪电发货和普通有什么区别卖家)

    毒上闪电发货和极速发货区别(毒闪电发货和普通有什么区别卖家)

  • 大王卡用腾讯视频看电视要流量吗(大王卡用腾讯视频)

    大王卡用腾讯视频看电视要流量吗(大王卡用腾讯视频)

  • 华为荣耀20pro手机如何把三张照片合成一张(华为荣耀20pro手机重量)

    华为荣耀20pro手机如何把三张照片合成一张(华为荣耀20pro手机重量)

  • 苹果自动关闭软件网络(苹果自动关闭软件app)

    苹果自动关闭软件网络(苹果自动关闭软件app)

  • 电脑屏幕上有一条移动的白线(电脑屏幕上有一条线)

    电脑屏幕上有一条移动的白线(电脑屏幕上有一条线)

  • 手机可以当ETC吗(手机能当etc设备用吗)

    手机可以当ETC吗(手机能当etc设备用吗)

  • 华为手机怎么设置个人热点(华为手机怎么设置天气预报在桌面)

    华为手机怎么设置个人热点(华为手机怎么设置天气预报在桌面)

  • 快手id和快手号的区别(快手的id号和快手号有什么区别)

    快手id和快手号的区别(快手的id号和快手号有什么区别)

  • 苹果平板充不进电怎么回事开不了机(苹果平板充不进去电怎么回事)

    苹果平板充不进电怎么回事开不了机(苹果平板充不进去电怎么回事)

  • mg4j2cha是什么版本(mg4j2za/a是什么版本)

    mg4j2cha是什么版本(mg4j2za/a是什么版本)

  • 电脑主板自带网卡吗(电脑主板自带网卡是千兆吗)

    电脑主板自带网卡吗(电脑主板自带网卡是千兆吗)

  • ps怎么弄金色字体(ps怎么做出金色字)

    ps怎么弄金色字体(ps怎么做出金色字)

  • 京东怎么取消评价(京东怎么取消评价晒单)

    京东怎么取消评价(京东怎么取消评价晒单)

  • 苹果热点怎么限制人数(苹果热点怎么限速别人)

    苹果热点怎么限制人数(苹果热点怎么限速别人)

  • word中如何设置密封线(word中如何设置背景图片)

    word中如何设置密封线(word中如何设置背景图片)

  • 华为mate30防水级别(华为mate30的防水性能)

    华为mate30防水级别(华为mate30的防水性能)

  • 你撤回了一条消息怎么删除(你撤回了一条消息)

    你撤回了一条消息怎么删除(你撤回了一条消息)

  • 苹果x怎么给应用加密(苹果x怎么应用分身)

    苹果x怎么给应用加密(苹果x怎么应用分身)

  • 华为nova4游戏助手在哪(nova4游戏助手)

    华为nova4游戏助手在哪(nova4游戏助手)

  • 苹果手机突然没网络是什么原因(苹果手机突然没声音了是什么原因)

    苹果手机突然没网络是什么原因(苹果手机突然没声音了是什么原因)

  • win10蜘蛛纸牌游戏在哪? win10玩蜘蛛纸牌的技巧(w10的蜘蛛纸牌)

    win10蜘蛛纸牌游戏在哪? win10玩蜘蛛纸牌的技巧(w10的蜘蛛纸牌)

  • 个体户定期定额征收标准
  • 坏账准备要写到明细账里面吗
  • 外省人员收入怎么查
  • 从价从量复合计征
  • 展会补贴收入会计处理
  • 记账人和复核人是一个人吗
  • 小规模出租不动产免税吗
  • 小企业会计准则适用于哪些企业
  • 跨月应该如何开具红字发票?
  • 住宿费专用发票税率是多少
  • 增值税进项没收到必须开销项怎么办?
  • 个税中的其他所得税
  • 企业筹办期间,发生亏损,应该计算为亏损年度
  • 非独立核算的分公司是法人主体吗
  • 所得税网上申报表
  • 营改增后开不了增值税发票怎么样办?
  • 自产自销的产品怎么做账
  • 印花税的计税金额
  • 进项税额转出报税填哪个表
  • 金税盘用途
  • 开票软件的地址怎么修改
  • 提高并购成本
  • 软件企业用退税吗
  • 对外开具发票
  • 资产减值损失需要结转吗
  • 研发费用的税收政策
  • 电子普通发票怎么开
  • 返利销售会计处理办法
  • 所得税补税怎么申报
  • 出口退税登记证在哪办
  • 转出未交增值税和未交增值税区别
  • 一次摊销法计算公式
  • joomla组件
  • 税款差0.05是怎么处理
  • 加载分页
  • 遍历目录文件
  • 用友u8删除凭证的步骤
  • 出租房屋房产税计算
  • 应付职工薪酬住房公积金怎么算
  • 所得税汇算清缴退税会计分录怎么做
  • mysql的字符串
  • 按工资申报的工龄怎么算
  • 加班工资应如何算
  • 资产负债表的货币资金怎么算
  • SQL Server 2008中SQL查询语句字段值不区分大小写的问题解决
  • 个人取得劳务报酬个人所得税
  • 职工福利费涉及哪些科目
  • 固定资产一次性扣除政策
  • 小规模纳税人去银行开立什么账户
  • 固定资产变动方式对应科目
  • 固定资产计提折旧的账务处理
  • 小规模企业房产税税率是多少
  • 客户给我们的罚款怎么查
  • 企业取得土地补偿款
  • 外币投资计入什么科目
  • 取得股东借给公司股权
  • 库存现金过多的隐患
  • Mysql5.7.11在windows10上的安装与配置(解压版)
  • mysql获取字段中的数字
  • linux系统基本指令
  • windowsxp开机启动项在哪里设置
  • VMware虚拟机安装Android系统
  • xp关闭防火墙命令
  • mac系统怎么设置默认应用
  • win8如何安装
  • win10 20h2怎么装
  • linux系统修改
  • jquery解析json数据
  • css ie8
  • activity之间的数据回传
  • jquery $each
  • python怎么生成随机函数
  • node-js
  • python如何查询函数用法
  • linux基本代码
  • jQuery ztree实现动态树形多选菜单
  • androidapk网站
  • 威科先行法律信息库价格
  • 宁夏退休职工网上认证
  • 残疾人就业保障金怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设