Echarts在线免费图表

 
            
var data = [
    [1, 1, 2.5, 2.5],
    [2.5, 2.5, 3, 3],
    [3, 3, 4, 4],
    [4, 4, 5, 5],
    [5, 5, 15, 15]
];

var data3 = [
    [4, 4, 5, 5],
    [5, 5, 15, 15]
];

var data1 = [
    [10.0, 8.04],
    [8.0, 6.95],
    [13.0, 7.58],
    [9.0, 8.81],
    [11.0, 8.33],
    [14.0, 9.96],
    [6.0, 7.24],
    [4.0, 4.26],
    [12.0, 10.84],
    [7.0, 4.82],
    [5.0, 5.68]
]

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

    return {
        type: 'rect',
        // shape: echarts.graphic.clipRectByRect({
        //     x: start[0],
        //     y: 160,
        //     //width: end[0] - start[0],
        //     width: 5,
        //     height: height
        // }, {
        //     x: params.coordSys.x,
        //     y: params.coordSys.y,
        //     width: params.coordSys.width,
        //     height: params.coordSys.height
        // }),
        shape: {
            x: start[0],
            y: 160,
            //width: end[0] - start[0],
            width: 5,
            height: height
        },
        style: api.style()
    };
}

function renderItem1(params, api) {
    //debugger;
    var categoryIndex = api.value(0);
    var start = api.coord([api.value(0), api.value(1)]);
    var end = api.coord([api.value(2), api.value(3)]);
    var width = api.size([0, 1])[0];

    return {
        type: 'rect',
        // shape: echarts.graphic.clipRectByRect({
        //     x: start[0],
        //     y: start[1],
        //     width: end[0] - start[0],
        //     //width: width,
        //     height: 5
        // }, {
        //     x: params.coordSys.x,
        //     y: params.coordSys.y,
        //     width: params.coordSys.width,
        //     height: params.coordSys.height
        // }),
        shape: {
            x: start[0],
            y: start[1],
            width: end[0] - start[0],
            //width: width,
            height: 5
        },
        style: api.style()
    };
}

function renderItem2(params, api) {

    var categoryIndex = api.value(0);
    var start = api.coord([api.value(0), api.value(1)]);
    var end = api.coord([api.value(2), api.value(3)]);
    var width = api.size([0, 1])[0];

    //debugger;

    return {
        type: 'rect',
        // shape: echarts.graphic.clipRectByRect({
        //     x: start[0] + Math.abs(end[0] - start[0]),
        //     y: start[1] - Math.abs(end[1] - start[1]),
        //     width: 3,
        //     height: Math.abs(end[1] - start[1]) + 5
        // }, {
        //     x: params.coordSys.x,
        //     y: params.coordSys.y,
        //     width: params.coordSys.width,
        //     height: params.coordSys.height
        // }),
        
        shape: {
            x: start[0] + Math.abs(end[0] - start[0]),
            y: start[1] - Math.abs(end[1] - start[1]),
            width: 3,
            height: Math.abs(end[1] - start[1]) + 5
        },
        style: api.style()
    };
}

function renderItem3(params, api) {
    //debugger;
    var categoryIndex = api.value(0);
    var start = api.coord([api.value(0), api.value(1)]);
    var width = api.size([0, 1])[0];

    return {
        type: 'circle',
        // shape: echarts.graphic.clipRectByRect({
        //     cx: start[0],
        //     cy: start[1],
        //     r: 100
        // }, {
        //     x: params.coordSys.x,
        //     y: params.coordSys.y,
        //     width: params.coordSys.width,
        //     height: params.coordSys.height
        // }),
        shape: {
            
                cx: start[0],
                cy: start[1],
                r: 10
             
        },
        style: api.style()
    };
}

var option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['管架', '闸阀']
    },
    grid: {
        height: 300
    },
    xAxis: {
        type: 'value'
        //data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'custom',
        name: '管架',
        renderItem: renderItem,
        itemStyle: {
            normal: {
                opacity: 0.8
            }
        },
        encode: {
            x: 3,
            y: 3
        },
        data: data3
    }, {
        type: 'custom',
        renderItem: renderItem1,
        itemStyle: {
            normal: {
                opacity: 0.8
            }
        },
        encode: {
            x: 3,
            y: 3
        },
        data: data
    }, {
        type: 'custom',
        renderItem: renderItem2,
        itemStyle: {
            normal: {
                opacity: 0.8
            }
        },
        encode: {
            x: 3,
            y: 3
        },
        data: data
    }, {
        type: 'custom',
        name: '闸阀',
        renderItem: renderItem3,
        itemStyle: {
            normal: {
                opacity: 0.8
            }
        },
        data: data1
    }
    // , {
    //     type: 'scatter',
    //     name: '闸阀',
    //     data: data1
    // }
    
    ]
};