echart 狀態區間圖

這種圖形在案例中有相似的http://echarts.baidu.com/demo.html#custom-profile，是根據這個來的

function getviewbystation() {
    var myChart = echarts.init(document.getElementById('chartContent'));//加載圖形的div
    var colors = ['#2EC7C9', '#D6737A'];//兩種狀態的顏色
    var state = ['正常', '故障'];//兩種狀態

    // echart配置
    var option = {
        color: colors,
        tooltip: {//提示框
            formatter: function (params) {
                return params.name + ':' + params.value[1] + '~' + params.value[2];
            }//數據的值
        },
        legend: {//圖例
            data: state,
            bottom: '1%',
            selectedMode: false, // 圖例設爲不可點擊
            textStyle: {
                color: '#000'
            }
        },
        grid: {//繪圖網格
            left: '3%',
            right: '3%',
            top: '1%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
                    type: 'time',
                    interval: 3600 * 12 * 1000,
                    axisLabel: {                       
                        formatter: function (value) {
                            var date = new Date(value);
                            return getzf(date.getHours()) + ':' + getzf(date.getMinutes()) + '\n' + date.getDate() + '/' + (date.getMonth() + 1) + ' ';
                            function getzf(num) {
                                if (parseInt(num) < 10) {
                                    num = '0' + num;
                                }
                                return num;
                            }
                        },
                    }
        },
        yAxis: {
            data: ['監測站一', '監測站二', '監測站三']
        },
        series: [
            // 用空bar來顯示四個圖例
            { name: state[0], type: 'bar', data: [] },
            { name: state[1], type: 'bar', data: [] },
            {
                type: 'custom',
                renderItem: function (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 = 24;//柱體寬度

                    return {
                        type: 'rect',
                        shape: 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
                        }),
                        style: api.style()
                    };
                },
                encode: {
                    x: [1, 2],
                    y: 0
                },
                data: [
                  {
                      itemStyle: { normal: { color: colors[0] } },//條形顏色
                      name: '正常',
                      value: [0, '2009/6/1 2:00', '2009/6/1 24:00']//0,1,2表明y軸的索引，後兩位表明x軸數據開始和結束
                  },
                    {
                        itemStyle: { normal: { color: colors[1] } },
                        name: '故障',
                        value: [0, '2009/6/2 2:00', '2009/6/2 12:00']
                    },
                   {
                       itemStyle: { normal: { color: colors[0] } },
                       name: '正常',
                       value: [0, '2009/6/2 13:10', '2009/6/2 20:13']
                   },
                    {
                        itemStyle: { normal: { color: colors[1] } },
                        name: '故障',
                        value: [0, '2009/6/2 21:00', '2009/6/4 1:00']
                    },
                    {
                        itemStyle: { normal: { color: colors[0] } },
                        name: '正常',
                        value: [0, '2009/6/4 2:00', '2009/6/5 4:00']
                    },
                  {
                      itemStyle: { normal: { color: colors[0] } },
                      name: '正常',
                      value: [0, '2009/6/13 2:00', '2009/6/21 12:00']
                  },
                {
                    itemStyle: { normal: { color: colors[0] } },
                    name: '正常',
                    value: [1, '2009/6/1 2:00', '2009/6/13 22:00']
                },
                  {
                      itemStyle: { normal: { color: colors[1] } },
                      name: '故障',
                      value: [1, '2009/6/13 22:00', '2009/6/22 23:00']
                  },
                  {
                      itemStyle: { normal: { color: colors[1] } },
                      name: '故障',
                      value: [1, '2009/6/30 22:00', '2009/6/30 23:30']
                  },
                    {
                        itemStyle: { normal: { color: colors[1] } },
                        name: '故障',
                        value: [2, '2009/6/10 22:00', '2009/6/30 23:30']
                    },
                ]
            }
        ]
    };
    myChart.setOption(option);//引用
}
renderItem//這裏使用 api.value(0) 取出當前 dataItem 中第一個維度的數值。 // 這裏使用 api.coord(...) 將數值在當前座標系中轉換成爲屏幕上的點的像素值。// 表示這個圖形元素是矩形。還能夠是 'circle', 'sector', 'polygon' 等等。 // 矩形的位置和大小。 // 當前座標系的包圍盒。 // data 中『維度1』和『維度2』對應到 X 軸// data 中『維度0』對應到 Y 軸 // 維度0 維度1 維度2