echarts绘制拓扑图,实现可拖曳 5C
 series: [
                {
                    id: 'topology',
                    type: 'graph',
                    layout: 'none',
                    symbolSize: 60,

layout为none,是固定的,不用force
怎样实现拖曳, onPointDragging事件不生效

0

2个回答

0

echarts官方API:http://echarts.baidu.com/option.html#title
这个不是很详细的啊

-1
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
mfc实现网络拓扑图或者其他任意图片文字连接
实现图片的文字添加修改删除连线,点选拖动,自由设置,绘画网络拓扑图或者其他任意图
echarts网络拓扑图
option = { title: { text: '' }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', label: { normal: { sho...
echarts升级版关系图,网络拓扑图,资源关系图,可添加,搜索(支持高亮显示),排序,删除
echarts升级版关系图,网络拓扑图,资源关系图,可添加,搜索(支持高亮显示),排序,删除
Echarts动态拓扑图(修改自Echarts官网示例,Servlet实现,附效果图)
Echats官网示例修改版 效果图在页面的最后 页面 <body> <!--长宽在 js 或 css 中设置可能会出现变形--> <div id="chart" style="width: 800px;height:800px;&
拓扑图节点拖动的实现(学习笔记)
实现拓扑图节点的拖动,节点带有警报等
Echarts多条折线可拖拽
                                                            Echarts多条折线可拖拽 1、步骤:     1)、封装Echarts折线图方法manyLineChart(),提取出公共的部分;     2)、AJax获取后台数据传参至Echarts公共方法;     3)、模拟后台获取的json数据;     4)、给dayComme...
ECharts+百度地图网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图、ECharts和HT for Web三者结合起来也做一个类似空气质量报告的报表+拓扑图应用,于是有了下面的Demo:http://www.hightopo.com/demo/blog_baidu_20150928/ht-baidu.html
zrender实现的人物关系图 拓扑图
zrender封装实现的人物关系拓扑图,可实现人物关系的展开收缩,实现人物关系添加备注信息,实现人物双击显示人物的详细信息,效果非常棒。支持IE8,chrome。适应各种分辨率。有各种动画效果。可以拖拽。可以放大缩小。总之,非常棒。得到它你一定不会后悔!
关于web网络拓扑图的实现
 我们做的项目中有实时的网络拓扑图这个功能,之前都是c/s的.现在要改成在web上实时的展示网络拓扑图.为实现这个功能我做了一些调研.    方案1:用js来做.  问题:我们部门的技术人员大多是搞c/s的,对js对不太熟.用js写这个功能实在是有点困难.    方案2:用applet,flex等  applet跟flex相比,我们写applet相当会简单,但是客户机必须装jre这一点估计客户接受...
