echarts中使用graphic 绘制矩形 可拖拽

要实现这个功能，需要使用echarts中的`zrender`库，它提供了强大的图形渲染和事件处理功能。

具体实现步骤如下：

1. 创建一个矩形图形，并设置它的位置、大小和样式等属性。

var rect = new zrender.Rect({
    shape: {
        x: 100,
        y: 100,
        width: 100,
        height: 100
    },
    style: {
        fill: 'rgba(255, 0, 0, 0.5)',
        stroke: '#f00'
    },
    draggable: true  // 设置该矩形可拖拽
});

2. 监听矩形的拖拽事件，在事件处理函数中更新矩形的位置。

rect.on('drag', function() {
    var pos = rect.position;
    var x = pos[0];
    var y = pos[1];
    var width = rect.shape.width;
    var height = rect.shape.height;
    rect.setShape({
        x: x,
        y: y,
        width: width,
        height: height
    });
});

3. 将矩形添加到echarts图表中。

var myChart = echarts.init(document.getElementById('myChart'));
myChart.getZr().add(rect);

完整的代码示例：

var rect = new zrender.Rect({
    shape: {
        x: 100,
        y: 100,
        width: 100,
        height: 100
    },
    style: {
        fill: 'rgba(255, 0, 0, 0.5)',
        stroke: '#f00'
    },
    draggable: true
});

rect.on('drag', function() {
    var pos = rect.position;
    var x = pos[0];
    var y = pos[1];
    var width = rect.shape.width;
    var height = rect.shape.height;
    rect.setShape({
        x: x,
        y: y,
        width: width,
        height: height
    });
});

var myChart = echarts.init(document.getElementById('myChart'));
myChart.getZr().add(rect);

请注意，这种方式绘制的矩形不是echarts的标准图形，因此无法通过echarts提供的方法设置它的样式和事件处理函数，需要使用zrender库提供的方法来实现。