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"></ ...
随机推荐
- spring拦截器Interceptor
在Spring Boot中,拦截器可以分为两种类型: 一是WebMVC,负责拦截请求,类似于过滤器,对用户的请求在Controller接收前进行处理,在Controller处理完成后加工结果等.使用时 ...
- 关于如何在部署环境修改process.env & 本地测试
前言 最近在搞一些监控的东西, 需要根据不同的环境上报到不同的地址,中间遇到了一些问题,在这里简单总结分享下. 关于process.env 假如你对process.env 相关的概念还不熟悉, 请移步 ...
- Python PEP8标准
1.编码 如无特殊情况,文件一律使用utf-8编码 如无特殊情况,文件头部必须添加# -*- coding:utf-8 -*- 标志 2.代码 统一使用四个空格缩进 每行代码不超过80个字符 自然语言 ...
- sql标签和include标签的使用
<sql>用来封装SQL语句, <include>用来调用<sql>封装的语句 代码片段: <sql id="select"> SE ...
- Leetcode840.Magic Squares In Grid矩阵中的幻方
3 x 3 的幻方是一个填充有从 1 到 9 的不同数字的 3 x 3 矩阵,其中每行,每列以及两条对角线上的各数之和都相等. 给定一个由整数组成的 N × N 矩阵,其中有多少个 3 × 3 的 & ...
- thinkphp php审核后返回信息给html
1.die("<script>alert('至少选择一个收款方式!');history.back(-1);</script>");
- UVA_414:Machined Surfaces
Language : C++ 4.8.2 #include<stdio.h> #include<string.h> int main(void) { int n; int su ...
- 【Leetcode链表】环形链表 II（142）
题目 给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos ...
- Laravel 发送邮件（最简单的讲解！）
Laravel集成了SwiftMailer库进行邮件发送,邮件配置文件位于config/mail.php:. return [ 'driver' => env('MAIL_DRIVER', 's ...
- LinkedHashMap.get("key")
解析json串:得到的结果用LinkedHashMap存储,但是有个一个字段 data 的对应value是“”(json中)但是Map中get的不是空,而是value为“[]” LinkedHas ...