echarts 甘特图示例代码

;
(function () {
    var myChart = echarts.init(document.getElementById('main'));
    var data = [];
    var dataCount = 10;
    var startTime = +new Date();
    var categories = ['categoryA', 'categoryB', 'categoryC', 'categoryD', 'categoryE', 'categoryF', 'categoryG', 'categoryF', 'categoryG', 'categoryF', 'categoryG'];
    var types = [{
            name: 'JS Heap',
            color: '#7b9ce1'
        },
        {
            name: 'Documents',
            color: '#bd6d6c'
        },
        {
            name: 'Nodes',
            color: '#75d874'
        },
        {
            name: 'Listeners',
            color: '#e0bc78'
        },
        {
            name: 'GPU Memory',
            color: '#dc77dc'
        },
        {
            name: 'GPU',
            color: '#72b362'
        }
    ];

    // Generate mock data
    echarts.util.each(categories, function (category, index) {
        var baseTime = startTime;
        for (var i = 0; i < dataCount; i++) {
            var typeItem = types[Math.round(Math.random() * (types.length - 1))];
            var duration = Math.round(Math.random() * 10000);
            data.push({
                name: typeItem.name,
                value: [
                    index,
                    baseTime,
                    baseTime += duration,
                    duration
                ],
                itemStyle: {
                    normal: {
                        color: typeItem.color
                    }
                }
            });
            baseTime += Math.round(Math.random() * 2000);
        }
    });

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

        var 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] + ' ms';
            }
        },
        title: {
            text: 'Profile',
            left: 'center'
        },
        dataZoom: [{
            type: 'slider',
            filterMode: 'weakFilter',
            showDataShadow: false,
            top: 300,
            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'
        }, {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            left: '90%',
            // 开始位置的数值
            startValue: 0,
            // 结束位置的数值
            endValue: 5,
            filterMode: 'weakFilter',
            // showDataShadow: true,
            // top: 300,
            width: 4,
            height: 200,
            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: 10,
            handleStyle: {
                shadowBlur: 6,
                shadowOffsetX: 1,
                shadowOffsetY: 2,
                shadowColor: '#aaa'
            }
        }],
        grid: {
            height: 200
        },
        xAxis: {
            min: startTime,
            scale: true,
            axisLabel: {
                formatter: function (val) {
                    return Math.max(0, val - startTime) + ' ms';
                }
            }
        },
        yAxis: {
            show: false,
            scale: true,
            data: categories,
            axisTick: {
                show: true
            },
        },
        series: [{
            type: 'custom',
            renderItem: renderItem,
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            encode: {
                x: [1, 2],
                y: 0
            },
            data: data
        }]
    };
    myChart.setOption(option);
    myChart.on('click', function (params) {
        console.log(params.data)
    })
})()

效果如下

gantetu.png