echarts关系图(力引导)拖动节点不还原位置
echarts关系图(力引导)拖动节点不还原位置,在init创建时第三个参数对象添加myOpts_:{draggableFixed_:true}即可,如: var mychart = echarts.init(dom,null,{myOpts_:{draggableFixed_:true}});创建一个拖动不还原的力引导关系图(需要 type: 'graph',layout:'force',draggable :true,且所有节点fixed:true)
Django中使用Echarts绘制散点图,并实现mysql数据加载
第一步:引入Echarts包和jquery包<script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="/static/js/echarts.js"></script
网络拓扑图DEMO
背景 在一个项目中,需要展示模型结构,模型是有层级结构的,而且底层的模型可能被上层的多个模型所引用。 如果希望在前台展示模型的依赖关系,使用Tree结构肯定是不够直观的,而且数据有一些混乱。 因此,在技术讨论的时候,提出使用网络拓扑结构展示模型及子模型的关系。特此验证。   组件工具 JTopo(http://www.jtopo.com/)   需求 1.可以显示多个节点图标和...
百度地图、ECharts整合HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图、ECharts和HT for Web三者结合起来也做一个类似空气质量报告的报表+拓扑图应用。
前端开发框架总结之利用Jtopo实现网络拓扑功能(三)
                     前端开发框架总结之利用Jtopo实现网络拓扑功能(三) 上文我们讲了一些拓扑连线、拓扑文本节点相关的交互设计和实现思路以及一些关键技术细节。本文我们继续我们的拓扑管理开发之旅。 拓扑容器分组 我们可以利用拓扑分组实现拓扑结点的分组管理,实际的应用场景中,可以把一个业务涉及的设备作为一个分组来管理,也可以以地区为单位或者以机房为单位来划分分组。 容器相...
基于 HTML5 Canvas 绘制的电信网络拓扑图
电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式。组合逻辑描述网路功能的体系结构,配置形式描述网路单元的邻接关系,即以交换中心(或节点)和传输链路所组成的拓扑结构。常见的网络拓扑结构有星型结构、总线结构、环形结构、树形结构、网状结构、混合型拓扑以及蜂窝拓扑结构等,本文的例子主要描绘的是总线
TWaver“一站式”UI组件提供包括网络拓扑图、地图、设备面板图、流程图、各种Chart图表、树图、表格等各种通用组件
TWaver HTML5(以下简称TWaver)使用HTML5技术和javascript语言,可在支持HTML5的浏览器上进行绘图。 使用TWaver前,需熟悉几个基本概念:图元(Element)、容器(DataBox)和画布(Network)。 图元:图形中的各种基本元素,如节点(Node)、连线(Link)等; 容器:图元都统一放置在一个容器(DataBox)中进行管理,如同“装鸡蛋的篮子”一样。它负责图元的增/删/改/查等管理操作; 画布:图元最终都绘制在画布(Network)组件上。Network是最终用户看到的图形组件,负责图形画面的具体绘制和交互;
Echarts单条折线可拖拽
                                                                Echarts单条折线可拖拽 1、步骤:     1)、封装Echarts折线图方法coinConsumeChart(),提取出公共的部分;     2)、AJax获取后台数据传参至Echarts公共方法;     3)、模拟后台获取的json数据;     4)、给d...
