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"></ ...
随机推荐
- 遇到的bug
1 div出现莫名其妙的空白bug 之前写了一个后台管理系统,项目不小加上是改版,很多的js都是用的之前的, bug多到自己都不想看, 其中有个是用iframe 框架加载表格页面,但是右边跟下边出 ...
- JavaScript--对象继承（组合继承）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- PHP学习（数组）
数组就是一个键值对组成的语言结构,键类似于酒店的房间号,值类似于酒店房间里存储的东西. PHP有两种数组:索引数组.关联数组. 索引和关联两个词都是针对数组的键而言的. 索引数组 先介绍下索引数组,索 ...
- day13 memcache，redis上篇
memcache memcache简介 Memcached是一个自由开源的,高性能,分布式内存对象缓存系统. Memcached是以LiveJournal旗下Danga Interactive公司的B ...
- Directx教程(26) 简单的光照模型(5)
原文:Directx教程(26) 简单的光照模型(5) 在前面的工程中,我们都是在vs中实现顶点光照计算,然后再把顶点颜色传到ps中.本章中我们尝试fragment光照(或者说叫ps光照),在 ...
- WPF/Silverlight深度解决方案：(九)HLSL自定义渲染特效之完美攻略(下)
原文:WPF/Silverlight深度解决方案:(九)HLSL自定义渲染特效之完美攻略(下) 本想只用两节来完成关于HLSL自定义渲染相关知识的讲解,鉴于最近非常的多的朋友对此相当感兴趣,想知道最多 ...
- 阿里云MaxCompute 2019-6月刊
您好,MaxCompute 2019.6月刊为您带来6月产品.技术最新动态,欢迎阅读. 导读 [功能发布]6月产品重要发布 [文档更新]6月重要文档更新推荐 [干货精选]6月精选技术文章推荐 [活动回 ...
- Python学习之路12☞模块与包
一 模块 1.1 什么是模块? 一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 1.2 为何要使用模块? 如果你退出python解释器然后重新进入,那么你之前 ...
- 通过 PHP OPcache 提升 Laravel 应用运行速度
什么是 OPcache 每一次执行 PHP 脚本的时候,该脚本都需要被编译成字节码,而 OPcache 可以对该字节码进行缓存,这样,下次请求同一个脚本的时候,该脚本就不需要重新编译,这极大节省了脚本 ...
- Maven中央存储库 和 如何从Maven远程存储库下载？
当你建立一个 Maven 的项目,Maven 会检查你的 pom.xml 文件,以确定哪些依赖下载.首先,Maven 将从本地资源库获得 Maven 的本地资源库依赖资源,如果没有找到,然后把它会从默 ...