echarts绘制x-range

Echarts中的X-range图，也叫做甘特图，可以用来展示任务的进度和时间的分配。下面是一个简单的例子，展示如何使用Echarts绘制X-range图。

1. 在HTML文件中引入Echarts库和一个DOM容器，如下所示：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<div id="chart" style="width: 800px; height: 500px;"></div>

2. 编写JavaScript代码，配置图表的基本信息，如下所示：

var chart = echarts.init(document.getElementById('chart'));

var option = {
    title: {
        text: 'X-range图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: function(params) {
            var res = params[0].name;
            res += '<br/>' + params[0].seriesName + ' : ' + params[0].value[0] + ' - ' + params[0].value[1];
            return res;
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'category',
        data: ['任务1', '任务2', '任务3']
    },
    series: [{
        name: '任务进度',
        type: 'custom',
        renderItem: function(params, api) {
            var yValue = api.value(1);
            var start = api.coord([api.value(0), yValue]);
            var end = api.coord([api.value(1), yValue]);
            var height = api.size([0, 1])[1] * 0.6;

            return {
                type: 'rect',
                shape: {
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                },
                style: api.style({
                    stroke: '#555'
                })
            };
        },
        data: [
            [new Date('2020/01/01'), new Date('2020/03/01'), 0],
            [new Date('2020/02/01'), new Date('2020/05/01'), 1],
            [new Date('2020/04/01'), new Date('2020/07/01'), 2]
        ]
    }]
};

chart.setOption(option);

3. 最后，调用setOption方法将配置项应用到图表中。

这样，你就可以成功地制作一个基本的X-range图了。当然，你可以根据实际需要对图表进行进一步的美化和调整。