echarts实现多条可拖动节点的折现图
这篇博文主要是利用echarts实现两条以及多条可拖动节点的曲线，demo脱胎于官方demo,在官方demo的基础上添加了另一条曲线。因为之前写过一篇在vue中使用echarts实现可拖动节点的折线图，并可配置拖动方向及拖动上下限，所以本篇文章以最简单的方式说明如何实现多条曲线的可拖动，故不再实现其他配置，如果对上下限和拖动方向需要控制的同学可以参考我的另一篇博文：https://www.cnblogs.com/p-l-u-m/p/10691684.html；同时如果有问题或建议欢迎留言探讨。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/echarts/4.3.0/echarts-en.common.min.js"></script>
</head> <body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var symbolSize = 20;
var data1 = [[-90, -10], [-30, -10], [10, -20], [30, -10], [60, -10]]; // 第一条线
var data2 = [[-90, 10], [-30, 10], [10, 20], [30, 10], [60, 10]]; // 第二条线，多天线类推
var option = { // 基本配置，画曲线
title: {
text: 'Try Dragging these Points'
},
/* tooltip: {
triggerOn: 'none',
formatter: function (params) {
return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
}
}, */
grid: {
},
xAxis: {
min: -100,
max: 80,
type: 'value',
axisLine: { onZero: false }
},
yAxis: {
min: -30,
max: 60,
type: 'value',
axisLine: { onZero: false }
},
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
filterMode: 'empty'
},
{
type: 'slider',
yAxisIndex: 0,
filterMode: 'empty'
},
{
type: 'inside',
xAxisIndex: 0,
filterMode: 'empty'
},
{
type: 'inside',
yAxisIndex: 0,
filterMode: 'empty'
}
],
series: [
{
id: 'a',
type: 'line',
smooth: true,
symbolSize: symbolSize,
data: data1
},
{
id: 'b',
type: 'line',
smooth: true,
symbolSize: symbolSize,
data: data2
}
]
};
myChart.setOption(option)
setTimeout(function () {
// 在图上添加图层
myChart.setOption({
graphic:
echarts.util.map(data1.concat(data2), function (item, dataIndex) { // 此处需要把两条曲线的数组拼成一个数组进行遍历，多条曲线类似
return {
type: 'circle',
position: myChart.convertToPixel('grid', item),
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: true,
draggable: true,
ondrag: echarts.util.curry(onPointDragging, dataIndex), // 添加拖动的回调
// onmousemove: echarts.util.curry(showTooltip, dataIndex),
// onmouseout: echarts.util.curry(hideTooltip, dataIndex),
z: 100
};
}) });
}, 0);
myChart.on('dataZoom', updatePosition); // 这是放大缩小，与本例要说明的无关 function updatePosition() {
myChart.setOption({
graphic: echarts.util.map(data1, 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, dx, dy) {
if (dataIndex <= (data1.length - 1)) { // 通过索引判断此圆圈覆盖的是哪条曲线
data1[dataIndex] = myChart.convertFromPixel('grid', this.position); // 将坐标值(x, y)还原为数组的项[a,b]
// 更新图表
myChart.setOption({
series: [{
id: 'a',
data: data1
}]
});
} else {
data2[dataIndex - data1.length] = myChart.convertFromPixel('grid', this.position);
myChart.setOption({
series: [{
id: 'b',
data: data2
}]
});
} }
function onPointDragging2(dataIndex, dx, dy) {
data2[dataIndex] = myChart.convertFromPixel('grid', this.position); // Update data
myChart.setOption({
series: [{
id: 'b',
data: data2
}]
});
} </script>
</body> </html>
echarts实现多条可拖动节点的折现图的更多相关文章
- vue+echarts实现可拖动节点的折现图（支持拖动方向和上下限的设置）
本篇文档主要是利用echarts实现可拖动节点的折现图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c= ...
- echarts折现图配置
js引用和div容器 <div id="container" style="height: 100%"></div> <scrip ...
- FLV视频播放：对未缓冲进度条实现拖动
FLV视频播放:对未缓冲进度条实现拖动 流媒体开发 Add comments 八282010 一.文件准备 1.转码:ffmpeg 2.添加元数据:yamdi 二.网页播放器:jw player 使 ...
- Echarts 展示两条动态数据曲线
利用Echarts 展示两条动态数据曲线,每1秒刷新一下数据,在echart官网例子基础上修改,修改了仿真数据的生成方式.生成数量,曲线数量,最总效果图如下: 详细代码如下: 遇到的主要问题点, 1, ...
- echarts 关系图graph force布局 拖动节点并固定不返回原点
myChart.on('mouseup',function(params){var option=myChart.getOption();option.series[0].nodes[params.d ...
- WinForm中TreeView控件实现鼠标拖动节点(可实现同级节点位置互换，或拖到目标子节点)
;//1:不同级, 不为1:拖同级 private void treeView1_ItemDrag(object sender, ItemDragEventArgs e) { if (e.Button ...
- iOS实现自定义进度条、拖动条效果，可多个
项目用到的一个场景,需要设置一个周期内不同时间时的数值 比如要设置10秒内,每一秒的大小,通过10个拖动条来设置实现,只需拖动到想要的数值即可, 这里周期10秒和每个拖动条的最大值都是可以自己定义的. ...
- android 14 进度条和拖动条
进度条: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:l ...
- C# listview 拖动节点
/// <summary> /// 当拖动某项时触发 /// </summary> /// <param name="sender"></ ...
随机推荐
- 【机器学习PAI实战】—— 玩转人工智能之利用GAN自动生成二次元头像
前言 深度学习作为人工智能的重要手段,迎来了爆发,在NLP.CV.物联网.无人机等多个领域都发挥了非常重要的作用.最近几年,各种深度学习算法层出不穷, Generative Adverarial Ne ...
- PHP核心编程--站内搜索
一. 站内搜索 前台页面: 在index.php页面中添加一个表单,输入搜索框 后台页面: 将index.php另存为search.php 对于搜索的 分页关键代码: 高亮关键字 相关 ...
- 【JZOJ4925】【GDOI2017模拟12.18】稻草人
题目描述 YLOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,YLOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样,田地需要满足以下条 ...
- 为数据计算提供强力引擎，阿里云文件存储HDFS v1.0公测发布
在2019年3月的北京云栖峰会上,阿里云正式推出全球首个云原生HDFS存储服务—文件存储HDFS,为数据分析业务在云上提供可线性扩展的吞吐能力和免运维的快速弹性伸缩能力,降低用户TCO.阿里云文件存储 ...
- Balanced Binary Tree 判断平衡二叉树
Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...
- NEFU 118 n!后面有多少个0【数论】
http://acm.nefu.edu.cn/JudgeOnline/problemShow.php?problem_id=118 求n!后面有多少个0(1<=n<=1000000000) ...
- 2019-3-21-win10-uwp-修改图片质量压缩图片
title author date CreateTime categories win10 uwp 修改图片质量压缩图片 lindexi 2019-03-21 15:29:20 +0800 2019- ...
- 直击 KubeCon 2019 现场，阿里云 Hands-on Workshop 亮点回顾
2019 年 6 月 24 日,KubeCon + CloudNativeCon 第二次在中国举办.此次大会阿里共有 26 个技术演讲入选,并有两场沙龙活动,阿里云专家也与技术极客们也再次相聚.Kub ...
- 【UTR #1】ydc的大树
[UTR #1]ydc的大树 全网唯一一篇题解我看不懂 所以说一下我的O(nlogn)做法: 以1号点为根节点 一个黑点如果有多个相邻的节点出去都能找到最远的黑点,那么这个黑点就是无敌的 所以考虑每个 ...
- UVALive - 4787 ICPC WF 2010 Tracking Bio-bots【dp】
UVa 4787 WF题果然不一样,本来想暴力搜索,数据太大了,数组都开不了.看题解也不太懂,记录一下书上的题解,以后再看: 此题是给出N*M的格子,有些地方是墙,不可走.求所有不能只通过向上或者向右 ...