HighCharts

Siona

let chartData = {
    accessibility: {
        enabled: false, // 设置为 false，控制台才不会有警告 “未进入 accessibility.js”
        // point: {
        //     descriptionFormat: '{yCategory}. ' +
        //         '{#if completed}Task {(multiply completed.amount 100):.1f}% completed. {/if}' +
        //         'Start {x:%Y-%m-%d}, end {x2:%Y-%m-%d}.'
        // }
    },
    // 去除版权信息
    credits: {
        enabled: false,
    },
    plotOptions: {
        series: {
            // animation: false, // Do not animate dependency connectors
            // dragDrop: {
            //     draggableX: true, // 横向拖拽
            //     draggableY: false, // 纵向拖拽
            //     dragMinY: 0, // 纵向拖拽下限
            //     dragMaxY: 3, // 纵向拖拽上限
            //     dragPrecisionX: 3600000, // 横向拖拽精度，单位毫秒
            // },
            // 进度条上的 label
            dataLabels: {
                enabled: true,
                format: "{point.name}",
                style: {
                    cursor: "default",
                    pointerEvents: "none",
                    color: "#ffffff",
                },
            },
            allowPointSelect: true, // 允许点击选择
        },
        // gantt: {
        //     visible: false
        // }
    },
    series: [
        {
            type: 'gantt', // 不填，也可
            // crisp: false,
            name: 'Project 1',
            // 数据
            data: [
                {
                    start: Date.UTC(2024, 4, 1),
                    end: Date.UTC(2024, 4, 2),
                    name: 'PC339910001',
                    output: 1500,
                    priority: '低',
                    y: 0
                },
                {
                    start: Date.UTC(2024, 4, 2),
                    end: Date.UTC(2024, 4, 5),
                    name: 'PC339910002',
                    output: 500,
                    priority: '高',
                    y: 1  // 若 y 相同，则是两个进度条。例如，2024-05-01 至 2024-05-10，2024-05-12 至 2024-05-22 两段
                },
            ],
        }
    ],
    tooltip: {
        // 回调函数，进度条上显示的弹框内容，也可使用 pointFormatter，但是会有自带的自定义限制，不如 formatter 可自定义的范围大
        formatter: function () {
            return `<div>
                         ${this.point.name}
                        <br />
                        <br />
                        <span>开始时间：${moment(this.point.start).format("YYYY-MM-DD")}</span><br />
                        <span>结束时间：${moment(this.point.end).format("YYYY-MM-DD")}</span><br />
                        <span>优先级：${PRIORITYS[this.point.priority]}</span><br />
                        <span>产量：${this.point.output}</span>
                        </div>
                       `
        }
    },
    // x 轴
    xAxis: [{
        currentDateIndicator: false, // 当前日期指示器
        gridLineWidth: 1, // 线的宽度
        grid: {
            borderWidth: 1, // 表格边框宽度
            cellHeight: 35, // 表格高度
        },
        labels: { // 标签
            align: "center", // 对齐方式：left、center、right
            formatter: function () {
                // 回调函数
                // return `${console.log(0, moment(dateRange.value.end).add(3, "day"))} `;
                return `<span style="font-size: 0.8em;">${WEEKS[moment(this.value).format("d")]}</span>`;
            },
            distance: 15,
        },
        minTickInterval: 1000 * 60 * 60 * 24,
        min: moment(dateRange.value.start).subtract(3, 'days').valueOf(),  // 最小范围
        // max: moment(dateRange.value.end).valueOf(),
        max: Date.UTC(2024, 5, 31),  // 最大范围
    }],
    // y 轴
    yAxis: [{
        // uniqueNames: true,
        type: 'category',
        // 表格
        grid: {
            // borderColor: '#3a5d96',
            // borderWidth: 1,
            enabled: true,
            columns: [
                {
                    title: {
                        text: '批次号',
                        rotation: 45,
                        y: -15,
                        x: -15,
                        style: {
                            width: '100px'
                        }
                    },
                    labels: {
                        format: '{point.name}'
                    }
                },
                {
                    title: {
                        text: '优先级',
                        rotation: 45,
                        y: -15,
                        x: -15,
                        style: {
                            width: '100px'
                        }
                    },
                    labels: {
                        formatter: function () {
                            return `${PRIORITYS[this.point.priority]}`
                        }
                    }
                },
            ]
        }
    }],
}

const initGanttCharts = () => {
    Highcharts.setOptions({
        lang: zh
    });
    Highcharts.ganttChart('gantt-chart', chartData);
}

使用

<template>
    <div id="gantt-chart"></div>
</template>

<script setup>
    import Highcharts from "highcharts"
    import HighchartsGantt from "highcharts/modules/gantt"
    import { onMounted } from "vue";
    import zh from "@/components/charts/highcharts/zh";
    import axios from "axios";
    import moment from "moment";

    HighchartsGantt(Highcharts);
const WEEKS = {
    0: "日",
    1: "一",
    2: "二",
    3: "三",
    4: "四",
    5: "五",
    6: "六",
};

// 优先级
const PRIORITYS = {
    1: "高",
    2: "中",
    3: "低",
};

// 上面有写，此处内容省略
let chartData = {}

// 初始化甘特图
const initGanttCharts = () => {
    Highcharts.setOptions({
        lang: zh
    });
    Highcharts.ganttChart('gantt-chart', chartData);
} 

onMounted(() => {
    initGanttCharts();
    getGantt();
})
    
</script>

<style scoped>
    #gantt-chart {
        min-width: 800px;
        max-width: 80%;
        margin: 3vh auto auto;
        overflow: hidden;
    }
</style>

zh.js 内容

// src/components/charts/highcharts/zh.js
const zh = {
    months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    weekdays: ["日", "一", "二", "三", "四", "五", "六"],
    noData: "暂无数据",
}

export default zh;

HighCharts

HighCharts

官方文档

Gantt 甘特图

目录