Apache ECharts 是一个数据可视化的开源库，主要用于展示各种统计图表。它提供了丰富的绘图工具，包括直线、矩形和铅笔工具。

下面是绘制直线、矩形和铅笔工具的示例代码：

//绘制直线 myChart.on('mousedown', function (params) { var rect = params.event.target.getBoundingClientRect(); var x = params.event.clientX - rect.left; var y = params.event.clientY - rect.top; var start = myChart.convertFromPixel({ seriesIndex: 0 }, [x, y]); myChart.getZr().on('mousemove', move); myChart.getZr().on('mouseup', end);

function move(params) {
    var rect = params.event.target.getBoundingClientRect();
    var x = params.event.clientX - rect.left;
    var y = params.event.clientY - rect.top;
    var end = myChart.convertFromPixel({ seriesIndex: 0 }, [x, y]);
    myChart.setOption({
        graphic: [{
            type: 'line',
            shape: {
                x1: start[0],
                y1: start[1],
                x2: end[0],
                y2: end[1]
            },
            style: {
                lineWidth: 2
            }
        }]
    });
}

function end(params) {
    myChart.getZr().off('mousemove', move);
    myChart.getZr().off('mouseup', end);
}

});

//绘制矩形 myChart.on('mousedown', function (params) { var rect = params.event.target.getBoundingClientRect(); var x = params.event.clientX - rect.left; var y = params.event.clientY - rect.top; var start = myChart.convertFromPixel({ seriesIndex: 0 }, [x, y]); myChart.getZr().on('mousemove', move); myChart.getZr().on('mouseup', end);

function move(params) {
    var rect = params.event.target.getBoundingClientRect();
    var x = params.event.clientX - rect.left;