var girth = [8.3, 8.6, 8.8, 10.5, 10.7, 10.8, 11.0, 11.0, 11.1, 11.2, 11.3, 11.4, 11.4, 11.7, 12.0, 12.9, 12.9, 13.3, 13.7, 13.8, 14.0, 14.2, 14.5, 16.0, 16.3, 17.3, 17.5, 17.9, 18.0, 18.0, 20.6];

// See https://github.com/ecomfe/echarts-stat
var bins = ecStat.histogram(girth);

var interval;
var min = Infinity;
var max = -Infinity;

var data = echarts.util.map(bins.data, function (item, index) {
    var x0 = bins.bins[index].x0;
    var x1 = bins.bins[index].x1;
    interval = x1 - x0;
    min = Math.min(min, x0);
    max = Math.max(max, x1);
    return [x0, x1, item[1]];
});

function renderItem(params, api) {
    var yValue = api.value(2);
    var start = api.coord([api.value(0), yValue]);
    var size = api.size([api.value(1) - api.value(0), yValue]);
    var style = api.style();

    return {
        type: 'rect',
        shape: {
            x: start[0] + 1,
            y: start[1],
            width: size[0] - 2,
            height: size[1]
        },
        style: style
    };
}

option = {
    title: {
        text: 'Girths of Black Cherry Trees',
        subtext: 'By ecStat.histogram',
        sublink: 'https://github.com/ecomfe/echarts-stat',
        left: 'center',
        top: 10
    },
    color: ['rgb(25, 183, 207)'],
    grid: {
        top: 80,
        containLabel: true
    },
    xAxis: [{
        type: 'value',
        min: min,
        max: max,
        interval: interval
    }],
    yAxis: [{
        type: 'value',
    }],
    series: [{
        name: 'height',
        type: 'custom',
        renderItem: renderItem,
        label: {
            show: true,
            position: 'insideTop'
        },
        encode: {
            x: [0, 1],
            y: 2,
            tooltip: 2,
            label: 2
        },
        data: data
    }]
};