echarts折现变曲线_echarts实现折线图的拖拽效果

本文介绍了如何使用ECharts库实现一个折线图,并且让折线图的点具有拖拽功能,当点被拖动时,图表会实时更新。详细步骤包括设置图表选项、添加拖拽事件监听以及数据更新处理。示例代码中展示了如何创建一个平滑的折线图,以及在每个数据点上添加可拖拽的圆形元素。
摘要由CSDN通过智能技术生成

使用echarts实现折线图的拖拽,供大家参考,具体内容如下

var symbolSize = 20;

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

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({

# 表示不使用默认的『显示』『隐藏』触发规则。

tooltip: {

triggerOn: 'none',

formatter: function (params) {

return 'X: ' + params.data[0].toFixed(2) + '
Y: ' + params.data[1].toFixed(2);

}

},

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',

smoo

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值