echarts 可拖拽线条

原生线条并没有提供可拖拽能力,通过graphic中的圆定位到线条上然后隐藏,再使用graphic图形的可拖拽,然后进行像素等转换成线条的数据注意使用myChart.convertToPixel('grid', [x,y])        将数值转换成像素,使得graphic中的圆能够定位到线条上在移动过程中myChart.convertFromPixel('grid', [x,y]);   将像素转换成坐标系上的数值,使得线条能够重新定位

代码示例:

var symbolSize = 20;
var data = [[40, -10], [-30, -5], [-76.5, 20], [-63.5, 40], [-22.1, 50]];option = {title: {text: 'Try Dragging these Points',left: 'center'},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%',},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'},{type: 'inside',xAxisIndex: 0,filterMode: 'none'},{type: 'inside',yAxisIndex: 0,filterMode: 'none'}],series: [{id: 'a',type: 'line',smooth: true,symbolSize: symbolSize,data: data}]
};setTimeout(function () {// Add shadow circles (which is not visible) to enable drag.myChart.setOption({graphic: data.map(function (item, dataIndex) {return {type: 'circle',position: myChart.convertToPixel('grid', item),shape: {cx: 0,cy: 0,r: symbolSize / 2},invisible: true,draggable: true,ondrag: function (dx, dy) {onPointDragging(dataIndex, [this.x, this.y]);},onmousemove: function () {showTooltip(dataIndex);},onmouseout: function () {hideTooltip(dataIndex);},z: 100};})});
}, 0);window.addEventListener('resize', updatePosition);myChart.on('dataZoom', updatePosition);function updatePosition() {myChart.setOption({graphic: data.map(function (item, dataIndex) {return {position: myChart.convertToPixel('grid', item)};})});
}function showTooltip(dataIndex) {myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: dataIndex});
}function hideTooltip(dataIndex) {myChart.dispatchAction({type: 'hideTip'});
}function onPointDragging(dataIndex, pos) {data[dataIndex] = myChart.convertFromPixel('grid', pos);// Update datamyChart.setOption({series: [{id: 'a',data: data}]});
}

echarts 可拖拽线条相关推荐

echarts 地图拖拽和缩放
禁止拖拽和缩放在配置中roam设置为false,开启为true 只拖拽或只缩放缩放 roam设置为'scale',拖拽roam设置为'move'
`echarts`实现关系图拖拽
echarts 目标:echarts实现关系图拖拽效果:当所有的节点都处在高亮的状态时,可以拖拽任何节点.当点击其中一个节点与之有直接联系的节点高亮,其他的置灰.并且高亮的节点均可拖拽.点击空白处时 ...
使用echarts实现类似股票k图可拖拽可悬浮十字线
实现难点需要悬浮出现十字线,再次点击后可拖拽点击屏幕后鼠标悬浮实现思路点击折线图屏幕后开启或者开启可拖拽 chartDomBig.getZr().off("click");// ...
Vue 结合 echarts 原生 html5 实现拖拽排版报表系统
前言不知道各位 coder 有没有碰到过许多重复的业务需求,比如排版相类似的报表,只不过是顺序稍微换了一下,就是一个新的页面,虽然基于模板思想来写的话也能减少不少代码,但是相对的不那么方便,笔者最近 ...
chart 完成拓扑图单节点拖拽不影响其他节点位置
就是做这种的功能,箭头原本是可以动态重复移动的,但不知道哪里问题导致没箭头了,然后补了个edgeSymbol: ['','arrow'], 字段,才增加了箭头. 拖拽某个节点,只有关联到的线条会跟着变 ...
java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
低代码可视化报表开源工具，只要在线拖拽就能做出复杂数据报表
平时苦于做报表的小伙伴们,今天TJ君给你们带来一个开源低代码可视化报表项目,JimuReport,来解决你们的报表难题! JimuReport,作为一个报表项目,它拥有类似excel的操作风格,简简单 ...
react 拖拽连接插件_一款精美的 react 后台管理系统
众里寻他千百度,蓦然回首,那人却在,灯火阑珊处.这么好的react开源项目,值得珍藏了! 项目依赖模块项目是用create-react-app创建的,依赖包如下: react(是一个用于构建用户界面 ...
拖拽的方式使用qbuttongroup_【无机纳米材料科研制图——Photoshop 0402】PS使用选框工具修改图片/图层...
此篇,我们来分享使用PS的选框修改图片. 一.栅格化图形. 1)同时选中两个图层. 首先,回到上一篇中图片相互遮挡的状态.在上一篇中,我们通过调整图层的上下位置,避免了遮挡的情况,但有时候只通过调整图 ...
JimuReport 1.3.7 首个正式版本发布，免费的可视化拖拽报表
项目介绍积木报表,一款免费的可视化Web报表工具,像搭建积木一样在线拖拽设计!功能涵盖,数据报表.打印设计.图表报表.大屏设计等! 秉承"简单.易用.专业"的产品理念,极大的降低 ...

echarts 可拖拽线条

echarts 可拖拽线条相关推荐

最新文章

热门文章