java实现坐标图进行拖拉拽放_ECharts实例一：拖拽的实现

Echarts 如何实现拖拽

下面描述了一个能够实现拖拽的实例，该实例是在 Echarts 的基础上的扩展，我们可以通过该例子了解到怎么利用 Echarts 提供的 API 实现定制化的富有交互的功能。

上述实例达到的功能：您可以使用鼠标拖拽图中曲线上的点，然后就能够改变曲线的形状。

上述实现拖拽的例子还很基础，但是学会上述例子之后我们能够进行更多的操作，比如在图中可视化的编辑。

Echarts 本身没有提供封装好的拖拽改变图表的功能，因为现在这个功能被认为不具备通用性。因此开发者要实现这个功能就要使用 API ，这样做的好处是能够让开发者按自己的需要进行设置。

(一)实现基本的拖拽功能

在这个例子中，基础的图表是一个 折线图 (series-line)。详细配置如下：var symbolSize = 20;

// 这个 data 变量在这里单独声明，在后面也会用到。

var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];

myChart.setOption({

xAxis: {

min: -100,

max: 80,

type: 'value',

axisLine: {onZero: false}

},

yAxis: {

min: -30,

max: 60,

type: 'value',

axisLine: {onZero: false}

},

series: [

{

id: 'a',

type: 'line',

smooth: true,

symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。

data: data

}

]

});

折线点原本并没有拖拽功能，需要我们为它加上：使用 graphic 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点，具体操作如下：myChart.setOption({

// 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。

// 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype