ECharts

<script>
       var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            tooltip : {
                trigger: 'item',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['播种期', '出苗期','移栽期','返青期','抽穗期','成熟期'],
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
                default: '1',
                height:100,
            },
            yAxis : [
                {
                    type : 'category',
                    position: 'bottom',
                    boundaryGap: true,
                    axisLine : {
                        show: true,
                        lineStyle: {
                            color: 'green',
                            type: 'solid',
                            width: 2,
                        }
                    },
                    axisTick : { 
                        show:true,
                        length: 10,
                        lineStyle: {
                            color: '#000',
                            type: 'solid',
                            width: 2
                        }
                    },
                    data : ['水稻的生长周期']
        },
            ],
            xAxis: {
                type: 'value',
                axisLabel : {
                    formatter: function (value,index) {
                        // value格式化成月/日，只在第一个刻度显示年份
                        var date = new Date(2017,03);
                        var texts = [];

                        if (index === 1) {
                            texts = [(date.getMonth()+1), date.getDate()];
                            texts.unshift(date.getFullYear());
                        }
                        else {
                            texts = [(date.getFullYear()),(date.getMonth() + parseInt(index)), date.getDate()];
                        }
                        return texts.join('-');
                    }
                }
            },
            series: [
                {
                    name: '播种期',
                    type: 'bar',
                    stack: '总量',

                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [5,]
                },
                {
                    name: '出苗期',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [17,]
                },
                {
                    name: '移栽期',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [20, ]
                },
                {
                    name: '返青期',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [35,]
                },
                {
                    name: '抽穗期',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [10,]
                },
                {
                    name: '成熟期',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [50,]
                }
            ]
        });
    </script>