SOURCE

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    backgroundColor: '#FFF',
    // title: {
    //     text: '工时汇总',
    //     subtext: '数据纯属虚构',
    //     left: '10%',
    //     top: '5%',
    // },
    tooltip: {
        show: true,
        trigger: 'axis',
        showDelay: 0,
        //formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
        axisPointer: {
            type: 'shadow'
        }
    },
    toolbox: {
        feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    legend: {
        data: ['已消耗工时', '剩余工时', '可用工时'],
        icon: 'roundRect',
        left: 'center',
        // top: '5%',
    },
    grid: {
        left: '3%',
        right: '10%',
        bottom: '0%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        //max:120,
        splitLine: {
            show: false
        },
        axisLabel: {
            formatter: '{value} '
        }
    },
    yAxis: {
        // boundaryGap: true,

        axisLine: {
            show: true,
            lineStyle: {
                color: '#D9D9D9'
            }
        },
        axisTick: {
            show: false
        },
        data: [
            'bob', 'jojo', 'Aki', 'shinna', 'steve', 'mike ', 'dd', 'kk', 'ff', 'six', 'gg', 'bb'
        ]
    },

    series: [
        {
            name: '可用工时',
            type: 'line',
            itemStyle: {
                color: '#16D448'
            },
            markPoint: {
                symbol: 'pin',
                label: {
                    normal: {
                        show: true,
                        align: 'center',
                        color: 'WHITE',
                        fontWeight: 100,
                        formatter: '{b}'
                    }
                },
                itemStyle: {
                    normal: {
                        color: {
                            type: 'radial',
                            x: 0.4,
                            y: 0.4,
                            r: 0.9,
                            colorStops: [{
                                offset: 0,
                                color: '#51e0a2'
                            }, {
                                offset: 1,
                                color: 'rgb(33,150,243)'
                            }],
                            globalCoord: false
                        },
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                    }
                },
                data: [{
                    name: '2308A',
                    coord: [468, 11]
                }]
            },
            data: [265, 390, 300, 390, 585, 300, 194, 297, 578, 468, 578, 468]
        },
        {
            name: '可用工时',
            type: 'line',
            itemStyle: {
                color: '#16D448'
            },
            markPoint: {
                symbol: 'pin',
                label: {
                    normal: {
                        show: true,
                        align: 'center',
                        color: 'WHITE',
                        fontWeight: 100,
                        formatter: '{b}'
                    }
                },
                itemStyle: {
                    normal: {
                        color: {
                            type: 'radial',
                            x: 0.4,
                            y: 0.4,
                            r: 0.9,
                            colorStops: [{
                                offset: 0,
                                color: '#51e0a2'
                            }, {
                                offset: 1,
                                color: 'rgb(33,150,243)'
                            }],
                            globalCoord: false
                        },
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                    }
                },
                data: [{
                    name: '2308A',
                    coord: [568, 11]
                }]
            },
            data: [375, 520, 400, 500, 685, 574, 894, 397, 678, 568, 678, 568]
        },
        {
            name: '已消耗工时',
            type: 'bar',
            stack: 'worktime',
            barWidth: 26,
            // z: 10,
            itemStyle: {
                color: '#5B8FF9'
            },
            label: {
                show: true,
                color: '#fff'
            },
            data: [300, 194, 297, 578, 468, 578, 265, 390, 300, 390, 585, 300]
        },
        {
            name: '剩余工时',
            type: 'bar',
            stack: 'worktime',
            barWidth: 26,
            itemStyle: {
                color: '#8AC3F5'
            },
            label: {
                show: true,
                color: '#fff'
            },
            // z: 20,
            data: [300, 400, 450, 480, 570, 390, 300, 390, 585, 300, 194, 390]
        },

    ]
};

option && myChart.setOption(option);

<body>
  <div id="main" style="width: 900px;height:700px;"></div>
</body>