1、安裝 highcharts
npm install highcharts --save
2、頁面參考
// 引入
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 >
<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>
data中配置
// 甘特圖配置
ganttConfig: {
// 資料源
data: [],
// 左側表格列配置
tableConfig: [
{
title: '設備名稱',
labels: 'machineName',
},
{
title: '設備編碼',
labels: 'machineNo',
},
],
},
事件
// 拖動停止
onDragStop(option) {},
// 甘特圖選中
onHandleSelect(option) {
this.selectGanttRowData = https://www.cnblogs.com/psmart/archive/2023/02/13/option
},
5、實體
6、官網地址
https://www.hcharts.cn/
演示地址
https://www.hcharts.cn/demo/gantt
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/543799.html
標籤：其他
上一篇：記錄--陣列去重的五種方法