function initPie(el,data,options){
var options = Object.prototype.toString.call(options) === "[object Object]" ? options : {};
var chartTitle = 'chartTitle' in options ? options.chartTitle : "",
radius = 'radius' in options ? options.radius : '50%',
isLabel = 'isLabel' in options ? options.isLabel : true,
colors = 'colors' in options ? options.colors : null,
hoverAnimation = 'hoverAnimation' in options ? options.hoverAnimation : true,
center = 'center' in options ? options.center : ['50%','50%'],
labelPosition = 'labelPosition' in options ? options.labelPosition : 'outside',
emphasis = 'emphasis' in options ? options.emphasis : {},
labelFormatter = 'labelFormatter' in options ? options.labelFormatter : '{b}',
labelLine = 'labelLine' in options ? options.labelLine : {},
roseType = 'roseType' in options ? options.roseType : false,
legendBoxLeft = 'legendBoxLeft' in options ? options.legendBoxLeft : 'auto';
legendBoxBottom = 'legendBoxBottom' in options ? options.legendBoxBottom : 'auto',
legendBoxHeight = 'legendBoxHeight' in options ? options.legendBoxHeight : 'auto',
y = 'y' in options ? options.y : 'center',
legendType = 'legendType' in options ? options.legendType : 'plain';
var option = {
title: {
text: chartTitle,
x:'center',
top:10,
textStyle:{
color:'#5E5E5E',
fontSize:20
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend:{
type:legendType,
orient:"vertical",
y:y,
right:legendBoxLeft,
bottom:legendBoxBottom,
height:legendBoxHeight,
itemWidth:14,
data:data.map(function (a,b) {
return a.name;
})
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
},
top:35,
right:20,
},
color:colors,
series : [
{
name:chartTitle,
type:'pie',
radius :radius,
hoverAnimation:hoverAnimation,
center: center,
avoidLabelOverlap: false,
roseType:roseType,
data:data.sort(function (a, b) { return a.value - b.value; }),
label: {
normal: {
show:isLabel,
position:labelPosition,
formatter:labelFormatter
},
emphasis: emphasis
},
labelLine: {
normal:labelLine
}
}
]
};
var myechsrt = echarts.init(document.querySelector(el));
myechsrt.setOption(option)
return myechsrt;
}
function initbarOrPieBtn(el,toBar,toPie,endValue){
$(el).css('position',"relative");
var html='<div class="chart-btns"><div class="chart-btns-box"><span class="app-icon-3232 app-bar to-bar"></span><span class="app-icon-3232 app-pie to-pie"></span></div></div>'
$(el).append(html);
$("span.to-bar").bind("click",function () {
toBar(endValue);
})
$("span.to-pie").bind("click",function () {
toPie();
})
}
function record(options){//更新记录数
var el = 'el' in options ? options.el : console.error('cannot find el'),
data = 'data' in options ? options.data : [];
if(data.length > 0){
data = data.sort(function (a, b) { return b.value - a.value; });
}
var title = 'title' in options ? options.title : "",
tooltipFormatter = 'tooltipFormatter' in options ? options.tooltipFormatter() : null,
xData = 'xData' in options ? options.xData() : data.map(function (a,b){return a.name}),
val = 'val' in options ? options.val() : data.map(function (a,b){return a.value}),
err = 'err' in options ? options.err() : data.map(function (a,b){return a.error}),
legendData = 'legendData' in options ? options.legendData() : [],
colors = 'colors' in options ? options.colors : ['#6797f5'],
endValue = 'endValue' in options ? options.endValue : 6
var seriesData = 'seriesData' in options? options.seriesData() : null;
var option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
title:{
text: title,
left:'center',
top:10,
textStyle:{
color:'#5E5E5E',
fontSize:20
}
},
dataZoom: [{
type: 'inside',
//startValue:0,
//endValue:endValue
orient:"vertical",
}, {
type: 'slider',
show:false,
bottom:-20,
textStyle:{
color:'#7CAAFB',
fontSize:0
},
borderColor:'rgba(0,0,0,0)',
fillerColor:'#2b91e7',
handleSize:"0%"
}],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: xData,
axisLabel: {
textStyle: {
fontSize: 15,
}
},
},
series: [
{
name: '成功数量',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
//
position: 'insideLeft',
textStyle: {
fontSize: 15,
}
}
},
data: val
},
{
name: '失败数量',
type: 'bar',
stack: '总量',
label: {
normal: {
formatter: '{c}\n\n',
show: true,
position: 'right',
textStyle: {
fontSize: 15,
}
}
},
data:err
},
]
};
var myechsrt = echarts.init(document.querySelector(el));
myechsrt.setOption(option)
return myechsrt;
}
function kind(options){//种类统计
var el = 'el' in options ? options.el : console.error('cannot find el'),
data = 'data' in options ? options.data : [];
if(data.length > 0){
data = data.sort(function (a, b) { return b.value - a.value; });
}
var title = 'title' in options ? options.title : "",
tooltipFormatter = 'tooltipFormatter' in options ? options.tooltipFormatter() : null,
xData = 'xData' in options ? options.xData() : data.map(function (a,b){return a.name}),
legendData = 'legendData' in options ? options.legendData() : [],
colors = 'colors' in options ? options.colors : ['#6797f5'],
endValue = 'endValue' in options ? options.endValue : 6
var seriesData = 'seriesData' in options? options.seriesData() : null;
var option = {
title:{
text: title,
left:'center',
top:10,
textStyle:{
color:'#5E5E5E',
fontSize:20
}
},
color:colors,
legend:{
bottom:0,
data:legendData
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
},
top:35,
right:20,
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow', // 默认为直线，可选为：'line' | 'shadow'
},
formatter:tooltipFormatter
},
calculable : true,
dataZoom: [{
type: 'inside',
}, {
type: 'slider',
show:false,
bottom:-20,
textStyle:{
color:'#7CAAFB',
fontSize:0
},
borderColor:'rgba(0,0,0,0)',
fillerColor:'#2b91e7',
handleSize:"0%"
}],
grid: {
left: '3%',
right: '4%',
bottom: '5%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : xData,
axisLabel: {
textStyle: {
fontSize: 15,
}
},
}
],
yAxis : [
{
type : 'value'
}
],
series : seriesData ? seriesData : [
{
name:title,
type:'bar',
barWidth:'80%',
data:data,
}
]
};
var myechsrt = echarts.init(document.querySelector(el));
myechsrt.setOption(option)
return myechsrt;
}
function initStatistical(title,data1,data2,endValue){
//横条图
function toBar(endValue){
$(".echart-box").html('<div style=" height: 120%;" id="echartContainer" class="echart-container"></div>');
record({//更新记录数
el:'#echartContainer',
data:data1,
title:title,
endValue:endValue?endValue:15,
tooltipFormatter:function (data){
return '{a} <br/> {b} : {c} (条)'
}
})
}
toBar(endValue)
initStatisticalTable({
el:'#divTable',
title:title,
data:data2,
})
}
//统计分析-- 统计图 -- 即表格 是单项
function recordStatistical(title,data1,data2,endValue){
//竖条图
function toBar(endValue){//种类统计
$(".echart-box").html('<div style=" height: 120%;" id="echartContainer" class="echart-container"></div>');
kind({
el:'#echartContainer',
data:data1,
title:title,
endValue:endValue?endValue:15,
tooltipFormatter:function (data){
return '{a} <br/> {b} : {c} (条)'
}
})
}
function toPie(){
$(".echart-box").html('<div id="echartContainer" class="echart-container"></div>');
initPie('#echartContainer',data1,{
chartTitle:title,
isLabel:true,
radius:['0','60%'],
colors:['#E4E625','#30C3E8','#A76EEE','#F3949A','#Fcc'],
hoverAnimation:false,
center:['50%','50%'],
emphasis:{
show: true,
textStyle: {
fontSize: 16,
fontWeight: 'bold'
}
},
legendType:"scroll",
legendBoxLeft:40,
legendBoxHeight:"50%",
})
}
toBar(endValue)
initStatisticalTable({
el:'#divTable',
title:title,
data:data2,
})
}
/**
* 现状数据分析
*/
var configSum="";//档值，数据越多，档越大
var newDataDynamic=true;
function newTreeFigure(data,sum,endValue){
configSum=sum;
//横条图
function toBar(endValue){
$("#newEchartContainer").html('<div style=" height: 100%;" id="newEchart" class="echart-container"></div>');
newXueyuan({
el:'#newEchart',
data:data,
//title:title,
endValue:endValue?endValue:15,
tooltipFormatter:function (data){
return '{a} <br/> {b} : {c} (条)'
}
})
}
toBar(endValue);
}
/**
* 现状分析树状图
* @param options
* @returns
*/
function newXueyuan(options){
var config={"top":'10%',"left":'7%',"bottom":'10%',"right":'30%',"expandAndCollapse":false,"fontSize":20,"symbolSize":20}
if(configSum==1){
config={"top":'10%',"left":'7%',"bottom":'10%',"right":'30%',"expandAndCollapse":false,"fontSize":20,"symbolSize":20}
}else if(configSum==2){
config={"top":'10%',"left":'7%',"bottom":'10%',"right":'50%',"expandAndCollapse":false,"fontSize":15,"symbolSize":15}
}else if(configSum==3){
config={"top":'10%',"left":'7%',"bottom":'10%',"right":'50%',"expandAndCollapse":true,"fontSize":10,"symbolSize":10}
}
var el = 'el' in options ? options.el : console.error('cannot find el'),
data = 'data' in options ? options.data : [];
if(data.length > 0){
data = data.sort(function (a, b) { return b.value - a.value; });
}
var cloors=['#FF0000','#0000FF','#11EE11','#808080','#33CCCC','#DD2292','#2BD54D','#0033FF','#E61A42','#2BD5D5'];
data.itemStyle = {//根节点
color : '#ef9512',
borderColor:'#ef9512'
};
var n=0;
for(var i=0;i< data.children.length;i++){
n++;
data.children[i].lineStyle = {//根节点线条
color : '#ef9512',
borderColor:'#ef9512'
} ;
data.children[i].itemStyle = {//根节点
color : cloors[n],
borderColor:cloors[n],
};
for(var j=0;j< data.children[i].children.length;j++){//第二个节点
data.children[i].children[j].lineStyle = {//根节点线条
color : cloors[n],
borderColor:cloors[n],
} ;
data.children[i].children[j].itemStyle = {
color : cloors[n],
borderColor:cloors[n],
}
}
if(n==9){
n=0;
}
}
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}',
hideDelay: 0 // chart.refresh();刷新时会维持当时图表的所有状态，所以设置隐藏延迟为0，否则在快速选择另一个节点时（尤其是数据比较多时）导致无法显示选择中的tooltip
//无法完全避免但是很大减轻了副作用
},
series: [{
name: '树图',
type: 'tree',
orient: 'horizontal', // vertical horizontal
rootLocation: { x: '10%', y: '60%' }, // 根节点位置 {x: 'center',y: 10}
nodePadding: 50, //智能定义全局最小节点间距，不能定义层级节点间距
symbol: 'circle',
symbolSize: 20,
roam: true,
data: [data],
silent: true,
// initialTreeDepth:null,
expandAndCollapse:config.expandAndCollapse,//关闭事件
top: config.top,
left: config.left,
bottom: config.bottom,
right: config.right,
animation:newDataDynamic,
label: {
normal: {
position: 'top',
verticalAlign: 'middle',
align: 'middle',
fontSize:config.fontSize ,
offset:[0,-10],
}
},
leaves: {
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left',
offset:[0,0],
}
}
},
}]
};
var myechsrt = echarts.init(document.querySelector(el));
myechsrt.setOption(option);
newDataDynamic=false;
return myechsrt;
}
/**
* 历史数据分析
*/
var reloadData={};//历史数据结构
var historyDataDynamic=true;
var initialize_1 =true;//初始化加载一次
var load="";
function historyTreeFigure(data,sum,flag,endValue){
load=flag;
configSum=sum;
if(flag=="1"){
initialize_1=true
}
//横条图
reloadData=data;
if(initialize_1){
$("#historyEchartContainer").html('<div style=" height: 100%;" id="historyEchart" class="echart-container"></div>');
initialize_1=false;
}
function toBar(endValue){
historyXueyuan({
el:'#historyEchart',
data:data,
//title:title,
endValue:endValue?endValue:15,
tooltipFormatter:function (data){
return '{a} <br/> {b} : {c} (条)'
}
})
}
toBar(endValue);
}
/**
* 历史分析数据树图
* @param options
* @returns
*/
function historyXueyuan(options){
var config={"top":'10%',"left":'7%',"bottom":'10%',"right":'30%',"expandAndCollapse":false,"fontSize":20,"symbolSize":20}
if(configSum==1){
config={"top":'10%',"left":'7%',"bottom":'10%',"right":'50%',"expandAndCollapse":false,"fontSize":20,"symbolSize":20}
}else if(configSum==2){
config={"top":'10%',"left":'7%',"bottom":'10%',"right":'50%',"expandAndCollapse":false,"fontSize":15,"symbolSize":15}
}else if(configSum==3){
config={"top":'10%',"left":'7%',"bottom":'10%',"right":'50%',"expandAndCollapse":true,"fontSize":10,"symbolSize":10}
}
var el = 'el' in options ? options.el : console.error('cannot find el'),
data = 'data' in options ? options.data : [];
if(data.length > 0){
data = data.sort(function (a, b) { return b.value - a.value; });
}
var cloors=['#FF0000','#0000FF','#11EE11','#808080','#33CCCC','#DD2292','#2BD54D','#0033FF','#E61A42','#2BD5D5'];
data.itemStyle = {//根节点
color : '#ef9512',
borderColor:'#ef9512'
};
var n=0;
for(var i=0;i< data.children.length;i++){
n++;
data.children[i].lineStyle = {//根节点线条
color : '#ef9512',
borderColor:'#ef9512'
} ;
for(var j=0;j< data.children[i].children.length;j++){//第二个节点
data.children[i].children[j].lineStyle = {//根节点线条
color : cloors[n],
borderColor:cloors[n],
} ;
data.children[i].children[j].itemStyle = {
color : cloors[n],
borderColor:cloors[n],
}
}
if(n==9){
n=0;
}
}
if(load=="1"){
historyDataDynamic=true;
}
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}',
hideDelay: 0 // chart.refresh();刷新时会维持当时图表的所有状态，所以设置隐藏延迟为0，否则在快速选择另一个节点时（尤其是数据比较多时）导致无法显示选择中的tooltip
//无法完全避免但是很大减轻了副作用
},
series: [{
name: '树图',
type: 'tree',
orient: 'horizontal', // vertical horizontal
rootLocation: { x: '10%', y: '60%' }, // 根节点位置 {x: 'center',y: 10}
nodePadding: 50, //智能定义全局最小节点间距，不能定义层级节点间距
symbol: 'circle',
symbolSize: 20,
roam: true,
data: [data],
silent: false,
// initialTreeDepth:null,
expandAndCollapse:config.expandAndCollapse,//关闭事件
top: '10%',
left: '7%',
bottom: '10%',
right: '30%',
animation:historyDataDynamic,
label: {
normal: {
position: 'top',
verticalAlign: 'middle',
align: 'middle',
fontSize:config.fontSize ,
offset:[0,-10],
}
},
leaves: {
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left',
offset:[0,0],
}
}
},
}]
};
interceptor_1=true;
var myechsrt = echarts.init(document.querySelector(el));
$("#dateSelect").attr('disabled',false);
myechsrt.setOption(option,true)
myechsrt.on('click',function(params){
clickSwitchPictures(params,data);
});
historyDataDynamic=false;
return myechsrt;
}
/**
* 点击切换图片
*/
function clickSwitchPictures(params,data){
//校验点击的是历史节点
if(typeof(params.value)!="undefined" ){
//var check = 'image://data:image/png;base64,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';
var check = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+nhxg7wAAAT1JREFUSIm91r1Kw2AYxfFfgh+ddOtoR92tiKOrH+BVqLN4F96Mg3Z1FJQKegdFESoo6qTT45BG0CaxtcYDB8ITcv68eZ/3IyFUaBbr2MEaWpjHC3o4xzHO8F6RE0WeInaJeyJGcJ84IGaK84aLi8T1iOHffU0s/QRZIR5/Ccj9RKyWQZaI5wkBuZ+/jih7mJ7gF5X5ZpD7CTn8Y0DuwxzSkHVHHZA+0UixhWbVYplATWyn2KwJkGsjxXLNkHaStZv5GiEvSTZBwyquVitJiuspXsePG0uvKW6L3iTJ+C7RXYrLmkaQ6yJFp2ZIR80r/iFf8W84qmkUR4P8/9uF+YfzJHf7D+anLzthlUEQC0T3l4ArojWcWX5b2Tf6beWe2Bt8N5SXqL53NWTnzaZst25hTrYV9dDFKU4GXVSoD4zWTpuLY5GgAAAAAElFTkSuQmCC';
contrastData(params.value,params.name);
//将点击的节点和数据结构的匹配到一起
for(var i =0;i<data.children.length;i++){
if(data.children[i].value==params.data.value){
if(check == params.data.symbol){//如果节点是已选中，则改变成未选中
// reloadData.children[i].symbol = 'image://data:image/png;base64,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';
initialize_1=true;
reloadData.children[i].symbol = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+nhxg7wAAAURJREFUSIm91r1KxEAUhuEnwZ+t3M7SLbV3RSxt/QGvQq3Fu/BmLNTWUlBW0DsQRVBQXCutjkU2gm4S467xwAdhMvO9TDJzzkkIFTGNVWxhBR200ccNznCIU7xX+ESRJoht4p6IGnog9oipYr/hwXniqqb5d10RCz9BloinEQG5nonlMsgC8TImINfL1x1lD5NjfKIyXQ98PyH7dRfnUXP+fg5pyU5HE5AHopViA7NVl2WMmMVmivWGAHmspVhsGNJNsuOm/f1NxO/dkqRwuJ+U2f0hREL0MVPXKIeXGRbEa4rb2tNHi7sUFw1DzlOcNAw50fCNf8xv/BsOGtrFwcD//7Iw/1BPcnV/838qMu+SivKLmCN6IwIuic6wZ3m3sqt+t3JP7AzWDfklqvuulqzerMuydUeWgl5lfVcPxzganKLC+ABWE1+A4b02FwAAAABJRU5ErkJggg==';
historyTreeFigure(reloadData);
// return;
}else{//如果节点是未选中，则改变成已选中
// reloadData.children[i].symbol = 'image://data:image/png;base64,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';
initialize_1=true;
reloadData.children[i].symbol = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+nhxg7wAAAT1JREFUSIm91r1Kw2AYxfFfgh+ddOtoR92tiKOrH+BVqLN4F96Mg3Z1FJQKegdFESoo6qTT45BG0CaxtcYDB8ITcv68eZ/3IyFUaBbr2MEaWpjHC3o4xzHO8F6RE0WeInaJeyJGcJ84IGaK84aLi8T1iOHffU0s/QRZIR5/Ccj9RKyWQZaI5wkBuZ+/jih7mJ7gF5X5ZpD7CTn8Y0DuwxzSkHVHHZA+0UixhWbVYplATWyn2KwJkGsjxXLNkHaStZv5GiEvSTZBwyquVitJiuspXsePG0uvKW6L3iTJ+C7RXYrLmkaQ6yJFp2ZIR80r/iFf8W84qmkUR4P8/9uF+YfzJHf7D+anLzthlUEQC0T3l4ArojWcWX5b2Tf6beWe2Bt8N5SXqL53NWTnzaZst25hTrYV9dDFKU4GXVSoD4zWTpuLY5GgAAAAAElFTkSuQmCC';
historyTreeFigure(reloadData);
// return;
}
}
}
}
}
/**
* 数据来源
*/
function forceFigure(links,nodes,distance,loadName,endValue){
function toBar(endValue){
$(".echart-box").html('<div style=" height: 100%;" id="echartContainer" class="echart-container"></div>');
laiyuan({//更新记录数
el:'#echartContainer',
links:links,
nodes:nodes,
distance:distance,
loadName:loadName,
})
}
toBar(endValue);
}
function laiyuan(options){
var el = 'el' in options ? options.el : console.error('cannot find el'),
nodes = 'nodes' in options ? options.nodes : [],
links = 'links' in options ? options.links : [];
distance = 'distance' in options ? options.distance : 1000;
loadName='loadName' in options ? options.loadName : "";
var categories = [];
// {name:"有来源表的"},{name:"没有来源表的"}
categories[0] = {
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#FF9900' // 0% 处的颜色
}, {
offset: 1, color: '#FF9900' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
};
categories[1] = {name: '有来源表',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#00FF99' // 0% 处的颜色
}, {
offset: 1, color: '#00FF99' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
};
categories[2] = {name: '有来源表',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#22DD22' // 0% 处的颜色
}, {
offset: 1, color: '#22DD22' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
};
categories[3] = {name: '无来源表',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#00FF99' // 0% 处的颜色
}, {
offset: 1, color: '#00FF99' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
};
var graph= {links:links , nodes:nodes};
option = {
tooltip: {
show:true,
trigger: 'item',
//formatter:'{b}'
formatter:function(params){
//正则判断是否包含>号
var regex=/\>/g;
var str=[];//装字符串
if(params.data.nameAll){
return params.data.nameAll;
}
str = params.name.split(' > ');
for(var i=0;i<nodes.length;i++){
for(var n=0;n<str.length;n++){
if(str[n]==nodes[i].id){
str[n]=nodes[i].nameAll;
}
}
}
return ""+str[0]+">"+str[1]+""
}
},
legend: {
bottom:20,
orient: 'vertical',
left: 'right',
data:categories,
itemGap:15,
textStyle: {
color: '#5076C2',
fontSize:20
},
},
animation: false,
series : [
{
type: 'graph',
layout: 'force',
data: graph.nodes,
links:graph.links,
categories: categories,
roam: true,
// layoutAnimation:false,
lineStyle: {
width:3,
color: '#000',
},
label: {
show:true,
position:'inside',
align:'center',
color: '#000',//文字颜色
fontSize:15,
fontWeight:'normal',
width:100,
formatter: [
'{b}',
// '{c}'
].join('\n'),
rich: {
b: {
},
// c: {
// },
}
// layoutAnimation:true,
},
force: {
repulsion: distance,
layoutAnimation:false,
}
}
]
};
var myechsrt = echarts.init(document.querySelector(el));
/* myechsrt.on('legendselectchanged', function(obj) {
});*/
myechsrt.setOption(option)
}
/**
* 血缘分析
*/
var configSum_1=1;//档值，数据越多，档越大
var newDataDynamic=true;
function bloodTree(data,sum,endNone,endValue){
configSum_1=sum;
//横条图
function toBar(endValue){
$("#EchartContainer").html('<div style=" height: 100%;" id="newEchart" class="echart-container"></div>');
bloodEcharts({
el:'#echartContainer',
data:data,
endNone:endNone,
//title:title,
endValue:endValue?endValue:15,
tooltipFormatter:function (data){
return '{a} <br/> {b} : {c} (条)'
}
})
}
toBar(endValue);
}
/**
* 血缘分析
* @param options
* @returns
*/
function bloodEcharts(options){
var config={"top":'5%',"left":'7%',"bottom":'10%',"right":'20%',"expandAndCollapse":false,"fontSize":20,"symbolSize":20}
if(configSum_1==1){
config={"top":'5%',"left":'7%',"bottom":'10%',"right":'20%',"expandAndCollapse":false,"fontSize":20,"symbolSize":20}
}else if(configSum_1==2){
config={"top":'5%',"left":'7%',"bottom":'10%',"right":'20%',"expandAndCollapse":false,"fontSize":15,"symbolSize":12}
}else if(configSum_1==3){
config={"top":'5%',"left":'7%',"bottom":'10%',"right":'20%',"expandAndCollapse":true,"fontSize":10,"symbolSize":8}
}
var el = 'el' in options ? options.el : console.error('cannot find el'),
data = 'data' in options ? options.data : [],
endNone='endNone' in options ? options.endNone : []
if(data.length > 0){
data = data.sort(function (a, b) { return b.value - a.value; });
}
var cloors=['#FF0000','#0000FF','#11EE11','#808080','#33CCCC','#DD2292','#2BD54D','#0033FF','#E61A42','#2BD5D5'];
data.itemStyle = {//根节点
color : '#ef9512',
borderColor:'#ef9512'
};
var n=0;
for(var i=0;i< data.children.length;i++){
n++;
data.children[i].lineStyle = {//根节点线条
color : '#ef9512',
borderColor:'#ef9512'
} ;
data.children[i].itemStyle = {//根节点
color : cloors[n],
borderColor:cloors[n],
};
var count_1=0;
for(var m=0;m<endNone.length;m++){
if(data.children[i].name!=endNone[m]){
count_1++;
}
}
if(count_1==endNone.length){
for(var j=0;j< data.children[i].children.length;j++){//第二个节点
data.children[i].children[j].lineStyle = {//根节点线条
color : cloors[n],
borderColor:cloors[n],
} ;
data.children[i].children[j].itemStyle = {
color : cloors[n],
borderColor:cloors[n],
}
}
}
if(n==9){
n=0;
}
}
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}',
hideDelay: 0 // chart.refresh();刷新时会维持当时图表的所有状态，所以设置隐藏延迟为0，否则在快速选择另一个节点时（尤其是数据比较多时）导致无法显示选择中的tooltip
//无法完全避免但是很大减轻了副作用
},
series: [{
name: '树图',
type: 'tree',
orient: 'horizontal', // vertical horizontal
rootLocation: { x: '10%', y: '60%' }, // 根节点位置 {x: 'center',y: 10}
nodePadding: 30, //智能定义全局最小节点间距，不能定义层级节点间距
symbol: 'circle',
symbolSize: config.symbolSize,
roam: true,
data: [data],
silent: true,
// initialTreeDepth:null,
expandAndCollapse:config.expandAndCollapse,//关闭事件
top: config.top,
left: config.left,
bottom: config.bottom,
right: config.right,
animation:newDataDynamic,
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
// align: 'middle',
fontSize:config.fontSize ,
// offset:[0,-20],
}
},
leaves: {
label: {
normal: {
position: 'right',
//verticalAlign: 'middle',
align: 'left',
offset:[0,0],
}
}
},
}]
};
var myechsrt = echarts.init(document.querySelector(el));
myechsrt.setOption(option);
newDataDynamic=false;
return myechsrt;
}
版权声明：本文为qq_42795915原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。