【echarts】甘特图

javascript 复制代码
const milestones = [
    { progress: 100, milestoneName: '阶段一', startDate: '2020-12-23', endDate: '2021-01-30' },
    { progress: 100, milestoneName: '阶段二', startDate: '2021-01-15', endDate: '2021-03-15' },
    { progress: 100, milestoneName: '阶段三', startDate: '2021-03-10', endDate: '2021-04-05' },
    { progress: 94, milestoneName: '阶段四', startDate: '2021-04-06', endDate: '2021-04-29' },
    { progress: 0, milestoneName: '阶段五', startDate: '2021-04-30', endDate: '2021-05-03' },
];

const colors = [
'#f19489',
'#bb8fce',
'#85c1e9',
'#76d7c3',
'#81e0aa',
'#f7dc6f',
'#e59865'
]

const categories = milestones.map(milestone => milestone.milestoneName);
const data = milestones.map((milestone, index) => {
    const startTime = new Date(milestone.startDate).getTime();
    const endTime = new Date(milestone.endDate).getTime();
    const duration = endTime - startTime;
    
    return {
        name: milestone.milestoneName,
        value: [
            index,         // category index
            startTime,     // start time
            endTime,       // end time
            duration       // duration in milliseconds
        ],
        itemStyle: {
            normal: {
                color: colors[index]
            }
        }
    };
});

function renderItem(params, api) {
    const categoryIndex = api.value(0);
    const start = api.coord([api.value(1), categoryIndex]);
    const end = api.coord([api.value(2), categoryIndex]);
    const height = api.size([0, 1])[1] * 0.6;

    const rectShape = echarts.graphic.clipRectByRect({
        x: start[0],
        y: start[1] - height / 2,
        width: end[0] - start[0],
        height: height
    }, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
    });

    return rectShape && {
        type: 'rect',
        shape: rectShape,
        style: api.style()
    };
}

option = {
    tooltip: {
        formatter: function (params) {
            return params.marker + params.name + ': ' + (params.value[3] / 1000 / 60 / 60 / 24).toFixed(1) + ' days';  // converting ms to days
        }
    },
    dataZoom: [{
        type: 'slider',
        filterMode: 'weakFilter',
        showDataShadow: false,
        top: 400,
        height: 10,
        borderColor: 'transparent',
        backgroundColor: '#e2e2e2',
        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
        handleSize: 20,
        handleStyle: {
            shadowBlur: 6,
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            shadowColor: '#aaa'
        },
        labelFormatter: ''
    }, {
        type: 'inside',
        filterMode: 'weakFilter'
    }],
    grid: {
        height: 300
    },
    xAxis: {
        type: 'time',
        axisLabel: {
            formatter: function (val) {
                return new Date(val).toLocaleDateString();
            }
        }
    },
    yAxis: {
        type: 'category',
        data: categories
    },
    series: [{
        type: 'custom',
        renderItem: renderItem,
        encode: {
            x: [1, 2],
            y: 0
        },
        data: data
    }]
};
相关推荐
像是套了虚弱散2 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan2 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15883 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追4 小时前
Vue组件化开发
前端·html
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长4 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH4 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴4 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30735 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构