echarts 节点拖拽

官方文档：Handbook - Apache ECharts

******************

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="/echarts/echarts.min.js"></script><script src="/jquery/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function (){const myChart = echarts.init($("#container")[0]);const symbolSize = 20;const data = [[40, -10],[-30, -5],[-76.5, 20],[-63.5, 40],[-22.1, 50]];myChart.setOption({title: {text: '节点拖拽',left: 'center',textStyle: {color: '#826'}},tooltip: {triggerOn: 'none',formatter: function (params) {return ('X: ' +params.data[0].toFixed(2) +'<br>Y: ' +params.data[1].toFixed(2));}},grid: {top: '8%',bottom: '12%'},dataset:{source: data},xAxis: {min: -100,max: 70,type: 'value',axisLine: { onZero: false }},yAxis: {min: -30,max: 60,type: 'value',axisLine: { onZero: false }},dataZoom: [{type: 'slider',xAxisIndex: 0,filterMode: 'none'},{type: 'slider',yAxisIndex: 0,filterMode: 'none'}],series: [{id: 'a',type: 'line',smooth: true,symbolSize: symbolSize,}]});setTimeout(function () {myChart.setOption({graphic: echarts.util.map(data, function (dataItem, dataIndex) {//使用graphic组件，在每个点上覆盖一个可拖拽的圆点return {type: 'circle',               //每个数据节点都是一个圆点shape: { r: symbolSize / 2},  //圆点半径position: myChart.convertToPixel('grid', dataItem), //圆点位置invisible: true,              //若为false，则为实心圆；为true，则为空心圆draggable: true,              //表示节点可拖拽ondrag: echarts.util.curry(onPointDragging, dataIndex),   //节点拖拽，修改series数据onmousemove: echarts.util.curry(showTooltip, dataIndex),  //鼠标移入，显示提示框onmouseout: echarts.util.curry(hideTooltip),              //鼠标移出，隐藏提示框z: 100};})})}, 0);window.addEventListener('resize', updatePosition);  //窗口大小改变时，调整节点位置myChart.on('dataZoom', updatePosition);             //容器大小改变时，调整节点位置function updatePosition() {          //调整节点位置myChart.setOption({graphic: echarts.util.map(data, function (item, dataIndex) {return {position: myChart.convertToPixel('grid', item)};})});}function showTooltip(dataIndex) {     //显示提示框myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: dataIndex});}function hideTooltip() {              //隐藏提示框myChart.dispatchAction({type: 'hideTip'});}function onPointDragging(dataIndex) {  //节点拖拽data[dataIndex] = myChart.convertFromPixel('grid', this.position);myChart.setOption({series: [{id: 'a',data: data}]});}})</script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
</body>
</html>

echarts 节点拖拽相关推荐

C#实现树型结构TreeView节点拖拽的简单功能，附全部源码，供有需要的参考
为什么80%的码农都做不了架构师?>>> 应用软件是否好用就体现在一些细节操作上,开发人员是否考虑到了很多细节,例如一个树形结构的数据若不支持拖拽功能那用起来会很糟糕一些,用户 ...
jstree 节点拖拽保存数据库
需要jstree具有拖拽功能需要在加载jstree时添加dnd插件,具体看代码: $('**').jstree({//plugins-各种jstree的插件引入,展示树的多样性 'plugins' : ...
053可视化编程节点拖拽交互处理方案一：Dom节点插入
053可视化编程节点拖拽交互处理方案一:Dom节点插入拖拽启动时handlerDragstart记录DragDom dragDom = document.getElementById(treeTyp ...
jQuery MiniUI 开发教程 TreeGrid 节点拖拽（四）
[b]TreeGrid:节点拖拽[/b] [img]http://www.miniui.com/docs/api/images/dragdropnode.png[/img] 参考示例: [url=ht ...
chart 完成拓扑图单节点拖拽不影响其他节点位置
就是做这种的功能,箭头原本是可以动态重复移动的,但不知道哪里问题导致没箭头了,然后补了个edgeSymbol: ['','arrow'], 字段,才增加了箭头. 拖拽某个节点,只有关联到的线条会跟着变 ...
VUE中使用Antv.X6实现将侧边导航栏节点拖拽到画布中，并能够将画布保存到缓存中
直接上代码,参考官网的文档安装完之后可以直接运行. <template><div class="home"><div class="left ...
echarts 地图拖拽和缩放
禁止拖拽和缩放在配置中roam设置为false,开启为true 只拖拽或只缩放缩放 roam设置为'scale',拖拽roam设置为'move'
Delphi TreeView树型框节点拖拽停靠、按条件开始拖拽
OnDragOver处理是否允许放下 procedure TMainForm.TreeViewDragOver(Sender, Source: TObject; X, Y: Integer; Stat ...
`echarts`实现关系图拖拽
echarts 目标:echarts实现关系图拖拽效果:当所有的节点都处在高亮的状态时,可以拖拽任何节点.当点击其中一个节点与之有直接联系的节点高亮,其他的置灰.并且高亮的节点均可拖拽.点击空白处时 ...
两棵el-tree的节点跨树拖拽实现
在使用element-ui框架时,我们经常会用到el-tree组件.该组件支持在树上任意拖拽节点,但默认不支持将节点拖拽到树的外部,如一个外部div内,或另一棵el-tree上. 关于如何将树上的节点 ...

echarts 节点拖拽

echarts 节点拖拽

******************

echarts 节点拖拽相关推荐

最新文章

热门文章