2021-08-23 echart实现间断柱状图方法

实现这种效果的代码如下

    // echart配置
    var option = {
        tooltip: {//提示框
            formatter: function (params) {
                return params.name + ':' + params.value[1] + '~' + params.value[2];
            }//数据的值
        },
        grid: {//绘图网格
            left: '3%',
            right: '3%',
            top: '1%',
            bottom: '10%',
            containLabel: true,
            color:'#000000'
        },
        xAxis: {
    data: ["09:00","10:00","11:00", "12:00", "13:00", "14:00", "15:00", "16:00" ,"17:00","18:00"]
  },
        yAxis: {
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期七']
        },
        series: [
            // 用空bar来显示四个图例
            {
                type: 'custom',                
                renderItem: function (params, api) {//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
                    var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
                    var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
                    var end = api.coord([api.value(2), categoryIndex]);
                    var height = 24;//柱体宽度
 
                    return {
                        type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                        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], // data 中『维度1』和『维度2』对应到 X 轴
                    y: 0// data 中『维度0』对应到 Y 轴
                },
                data: [ // 维度0 维度1 维度2
                  
                  {
                      itemStyle: { 
                        normal: { 
                          color: '#E800E8'
                        } 
                      },
                      name: '会议',
                      value: [1, '09:00', '12:00']
                  },
                  {
                      itemStyle: { normal: {  color: '#D26900' } },
                      name: '会议',
                      value: [1, '15:00', '16:00']
                  },
                {
                    itemStyle: { normal: { color: '#D26900' } },
                    name: '会议',
                    value: [3, '12:00', '17:00']
                },
                {
                      itemStyle: { normal: {  color: '#D26900' } },
                      name: '会议',
                      value: [4, '10:00', '16:00']
                  },
                ]
            }
        ]
    };

一个小demo记录一下