正文

echarts3中热力图的属性大全

王维璋  王维璋  2022-09-19  156

关键词：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>监控管理系统</title>
<script type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/include/jquery.min.js">
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/include/echarts.js">
</script>

</head>
<body>

<div id="main" style="width: 1104px;height:464px;">

</div>

<div id='main_1' style="position: relative;height:15px;width: 100%;color:#A52A2A">节点关系提示区</div>

</div>
</body>
</html>

echarts 真正代码实现

// 基于准备好的dom，初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'), 'macarons');
// 指定图表的配置项和数据
var option = {
tooltip : {
show : true, //默认显示
showContent:true, //是否显示提示框浮层
trigger:'item',//触发类型，默认数据项触发
triggerOn:'click',//提示触发条件，mousemove鼠标移至触发，还有click点击触发
alwaysShowContent:false, //默认离开提示框区域隐藏，true为一直显示
showDelay:0,//浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
hideDelay:200,//浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
enterable:false,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
position:'right',//提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
confine:false,//是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
transitionDuration:0.4,//提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
formatter: function (params, ticket, callback) {
//判断数据，提供相应的url。
var path="";
var node=params.data; //当前选中节点数据
var category=params.data.category; //选中节点图例0负载 1中间件 2端口号 3数据库 4用户名
if(category==2){ //为jvm 虚拟机各类参数的路径
path = "${ctx}/weblogic.do?host=" + node.host + "&port="
+ node.port + "&username=" + node.username
+ "&pwd=" + node.pwd; //准备访问路径
}else if(category==4){ //为jdbc 数据库的路径
path = "${ctx}/oracle.do?host=" + node.host + "&port="
+ node.port + "&username=" + node.username
+ "&pwd=" + node.pwd + "&instance="
+ node.instance; //准备访问路径
}

console.log(params);
$.ajax({
async : true,//设置异、同步加载
cache : false,//false就不会从浏览器缓存中加载请求信息了
type : 'post',
dataType : "json",
url : path,//请求的action路径
success : function(data) { //请求成功后处理函数。
//加工返回后的数据
debugger;
if(category==2){ //当选择端口号时
var res = 'jvm最大内存值:' + data.memoryMaxSize+'<br/>';
res+='jvm空闲内存值:'+data.memoryFreeSize+'<br/>';
res+='jvm内存使用率：'+data.memoryPer+'<br/>';
res+='空闲线程：'+data.ideThread+'<br/>';
res+='总线程：'+data.totalThread+'<br/>';
res+='每秒处理的线程数比率：'+data.throuhput+'<br/>';
callback(ticket,res);
}else if(category==4){//当选择用户名时
var res = '当前链接数：'+data.processCount+'<br/>';
res+='最大链接数：'+data.maxProcessCount+'<br/>';
callback(ticket,res);
}

},
error : function() {//请求失败处理函数
$.messager.alert('警告', '请求失败！', 'warning');
}
});
if(category==2||category==4){ //当选择端口号与用户名时提示加载
return "loading";
}else{ //其他情况显示所属图例以及名称
return myChart.getOption().series[params.seriesIndex].categories[params.data.category].name+":"+params.name;
}

}
},

legend : { //=========圖表控件
show : true,
data : [ {
name : '负载',

icon : 'rect'//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

},
{
name : '中间件',

icon : 'roundRect'
}, {
name : '端口号',

icon : 'circle'
}, {
name : '数据库',

icon : 'circle'
},{
name : '用户名',
icon : 'roundRect'
} ]
},
series : [ {
type : 'graph', //关系图
name : "监控管理系统", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
layout : 'force', //图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。
hoverAnimation : true,//是否开启鼠标悬停节点的显示动画
coordinateSystem : null,//坐标系可选
xAxisIndex : 0, //x轴坐标有多种坐标系轴坐标选项
yAxisIndex : 0, //y轴坐标
force : { //力引导图基本配置
//initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
repulsion : 100,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
layoutAnimation : true
//因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
},
roam : true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
nodeScaleRatio : 0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
draggable : true,//节点是否可拖拽，只在使用力引导布局的时候有用。
focusNodeAdjacency : true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
//symbol:'roundRect',//关系图节点标记的图形。ECharts 提供的标记类型包括 'circle'(圆形), 'rect'（矩形）, 'roundRect'（圆角矩形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大头针）, 'arrow'（箭头）也可以通过 'image://url' 设置为图片，其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿
//symbolSize:10 ,//也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array
//symbolRotate:,//关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
//symbolOffset:[0,0],//关系图节点标记相对于原本位置的偏移。[0, '50%']
edgeSymbol : [ 'none', 'none' ],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
edgeSymbolSize : 10,//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
itemStyle : {//===============图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
normal : { //默认样式
label : {
show : true
},
borderType : 'solid', //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
borderColor : 'rgba(255,215,0,0.4)', //设置图形边框为淡金色,透明度为0.4
borderWidth : 2, //图形的描边线宽。为 0 时无描边。
opacity : 1
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5

},
emphasis : {//高亮状态

}
},
lineStyle : { //==========关系边的公用线条样式。
normal : {
color : 'rgba(255,0,255,0.4)',
width : '3',
type : 'dotted', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
curveness : 0.3, //线条的曲线程度，从0到1
opacity : 1
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
emphasis : {//高亮状态

}
},
label : { //=============图形上的文本标签
normal : {
show : true,//是否显示标签。
position : 'inside',//标签的位置。['50%', '50%'] [x,y]
textStyle : { //标签的字体样式
color : '#cde6c7', //字体颜色
fontStyle : 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
fontWeight : 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
fontFamily : 'sans-serif', //文字的字体系列
fontSize : 12, //字体大小
}
},
emphasis : {//高亮状态

}
},
edgeLabel : {//==============线条的边缘标签
normal : {
show : false
},
emphasis : {//高亮状态

}
},
//别名为nodes name:影响图形标签显示,value:影响选中后值得显示,category:所在类目的index,symbol:类目节点标记图形,symbolSize:10图形大小
//label:标签样式。
data : [ {
id : 0,
category : 0,
name : '101.133.8.88',
symbol : 'roundRect',
value : 20,
symbolSize : 80
}, {
id : 1,
category : 1,
name : '192.168.8.88',
symbol : 'rect',
value : 20,
symbolSize : 70
}, {
id : 2,
category : 2,
name : '7001',
symbol : 'circle',
value : 20,
symbolSize : 60,
yId:"jvm",
host:"192.168.6.37",
port:"7001",
username:"weblogic",
pwd:"weblogic1"
}, {
id : 3,
category : 2,
name : '7100',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 4,
category : 1,
name : '102.12.33.23',
symbol : 'rect',
value : 20,
symbolSize : 70
}, {
id : 5,
category : 2,
name : '7001',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 6,
category : 2,
name : '7100',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 7,
category : 2,
name : '7001',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 8,
category : 1,
name : '101.11.66.6',
symbol : 'rect',
value : 20,
symbolSize : 70
}, {
id : 9,
category : 2,
name : '7101',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 10,
category : 2,
name : '7101',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 11,
category : 2,
name : '7001',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 12,
category : 2,
name : '7100',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 13,
category : 3,
name : '192.168.44.44',
symbol : 'circle',
value : 20,
symbolSize : 70
}, {
id : 14,
category : 3,
name : '192.168.33.33',
symbol : 'circle',
value : 20,
symbolSize : 70
}, {
id : 15,
category : 3,
name : '192.168.22.22',
symbol : 'circle',
value : 20,
symbolSize : 70
}, {
id : 16,
category : 4,
name : '55555555555',
symbol : 'circle',
value : 20,
symbolSize : 70,
yId:"jdbc",
port:"1521",
host:"192.168.11.11",
username:"222222222",
pwd:"11111111",
instance:"orcl"
}],
categories : [ //symbol name：用于和 legend 对应以及格式化 tooltip 的内容。 label有效
{
name : '负载',
symbol : 'rect',
label : { //标签样式
}
}, {
name : '中间件',
symbol : 'rect'
}, {
name : '端口号',
symbol : 'roundRect'
}, {
name : '数据库',
symbol : 'roundRect'
}, {
name : '用户名',
symbol : 'roundRect'
} ],
links : [ //edges是其别名代表节点间的关系数据。
{
source : 1,
target : 0
}, {
source : 4,
target : 0
}, {
source : 8,
target : 0
}, {
source : 2,
target : 1
}, {
source : 3,
target : 1
}, {
source : 5,
target : 4
}, {
source : 6,
target : 4
}, {
source : 7,
target : 4
}, {
source : 9,
target : 8
}, {
source : 10,
target : 8
}, {
source : 11,
target : 8
}, {
source : 12,
target : 8
}, {
source : 13,
target : 6
}, {
source : 14,
target : 6
}, {
source : 15,
target : 2
}, {
source : 16,
target : 15
} ]
} ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

/*ECharts3 方法部分开始*/
function appendPath(params){ //拼接节点关系并显示在左下角，
var option = myChart.getOption();
var series = option.series[params.seriesIndex]; //获取图表
var nodesOption = series.data;//获取所有数据
var links= series.links;//获取所有连线
if(params.dataType=="node"){ //dataType可以是edge(线条)或node(数据)
var id=params.data.id;
var categoryName = series.categories[params.data.category].name;//获取当前节点的图例名称
var str=categoryName+":"+nodesOption[id].name;
var i = 0;
var map = {};
for( i = 0 ; i < links.length; i++){
map[links[i].source] = links[i].target;
}

while(true){
if(map[id] == undefined){
break;
}
//获取父节点的图例名称并连接
str =series.categories[nodesOption[map[id]].category].name+":"+nodesOption[map[id]].name+"->" + str;
id = map[id] ;
}
return str;
}else if(params.dataType=="edge"){ //当鼠标停留在连线上时，暂不处理
return "";
}
}

function openOrFold(params) { //该事件会提示节点间关系
var str = appendPath(params);
document.getElementById("main_1").innerHTML = str;
return str;
}
//var ecConfig = echarts.config; echarts2的获取事件方法，当前为echarts3
myChart.on('mouseover', openOrFold);
//'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'
/*ECharts3 方法部分结束*/

/*ECharts3 结束*/

转载于：http://www.cnblogs.com/koala2016/archive/2016/12/01/6123003.html

echarts3.0

　　因为要更新手机报表，而原来用的echarts插件版本太低，样式不美观，所以最近在echarts官网学习最新的echarts版本，现在先只对最常见的折线图，柱状图，饼图进行总结。　　大概写法都是一样的，首先要创建一个装图标的容... 查看详情

无法在 JBoss 中热部署

】无法在JBoss中热部署【英文标题】：Unabletohot-deployinJBoss【发布时间】：2020-02-1810:53:15【问题描述】：我想在JBoss中热部署应用程序，为此我在这里找到了指南here我已经下载了JBoss-eap-7.0，但我没有看到指南中提到的名为jboss-as-we... 查看详情

如何在 NestJS 中热重载联邦网关

】如何在NestJS中热重载联邦网关【英文标题】：howtohotreloadfederationgatewayinNestJS【发布时间】：2021-08-0809:44:46【问题描述】：问题在联邦嵌套应用程序中，网关会收集来自其他服务的所有模式并形成完整的图表。问题是，子模式改... 查看详情

在战争库中热部署资源

】在战争库中热部署资源【英文标题】：Hotdeployingresourcesinwarlibs【发布时间】：2015-04-0406:41:15【问题描述】：使用Wildfly8.2.0.Final、Windows7、JBossDeveloperStudio8.0.2.GA。我们正在尝试将我们的战争拆分为模块。似乎最自然的方法是依靠... 查看详情

如何在 ReactJS Docker 中热重载

】如何在ReactJSDocker中热重载【英文标题】：HowtoHot-ReloadinReactJSDocker【发布时间】：2020-08-1723:02:49【问题描述】：这听起来很简单，但我有这个问题。我有两个docker容器正在运行。一个用于我的front-end，另一个用于我的backend服务... 查看详情

有大神会做echarts3d省级地图的鼠标点击事件吗，求指教？

...ms里面有没有跟省市有关的属性。。参考技术A有大神会做echarts3D省级地图的鼠标点击事件，鼠标追问？？？你会吗？亲？查看详情

有没有办法在 Ktor 中热重载静态文件？

】有没有办法在Ktor中热重载静态文件？【英文标题】：Isthereanywaytohot-reloadstaticfilesinKtor?【发布时间】：2020-11-0720:19:45【问题描述】：我一直在关注ktortutorial制作网站，并注意到每次我对资源文件进行更改时，我都必须重新编译... 查看详情

css属性大全

...;号是通配符，即指，网页html中所有标签意思。在*定义的属性，一般是设置页面一些固定的属性，比喻，字体大小，也字体样式这种。从边框说起：1.border:边框边框样式的参数：solid;/*边框为实线实线边框（常用）*/none;/* 查看详情

目录大全-点击查看

UILabel属性大全UIButton属性大全UIView属性大全UIImage属性大全UIImageView属性大全UITextField属性大全UIScrollView属性大全UITableView属性大全UIViewController属性大全UIAlertController属性大全UISegmentedControl属性大全UISlider属性大全UISwtich属性大全UIPa... 查看详情

使用 Webpack Dev Middleware 在 Webpack 中热重载 CSS 文件的最简单方法

】使用WebpackDevMiddleware在Webpack中热重载CSS文件的最简单方法【英文标题】：SimplestwaytohotreloadaCSSfileinWebpackusingWebpackDevMiddleware【发布时间】：2016-09-0906:59:04【问题描述】：我有一个用TypeScript编写的项目，我可以利用我的Node.js服务... 查看详情

在 Spring Boot 2.1 中热重载 Thymeleaf 模板和资源包

】在SpringBoot2.1中热重载Thymeleaf模板和资源包【英文标题】：HotReloadingThymeleafTemplatesandResourceBundlesinSpringBoot2.1【发布时间】：2019-07-1714:33:45【问题描述】：我创建了一个启用i18n的SpringBoot2.1.3应用程序，添加了开发工具，并安装了F... 查看详情

div属性大全_html5新增属性

divid：属性标记元素的唯一对象。divclass：属性设置元素一个或多个类名称。divalign：属性设定元素中的内容进行水平对齐方式，例如（divalign="center"）表示div中的内容居中对齐。divstyle：为该元素设置内嵌样式，如（divstyle="color:r... 查看详情

热重载不起作用，但在 Android Studio 中热重启有效

】热重载不起作用，但在AndroidStudio中热重启有效【英文标题】：Hotreloaddoesn\'tworkbuthotrestartworksinAndroidStudio【发布时间】：2021-05-1600:43:18【问题描述】：我最近开始学习Flutter。我从VisualStudio代码开始，一切正常。我决定尝试Android... 查看详情

最权威的html标签属性大全

<p>---恢复内容开始---</p>1.html标签<marquee>...</marquee>普通卷动<marqueebehavior=slide>...</marquee>滑动<marqueebehavior=scroll>...</marquee>预设卷动<marqueebehavior= 查看详情

css属性大全

SS属性大全文字属性「字体族科」（font-family），设定时，需考虑浏览器中有无该字体。「字体大小」（font-size），注意度量单位。《绝对大小》|《相对大小》|《长度》|《百分比》(一般设置双数)「字体加粗」（font-weight），除... 查看详情

uiview的属性方法大全

addSubview 父视图通过该方法添加视图，该方法将一个视图添加到子视图列表的最后insertSubview 可以在父视图的子视图列表中间插入视图bringSubviewToFront sendSubviewToBack exchangeSubviewAtIndex:withSubviewAtIndex 可以对父视图... 查看详情

notepad++中的颜色属性大全

Indentguidelinestyle 缩进参考线的颜色Bracehighlightstyle鼠标指针在框架左右时框架的颜色（如css中{} js中的（））Badbracecolor 错误的框架的颜色（如js中{}里面有错误，这个{}的颜色）Currentlinebackgroundcolour 鼠标指向的... 查看详情

echarts3怎么加载china.js地图

参考技术A百度API调用及echart库引入1.百度APIak申请：/apiconsole/auth，配额增加申请。配额增加当然，如果个人用户，没必要增加配额，一般不会超限制数。3.下载相关javaScript库：jquery.min.js，require.js，echarts.js，这里我都已下载好，... 查看详情