d3.js-简单网络拓扑图实现
d3.简要拓扑图实现
ECharts官方教程(十)【小例子:自己实现拖拽】
小例子:自己实现拖拽介绍一个实现拖拽的小例子。这个例子是在原生 echarts 基础上做了些小小扩展,带有一定的交互性。通过这个例子,我们可以了解到,如何使用 echarts 提供的 API 实现定制化的富有交互的功能。这个例子主要做到了这样一件事,用鼠标可以拖拽曲线的点,从而改变曲线的形状。例子很简单,但是有了这个基础我们还可以做更多的事情,比如在图中可视化得编辑。所以我们从这个简单的例子开始。e
基于HTML5的拓扑图编辑器 - Graph.Editor
拓扑图编辑器介绍 拓扑图编辑器项目 - Graph.Editor 正式发布到github了,欢迎访问、提取和贡献代码 项目地址:https://github.com/samsha/graph.editor 在线演示:http://demo.qunee.com/editor/ Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是Qunee图形组件
ECharts整合HT for Web的网络拓扑图应用
ECharts的页面渲染效果和酷炫的用户体验,吸引的不少用户的眼球,将ECharts整合到HT for Web中,和网络拓扑图的交互应用也拟补了目前HT for Web在图像组件上的不足。
gojs JS实现网络拓扑图
废话先不多说,先上图;这是一个模拟设备状态的拓扑图;图中节点右上角的圆形图标绿色代表正常,红色代表设备一次;在图片的左上角 是用来获取节点的详细信息的。具体方法在js中有注释, 因为这只是个教程,所以在写代码上不是很规范。所以希望大家多多见谅。而且因为本人对这个插件的研究也有限,有什么不对的也希望多多交流 谢谢! 接着上代码。这是前端html和js代码;首先介绍下该功能的实现方
ECHARTS 实现graph拖拽自定义增删links
自己做的一个小DEMO(第一次写)存存的新手不要喷我啊!ECHARTS网上有拖拽的例子,但始终没有增删LINKS(两点之间的连接线)的DEMO,在这里分享一个自己做的纯前端的DEMO。成品展示以下是干货(扒了好多别人的东西)<!DOCTYPE html> <html style="height: 100%"> <head> <meta charse...
Web网络拓扑实时监控方案
Web网络拓扑实时监控方案,网页网络拓扑实时监控方案,
使用echart实现监控拓扑图
<template> <div class="wrap"> <div ref="main" class="charts"/> </div> </template> <script> import echarts from 'echarts' import { debounce } from '@/utils'...
Echarts实现关系图
首先贴上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>关系图案例</title> <!-- 引入 ECharts 文件 --> <script type="
使用Canvas绘制网络设备拓扑图
使用Canvas绘制网络设备拓扑图最终呈现效果: 1.可按不同的布局算法实现不同的布局方式 2.鼠标移到节点上可实时显示设备节点信息 3.节点上可实时显示设备节点告警状态(闪烁效果) 4.具备鸟瞰图,可拖动视图区域 5.设备节点可拖动
网络拓扑图绘制(C++)
在某个开源网站下载的,分享之。用c++编写的绘制网络拓扑图的软件,基本功能都有!
基于Echarts的数据动态展示的效果实现
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2018/4/9 0009 Time: 下午 4:09 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/ht...
echart地图上钻下钻分级
具体效果实现可访问https://blog.csdn.net/qq_29099209/article/details/85317542查看,有问题的可以留言
QT实现网络拓扑图
利用QGraphicsView、QGraphicsPixmapItem、QGraphicsLineItem实现多层子网网络拓扑图
zrender实现的鱼骨图
zrender实现的鱼骨图。支持各种浏览器以及分辨率
Echarts开发人物关系网络图
引言: 人物关系可视化是将人与人之之间通过某属性进行连接而形成的关系网络,通过可视化技术展现出来。而baidu的Echarts是一款非常敏捷,迅速,酷炫的js可视化工具1.Echarts介绍ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 C
ECharts实现P-Chart
花了接近一天的时间,用ECharts完成的P-Chart图表,供大家学习参考
echarts 结合ajax完成上下级关系图的绘制
这10天一直在做一个关于企业关系图的模块,一开始的时候用公司的框架,但是做出来的效果很low,当然因为一开始的时候只是想着在做的过程中学习公司的框架。后来主管推荐我用echarts来做,于是经过这1个星期把这个模块算是做的跟需求文档上要求的差不多了。在这里把过程记录一下。 因为我是直接在公司的项目上做的,而公司框架用的是xfire+spring,对于xfire我还不太了解,所以就先用最基础的js
Js前端插件demo(地图-拓扑图-图表)
JS插件Js前端插件demo(地图-拓扑图-图表) JS插件Js前端插件demo(地图-拓扑图-图表)
绘制拓扑图
需求:绘制一个机构各个部门下机器的申请情况关系拓扑图。 可以用gojs这个插件,不过仅限学习研究实验演示,不作商业用途。 1.html中定义一块画图区域 [code="html"] [/code] 2.文档末加载脚本 [code="js"] window.onload = init(); [/code] 3.脚本 [code="js"] var A...
基于ECharts,JQueryUI的可拖拽数据展示web页面
基于ECharts,JQueryUI的可拖拽数据展示web页面因近期工作需求,需要提供一个展示数据的web页面,同时需要提供灵活的布局,所以调研了ECharts及JQueryUI的一些功能,本文做一个简单的总结。 echarts是一个百度提供的一个开源的js库,主要用来做数据的展示工作,使用非常简单,并且提供了非常丰富的demo。例如下:JQueryUI主要负责实现可拖拽布局,JQueryUI提供的
使用echarts实现折线图的拖拽
使用echarts实现折线图的拖拽 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./echarts.js"></script> </head> <body&
【数据可视化】可放缩可拖拽画布的力导向图
以力导向图为蓝本合并力导向图和放缩图,实现了可放缩可拖拽画布的力导向图 Mike Bostock给出的两个例子(http://bl.ocks.org/mbostock) 力导向图(Force Dragging III http://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048)放缩图(Pan & Zoom http://bl.ocks.o
文章热词 设计制作学习 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 java学习拓扑图 echarts教程python