可视化图表（ECharts、orgchart）
秦俊发
一、ECharts
官网：https://echarts.apache.org/examples/zh/index.html
常用的饼图、柱状图、关系图
html中js文件引入:
<link type="text/javascript" src="../eCharts-4/eCharts4.js" />
<link type="text/javascript" src="../OrgChart-master/jquery.orgchart.css" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/javascript" src="../eCharts-4/eCharts4.js" />
<link type="text/javascript" src="../OrgChart-master/jquery.orgchart.css" />
</head>
<body>
<div class="chartBox">
<!--echarts必须给宽高，不然不显示-->
<div style="width:50%;heigth:400px" id="chart1"></div>//实心圆
<div style="width:50%;heigth:400px" id="chart2"></div>//空心圆
<div style="width:50%;heigth:400px" id="chart3"></div>//组-柱形图
<div style="width:50%;heigth:400px" id="chart4"></div>//关系图1
<div style="width:50%;heigth:400px;display:flex;justify-content:center" id="chart5"></div>//关系图1
</div>
</body>
</html>1.1 饼图(实心)
function circleData(){
$.get('linkUrl',{id:id},function(res){
if(res.code == '0'){
var data = res.data;
// 规整数据，如果返回数据不合要求需要修改
var pieData = [
{value:data['合理'], name:'合理'},
{value:data['不合理'], name:'不合理'}
];
let option = {
color:['#357754','#5470c6'], // 不指定颜色随机
backgroundColor:'rgba(0,0,0,0.2)',
// 鼠标hover效果
tooltip:{
trigger:'item',
formatter:"{b}:{c}个({d}%)", //效果是不合理：6个(100%)
// 其他形式
/*formatter：function(params){
return params.value
}*/
},
title:{
text:'全责一至机构占比',
top:'bottom',
left:'center',
textStyle:{
fontSize:16,
fontWeight:'',
color:'#333'
}
},
series:[
{
type:'pie',
radius:'50%',
data:pieData,
emphasis:{
itemStyle:{
borderWidth:0,
shadowBlue:10,
shadowOffsetX:0,
shadowColor:'rgba(0,0,0,0.5)'
}
},
labelLine:{
normal:{
show:true
}
}
}
]
};
// 基于准备好的dom，初始化echarts实例
var mychart = echarts.init(document.getElementById('chart1'));
mychart.clear();
// 使用刚指定的配置项和数据显示图表
mychart.setOption(option)
}
})
};
// 调用
circleData();1.2 空心圆
function doubleCircleData(){
$.get('linkUrl',{id:id},function(res){
if(res.code == '0'){
var data = res.data;
// 规整数据，如果返回数据不合要求需要修改
var pieData = [
{value:data['无效导调'], name:'无效导调'},
{value:data['无反馈导调'], name:'无反馈导调'},
{value:data['导调'], name:'导调'},
];
let option = {
color:['#357754','#5470c6','#0000ff'], // 不指定颜色随机
backgroundColor:'rgba(0,0,0,0.2)',
// 鼠标hover效果
tooltip:{
trigger:'item',
formatter:"{b}:{c}个({d}%)", //效果是无效导调：6个(60%)
// 其他形式
/*formatter：function(params){
return params.value
}*/
},
title:{
text:'全责一至机构占比',
top:'bottom',
left:'center',
textStyle:{
fontSize:16,
fontWeight:'',
color:'#333'
}
},
series:[
{
type:'pie',
center:['50%','50%'],
radius:['30%','55%'], //内外圆大小
itemStyle:{ // 饼图边框颜色与粗细
borderWidth:1,
borderColor:'#fff',
},
emphasis:{
itemStyle:{
borderWidth:0,
shadowBlue:10,
shadowOffsetX:0,
shadowColor:'rgba(0,0,0,0.5)'
}
},
label:{ //饼图上的线显示的内容
formatter:"{b}:{c}条",
padding:[0, -10],
fontSize:14,
},
labelLine:{
normal:{
show:true
}
},
data:pieData
}
]
};
// 基于准备好的dom，初始化echarts实例
var mychart = echarts.init(document.getElementById('chart2'));
mychart.clear();
// 使用刚指定的配置项和数据显示图表
mychart.setOption(option)
}
})
};
// 调用
doubleCircleData();1.3柱状图(两个一组对比)
function variedBarData(){
$.get('linkUrl',{id:id},function(res){
if(res.code == '0'){
var data = res.data;
var organizationList = []; // 组名列表
var notComplianceList = []; // 组内不合理数据列表
var ComplianceList = []; // 组内合理数据列表
// 规整数据，如果返回数据不合要求需要修改
$.each(data,function(i,v){
organizationList.push(v["organizationList_name"]);
notComplianceList.push(v["notComplianceList"]);
ComplianceList.push(v["ComplianceList"]);
})
let option = {
backgroundColor:'rgba(0,0,0,0.2)',
// 鼠标hover效果
tooltip:{
trigger:'item',
formatter:"{b}-{a}:{c}个",//效果是xxxx-不合理：6个(柱形图没有{d}百分比)
// 其他形式
/*formatter：function(params){
return params.value
}*/
},
xAxis:{
type:'category',
data:organizationList ,
},
yAxis:{
type:'value'
},
title:{
text:'全责一至排序',
top:'bottom',
left:'center',
textStyle:{
fontSize:16,
fontWeight:'',
color:'#333'
}
},
series:[
{
name:'不合理',
type:'bar',
data: notComplianceList,
color:"#357754"
},{
name:'合理',
type:'bar',
data: ComplianceList,
color:"#5470c6"
},
]
};
// 基于准备好的dom，初始化echarts实例
var mychart = echarts.init(document.getElementById('chart3'));
mychart.clear();
// 使用刚指定的配置项和数据显示图表
mychart.setOption(option)
}
})
};
// 调用
variedBarData();1.4关系图
function initActualRelationshipChart(){
$.get('linkUrl',{id:sendData},function(res){
if(res.code == 0){
//判断返回数据标识 动态设置线条颜色
$.each(res.data.heatSeekDtoList, function(i,v){
if(v.val == '0'){
v.lineStyle = {
color:"#ff0000"
}
}else{
v.lineStyle = {
color:"#35a3f8"
}
}
});
var option = {
series:[
{
name:'实际指挥关系',
type:'graph',
layout:'force',
force:{
repulsion:550,
gravity:0.1
},
draggable:true,
roam:true,
fousNodeAdjacency:true,
animation:false,
label:{
show:true
},
zoom:1,
edgeSymbol:['circle','arrow'],
edgeSymbolSize:[4,10],
edgeLabel:{
show:false
},
symbolSize:30,
data:res.data.heatSeekDataDtoList,
links:res.data.heatSeekDtoList,
itemStyle:{
color:'#f87535'
},
lineStyle:{
width:3,
curveness:0.1
}
}
]
};
// 基于准备好的dom，初始化echarts实例
var mychart = echarts.init(document.getElementById('chart4'));
mychart.clear();
// 使用刚指定的配置项和数据显示图表
mychart.setOption(option)
mychart.off('click');
//点击事件
mychart.on('click',function(params){
var source = params.source;
var target = params.target;
// 重载表格
table.reload("table的id",{
url:"tableUrl",
where:{source:source?source:'',target:target},
})
})
}
})
}
initActualRelationshipChart();二、orgchart
官网地址：https://www.jq22.com/jquery-info21894
js需要先扩充模块，再调用
layui.config({
base:'./layui-v2.5.6/lay/modules'
}).extend({
orgChart:'orgChart'
});
layui.use(['jquery','orgchart'], function(){
var $ = layui.jquery;
var orgchart = layui.orgchart;
// 通过缓存获取数据
var taskId = sessionStorage.getItem("taskId");
// 创建缓存：sessionStorage.setItem("conductId","taskId");
// 销毁缓存：sessionStorage.removeItem("taskId")
initOrganizationChart();
function initOrganizationChart(){
$.post('linkUrl',{conductId:taskId},function(res){
if(res.code == '0'){
$("#chart5").html('');
$("#chart5").orgchart({
'nodeTitle': 'organizationName',
'draggable':false,
'data':res.data.length>0?res.data[0]:{}
});
// orgChart点击事件
$('#chart5').off().click(function(){
var organizationName = $(this).html();
// 当前点击的节点名称变为红色
$('.orgchart .title').css('color'.'#fff');
});
// 默认选择第一个节点
$('#chart5 .orgchart tbody tr').eq(0).find('div .title').click()
}
})
}
})
类似资料：