//获取随机数
|
function getRandom(n){
|
var array=[];
|
var array2=[];
|
for(var i=0;i<n;i++)
|
{
|
array2[i]=Math.random();
|
array[i]=Math.floor(1000*Math.random()+10)+array2[i];
|
}
|
return array;
|
}
|
|
//创建柱状图
|
var myChart;
|
var maxflag;
|
var minflag;
|
function CreateEchart(ele,lname,xdata,sdata,tname,max,min, colorObj){
|
maxflag = true;
|
minflag = true;
|
myChart=echarts.init(ele);
|
var option={
|
myColor: colorObj,
|
animation:false,
|
tooltip:{
|
trigger: 'axis',
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
type : 'line', // 默认为直线，可选为：'line' | 'shadow'
|
color:"white"
|
}
|
},
|
title : {
|
text: tname,
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:11
|
}
|
},
|
xAxis:{
|
data:xdata
|
},
|
yAxis:[{
|
name:"y",
|
type:'value',
|
min:min,
|
max:max,
|
axisLabel:{
|
formatter:function(value){
|
//解决原点处带符号问题
|
if(value==0)
|
{
|
return value;
|
}else{
|
return value;
|
}
|
}
|
}
|
}],
|
grid: {
|
top:'12%',
|
left: '8%',
|
right: '5%',
|
bottom: '8%'
|
},
|
series:[{
|
type:'bar',
|
name:lname,
|
data:sdata,
|
//显示柱状的数值
|
itemStyle:{
|
width:0.5,
|
emphasis:{
|
color:'#54d3e6'
|
},
|
|
normal:{
|
label:{
|
show:false
|
},
|
color: function(value) {
|
var option=myChart.getOption();
|
//console.info(option);
|
var max=Math.max.apply( Math, option.series[0].data);
|
var min=Math.min.apply( Math, option.series[0].data);
|
if(maxflag==true && value.value==max)
|
{
|
maxflag=false;
|
return option.myColor.max;
|
}
|
else if(minflag==true && value.value==min)
|
{
|
minflag=false;
|
return option.myColor.min;
|
}else
|
{
|
var clow=Titleobj.getClow();
|
var alow=Titleobj.getAlow();
|
if(parseFloat(value.value)<parseFloat(clow)){
|
return option.myColor.change; //设置更换颜色
|
}else if(parseFloat(value.value)<parseFloat(alow)){
|
return option.myColor.warn; //设置告警颜色
|
}
|
//console.info(title.getClow());
|
return option.myColor.normal; //设置为普通的颜色
|
}
|
max=0;
|
min=0;
|
}
|
}
|
},
|
//显示平均值
|
markLine:{
|
data:[
|
{
|
type:'average',
|
name:avg_string,
|
itemStyle:{
|
normal:{
|
color:'#54d3e6'
|
}
|
}
|
},
|
sdata!=undefined && sdata.length>0?[
|
{
|
name: alarm_string,
|
value: Titleobj.getAlow(),
|
x:'8%', yAxis:Titleobj.getAlow(),
|
itemStyle:{
|
normal:{
|
color:function() {
|
return cPicker.warn;
|
}()
|
}
|
}
|
},
|
{name: alarm_string,value: Titleobj.getAlow(),x:'95%', yAxis: Titleobj.getAlow()}
|
]:[
|
{name: '', value:''},
|
{name: '', value:''}
|
],
|
sdata!=undefined && sdata.length>0?[
|
{
|
name: change_string,
|
value:Titleobj.getClow(),
|
x:'8%',
|
yAxis: Titleobj.getClow(),
|
itemStyle:{
|
normal:{
|
color:function() {
|
return cPicker.change;
|
}()
|
}
|
}
|
},
|
{name: change_string, value:Titleobj.getClow(),x:'95%', yAxis: Titleobj.getClow()}
|
]:[
|
{name: '', value:''},
|
{name: '', value:''}
|
]
|
]
|
}
|
}]
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option);
|
}
|
|
|
//更新柱状图中的数据
|
function reflush(data,tname,max,min){
|
//更新数据
|
maxflag=true;
|
minflag=true;
|
//console.info("data.length:"+data.length);
|
var option=myChart.getOption();
|
option.title[0].text=tname;
|
//console.info(option);
|
option.series[0].data=data;
|
option.yAxis[0].min=max,
|
option.yAxis[0].max=min,
|
myChart.setOption(option);
|
}
|
|
|
// 绘制左上折线图
|
var myLineChartTop; //小左上折线图
|
var mybigLineChartTop; //放大时候之后的折线图
|
function CreateLineEchartTop(echartObj,ele,lname,xdata,sdata,ymax,ymin,tname, specialPoint){
|
if(echartObj=='myLineChartTop'){
|
myLineChartTop=echarts.init(ele);
|
}else if(echartObj='mybigLineChartTop'){
|
mybigLineChartTop=echarts.init(ele);
|
}
|
myLineChartTop.group = 'group1';
|
let markLine = {};
|
if(specialPoint && specialPoint.code) {
|
markLine = {
|
data: [{
|
label: {
|
show: true,
|
position: 'end',
|
formatter: [
|
'{a|Tg:' + xdata[specialPoint.min] + '}' + '{c|}',
|
'{b|Vg:' + sdata[0][specialPoint.min] + 'V}' + '{c|}'
|
].join('\n'),
|
rich: {
|
a: {
|
|
},
|
b: {
|
|
},
|
c: {
|
width: 60,
|
height: 15,
|
}
|
},
|
},
|
xAxis: xdata[specialPoint.min],
|
},
|
{
|
label: {
|
show: true,
|
position: 'end',
|
formatter: [
|
'{c|}' + '{a|Tt:' + xdata[specialPoint.max] + '}',
|
'{c|}' + '{b|Vt:' + sdata[0][specialPoint.max] + 'V}'
|
].join('\n'),
|
rich: {
|
a: {
|
|
},
|
b: {
|
|
},
|
c: {
|
width: 80,
|
height: 15,
|
}
|
},
|
},
|
xAxis: xdata[specialPoint.max],
|
}
|
]
|
};
|
}
|
let option={
|
tooltip:{
|
trigger: 'axis'
|
},
|
toolbox: {
|
show : true
|
},
|
title : {
|
text: specialPoint && specialPoint.code?tname:"端电压折线图",
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:13,
|
align:'center'
|
},
|
subtext: specialPoint && specialPoint.code?"":tname,
|
subtextStyle:{
|
fontSize:13,
|
align:'right'
|
}
|
},
|
legend: {
|
show: false,
|
data: lname,
|
right: '4%',
|
orient: 'vertical'
|
},
|
calculable :true,
|
xAxis:{
|
data:xdata
|
},
|
grid: {
|
left: '8%',
|
right: '5%',
|
bottom: '2%',
|
containLabel: true
|
},
|
yAxis:[{
|
name:"" ,
|
type:'value',
|
min:Math.floor(ymin-1),
|
max:Math.ceil(ymax+1),
|
precision:2,
|
axisLabel:{
|
formatter:function(value){
|
//解决原点处带符号问题
|
if(value==0)
|
{
|
return value;
|
}else{
|
return value ;
|
}
|
}
|
}
|
}],
|
series:function(){
|
let serie=[];
|
for( let i=0;i<sdata.length;i++){
|
let item={
|
type:'line',
|
symbol:'none',
|
name:lname[i],
|
data:sdata[i],
|
itemStyle:{
|
normal:{
|
lineStyle:{
|
width:2
|
}
|
}
|
},
|
markLine: i==1?markLine:{}
|
};
|
serie.push(item);
|
}
|
return serie;
|
}()
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
if(echartObj=='myLineChartTop'){
|
option.animation = false;
|
myLineChartTop.setOption(option);
|
}else if(echartObj='mybigLineChartTop'){
|
mybigLineChartTop.setOption(option);
|
}
|
}
|
|
//更新左上折线图中的数据
|
function reflushltop(tname){
|
//更新数据
|
maxflag=true;
|
minflag=true;
|
var option=myLineChartTop.getOption();
|
option.title[0].subtext=tname;
|
//console.info(option);
|
myLineChartTop.setOption(option);
|
|
/*if($('#bigEchartsCon').css('display')=='block'){
|
option=mybigLineChartTop.getOption();
|
option.title[0].subtext=tname;
|
//console.info(option);
|
mybigLineChartTop.setOption(option);
|
}*/
|
|
}
|
|
|
//创建右上折线图
|
var myRightLineChart; //小右上折线图
|
var mybigRightLineChart; //大右上折线图
|
function CreateRightLineEchart(echartObj,ele,lname,xdata,sdata,ymax,ymin,tname){
|
if(echartObj=="myRightLineChart"){
|
myRightLineChart=echarts.init(ele);
|
}else if(echartObj=="mybigRightLineChart"){
|
mybigRightLineChart=echarts.init(ele);
|
}
|
myRightLineChart.group = 'group1';
|
var option={
|
tooltip:{
|
trigger:'axis',
|
formatter:function(params){
|
var marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#ffcc00;"></span>';
|
var data = "";
|
for(var i=0;i<params.length;i++){
|
var str = '';
|
str+=params[i].name+'</br>';
|
str+=marker+params[i].seriesName+': '+params[i].data+'A</br>';
|
data = params[i].data == undefined?marker+params[i].seriesName+":-":str;
|
}
|
return data;
|
}
|
},
|
title : {
|
text: "电池电流折线图",
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:13
|
},
|
subtext:tname,
|
subtextStyle:{
|
fontSize:13,
|
align:'right'
|
}
|
},
|
toolbox:{
|
show:true
|
},
|
calculable:true,
|
|
xAxis:{
|
//position:'bottom',
|
axisLine:{
|
//onZero:false
|
},
|
data:xdata
|
},
|
grid: {
|
left: '1%',
|
right: '5%',
|
bottom: '2%',
|
containLabel: true
|
},
|
yAxis:[{
|
name:"y(A)" ,
|
type:'value',
|
min:Math.floor(ymin-1),
|
max:Math.ceil(ymax+1), //修复折线为直线时在最图表顶部问题
|
axisLabel:{
|
formatter:function(value){
|
//解决原点处带符号问题
|
if(value==0)
|
{
|
return value;
|
}else{
|
return value ;
|
}
|
}
|
}
|
}],
|
series:[{
|
type:'line',
|
name:lname,
|
symbol:'none',
|
data:sdata,
|
itemStyle:{
|
normal:{
|
lineStyle:{
|
color:'#ffcc00'
|
}
|
}
|
}
|
}]
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
if(echartObj=="myRightLineChart"){
|
option.animation = false;
|
myRightLineChart.setOption(option);
|
}else if(echartObj=="mybigRightLineChart"){
|
mybigRightLineChart.setOption(option);
|
}
|
}
|
|
//更新右上折线图中的数据
|
function reflushlrtop(tname){
|
//更新数据
|
maxflag=true;
|
minflag=true;
|
var option=myRightLineChart.getOption();
|
option.title[0].subtext = tname;
|
//console.info(option);
|
option.animation = false;
|
myRightLineChart.setOption(option);
|
/*if($('#bigEchartsCon').css('display')=='block'){
|
option=mybigRightLineChart.getOption();
|
option.title[0].subtext = tname;
|
//console.info(option);
|
mybigRightLineChart.setOption(option);
|
}*/
|
}
|
|
//创建右下折线图
|
var myLineChart; //小右下折线图
|
var mybigLineChart; //大右下折线图
|
function CreateLineEchart(echartObj,ele,lname,xdata,sdata,ymax,ymin,tname){
|
if(echartObj=='myLineChart'){
|
myLineChart=echarts.init(ele);
|
myLineChart.clear();
|
}else if(echartObj='mybigLineChart'){
|
mybigLineChart=echarts.init(ele);
|
}
|
myLineChart.group = 'group1';
|
//console.info("ymax :"+ymax+"ymin:"+ymin);
|
var option={
|
tooltip:{
|
trigger:'axis'
|
},
|
title : {
|
text: "单体电压折线图",
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:13
|
},
|
subtext:tname,
|
subtextStyle:{
|
fontSize:13,
|
align:'right'
|
}
|
},
|
toolbox:{
|
show : true,
|
feature : {
|
//dataZoom : {show: true},
|
//restore : {show: true}
|
|
}
|
},
|
calculable : true,
|
xAxis:{
|
data:xdata
|
},
|
grid: {
|
left: '1%',
|
right: '5%',
|
bottom: '2%',
|
containLabel: true
|
},
|
yAxis:[{
|
name:"y(V)" ,
|
type:'value',
|
//min:ymin-0.1,
|
//max:ymax+0.1,
|
min:(ymin*0.99).toFixed(3),
|
max:(ymax*1.01).toFixed(3),
|
axisLabel:{
|
formatter:function(value){
|
//解决原点处带符号问题
|
if(value==0)
|
{
|
return value;
|
}else{
|
return value ;
|
}
|
}
|
}
|
}],
|
series:function(){
|
var serie=[];
|
for( var i=0;i<sdata.length;i++){
|
var item={
|
type:'line',
|
symbol:'none',
|
name:lname[i],
|
data:sdata[i],
|
itemStyle:{
|
normal:{
|
lineStyle:{
|
width:1
|
}
|
}
|
}
|
};
|
serie.push(item);
|
}
|
return serie;
|
}()
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
if(echartObj=='myLineChart'){
|
option.animation = false;
|
myLineChart.setOption(option);
|
}else if(echartObj='mybigLineChart'){
|
mybigLineChart.setOption(option);
|
}
|
}
|
|
//更新右下折线图中的数据
|
function reflushlrLine(tname){
|
//更新数据
|
maxflag=true;
|
minflag=true;
|
var option=myLineChart.getOption();
|
option.title[0].subtext=tname;
|
//console.info(option);
|
myLineChart.setOption(option);
|
/*if($('#bigEchartsCon').css('display')=='block'){
|
|
option=mybigLineChart.getOption();
|
option.title[0].subtext=tname;
|
//console.info(option);
|
mybigLineChart.setOption(option);
|
}*/
|
}
|
|
//创建放大柱状图
|
var myBigChart;
|
var maxBigflag;
|
var minBigflag;
|
function CreateBigEchart(ele,lname,xdata,sdata,tname){
|
//console.info(tname);
|
maxBigflag=true;
|
minBigflag=true;
|
myBigChart=echarts.init(ele);
|
var option={
|
tooltip:{
|
trigger: 'axis',
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
type : 'line', // 默认为直线，可选为：'line' | 'shadow'
|
color:"white"
|
}
|
},
|
title : {
|
text: tname,
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:11
|
}
|
},
|
xAxis:{
|
data:xdata
|
},
|
grid: {
|
left: '1%',
|
right: '5%',
|
bottom: '2%',
|
containLabel: true
|
},
|
yAxis:[{
|
name:"y",
|
type:'value',
|
min:(Math.min.apply( Math, sdata )*0.99).toFixed(3),
|
max:(Math.max.apply( Math, sdata )*1.01).toFixed(3),
|
// max:Math.ceil(ymax),
|
// min:Math.floor(ymin-1.0),
|
axisLabel:{
|
formatter:function(value){
|
//解决原点处带符号问题
|
if(value==0)
|
{
|
return value;
|
}else{
|
return value;
|
}
|
}
|
}
|
}],
|
series:[{
|
type:'bar',
|
name:lname,
|
data:sdata,
|
//显示柱状的数值
|
itemStyle:{
|
width:0.5,
|
emphasis:{
|
color:'#54d3e6'
|
},
|
|
normal:{
|
label:{
|
show:false
|
},
|
color: function(value) {
|
var option=myBigChart.getOption();
|
var max=value.value;
|
var min=option.series[0].data[0];
|
for(var i=0;i<sdata.length;i++)
|
{
|
if(option.series[0].data[i]>max)
|
{
|
max=option.series[0].data[i];
|
}
|
if(min>option.series[0].data[i])
|
{
|
min=option.series[0].data[i];
|
}
|
}
|
if(maxBigflag==true && value.value==max)
|
{
|
maxBigflag=false;
|
return 'green';
|
}
|
else if(minBigflag==true && value.value==min)
|
{
|
minBigflag=false;
|
return 'red';
|
}else
|
{
|
var clow=Titleobj.getClow();
|
var alow=Titleobj.getAlow();
|
if(parseFloat(value.value)<parseFloat(clow)){
|
return "#BFA0D1"; //设置更换颜色
|
}else if(parseFloat(value.value)<parseFloat(alow)){
|
return "#ffff00"; //设置告警颜色
|
}
|
//console.info(title.getClow());
|
return '#b4d3fa'; //设置为普通的颜色
|
}
|
max=0;
|
min=0;
|
}
|
}
|
},
|
//显示平均值
|
markLine:{
|
data:[
|
{
|
type:'average',
|
name:avg_string,
|
itemStyle:{
|
normal:{
|
color:'#54d3e6'
|
}
|
}
|
},
|
sdata!=undefined && sdata.length>0?[
|
{name: alarm_string, value: Titleobj.getAlow(),xAxis:xdata[0], yAxis:Titleobj.getAlow(),itemStyle:{ normal:{color:'#ffff00'} }},
|
{name: alarm_string,value: Titleobj.getAlow(),xAxis:xdata[xdata.length-1], yAxis: Titleobj.getAlow()}
|
]:[
|
{name: '', value:''},
|
{name: '', value:''}
|
],
|
sdata!=undefined && sdata.length>0?[
|
{name: change_string, value:Titleobj.getClow(),xAxis:xdata[0], yAxis: Titleobj.getClow(),itemStyle:{ normal:{color:'#ff66cc'} }},
|
{name: change_string, value:Titleobj.getClow(),xAxis:xdata[xdata.length-1], yAxis: Titleobj.getClow()}
|
]:[
|
{name: '', value:''},
|
{name: '', value:''}
|
]
|
]
|
}
|
}]
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
myBigChart.setOption(option);
|
}
|
//更新放大后柱状图中的数据
|
function reflushBig(data,tname){
|
//更新数据
|
maxBigflag=true;
|
minBigflag=true;
|
var option=myBigChart.getOption();
|
option.title[0].text=tname;
|
//console.info(option);
|
option.series[0].data=data;
|
myBigChart.setOption(option);
|
|
}
|
|
|
//创建电阻条形图
|
var ResEchart;
|
var BigResEchart;
|
function CreateResEchart(EchartObj,ele,xdata,sdata,tname){
|
maxflag=true;
|
minflag=true;
|
if(EchartObj=='ResEchart'){
|
ResEchart=echarts.init(ele);
|
}else{
|
BigResEchart=echarts.init(ele);
|
}
|
var option={
|
tooltip:{},
|
title : {
|
text: tname,
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:11
|
}
|
},
|
xAxis:{
|
data:xdata
|
},
|
yAxis:[{
|
name:"y(mΩ)",
|
type:'value',
|
//max:Math.ceil(ymax),
|
//min:ymin-1.0,
|
axisLabel:{
|
formatter:function(value){
|
//解决原点处带符号问题
|
if(value==0)
|
{
|
return value;
|
}else{
|
return value;
|
}
|
}
|
}
|
}],
|
series:[{
|
type:'bar',
|
//name:lname,
|
data:sdata,
|
//显示柱状的数值
|
itemStyle:{
|
width:0.5,
|
emphasis:{
|
color:'#54d3e6'
|
},
|
|
normal:{
|
label:{
|
show:false
|
},
|
color: function(value) {
|
var option;
|
if(EchartObj=='ResEchart'){
|
option=ResEchart.getOption();
|
}else{
|
option=BigResEchart.getOption();
|
}
|
|
var max=value.value;
|
var min=option.series[0].data[0];
|
for(var i=0;i<sdata.length;i++)
|
{
|
if(option.series[0].data[i]>max)
|
{
|
max=option.series[0].data[i];
|
}
|
if(min>option.series[0].data[i])
|
{
|
min=option.series[0].data[i];
|
}
|
}
|
if(maxflag==true && value.value==max)
|
{
|
maxflag=false;
|
return 'red';
|
}
|
else if(minflag==true && value.value==min)
|
{
|
minflag=false;
|
return 'green';
|
}else
|
{
|
var clow=ResTitleobj.getClow();
|
var alow=ResTitleobj.getAlow();
|
if(parseFloat(value.value)>parseFloat(clow)){
|
return "#BFA0D1"; //设置更换颜色
|
}else if(parseFloat(value.value)>parseFloat(alow)){
|
return "#ffff00"; //设置告警颜色
|
}
|
//console.info(title.getClow());
|
return '#b4d3fa'; //设置为普通的颜色
|
}
|
max=0;
|
min=0;
|
}
|
}
|
},
|
//显示平均值
|
markLine:{
|
data:[
|
{
|
type:'average',
|
name:avg_string,
|
itemStyle:{
|
normal:{
|
color:'#54d3e6'
|
}
|
}
|
},
|
sdata.length>0?([
|
{name: alarm_string,value:ResTitleobj.getAlow(),xAxis:xdata[0], yAxis:ResTitleobj.getAlow(),itemStyle:{ normal:{color:'#ffff00'}}},
|
{name: alarm_string,value:ResTitleobj.getAlow(),xAxis:xdata[xdata.length-1], yAxis:ResTitleobj.getAlow()}
|
]):(
|
[
|
{name: '', value:''},
|
{name: '', value:''}
|
]
|
),
|
sdata.length>0?([
|
{name: change_string, value:ResTitleobj.getClow(),xAxis:xdata[0], yAxis:ResTitleobj.getClow(),itemStyle:{ normal:{color:'#ff66cc'}}},
|
{name: change_string, value:ResTitleobj.getClow(),xAxis:xdata[xdata.length-1], yAxis:ResTitleobj.getClow()}
|
]):(
|
[
|
{name: '', value:''},
|
{name: '', value:''}
|
]
|
)
|
]
|
}
|
}]
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
if(EchartObj=='ResEchart'){
|
ResEchart.setOption(option);
|
}else{
|
BigResEchart.setOption(option);
|
}
|
}
|
//更新柱状图中的数据
|
function reflushResEchart(data,tname){
|
//更新数据
|
maxflag=true;
|
minflag=true;
|
var option=ResEchart.getOption();
|
option.title[0].text=tname;
|
//console.info(option);
|
option.series[0].data=data;
|
ResEchart.setOption(option);
|
|
if($('#bigEchartsCon').css('display')=='block'){
|
|
option = BigResEchart.getOption();
|
option.title[0].text=tname;
|
//console.info(option);
|
BigResEchart.setOption(option);
|
}
|
|
}
|
|
//创建电池电导百分比折线图
|
var mySerpercentChart; //小电导百分比条形图
|
var mybigSerpercentChart; //大电导百分比条形图
|
function CreateSerpercentChart(echartObj,ele,xdata,sdata,tname){
|
maxflag=true;
|
minflag=true;
|
if(echartObj=='mySerpercentChart'){
|
mySerpercentChart = echarts.init(ele);
|
}else{
|
mybigSerpercentChart = echarts.init(ele);
|
}
|
var option={
|
tooltip : {
|
trigger:'axis',
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
}
|
},
|
title : {
|
text: tname,
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:11
|
}
|
},
|
xAxis:{
|
data:xdata
|
},
|
yAxis:[{
|
name:"y(%)",
|
type:'value',
|
max:100,
|
min:0,
|
axisLabel:{
|
formatter:function(value){
|
//解决原点处带符号问题
|
if(value==0)
|
{
|
return value;
|
}else{
|
return value;
|
}
|
}
|
}
|
}],
|
series:[{
|
type:'bar',
|
//name:lname,
|
data:sdata,
|
//显示柱状的数值
|
itemStyle:{
|
width:0.5,
|
emphasis:{
|
color:'#54d3e6'
|
},
|
|
normal:{
|
label:{
|
show:false
|
},
|
color: function(value) {
|
var option;
|
if(echartObj=='mySerpercentChart'){
|
option=mySerpercentChart.getOption();
|
}else{
|
option=mybigSerpercentChart.getOption();
|
}
|
|
var max=option.series[0].data[0];
|
var min=option.series[0].data[0];
|
for(var i=0;i<sdata.length;i++)
|
{
|
if(parseFloat(max)<parseFloat(option.series[0].data[i]))
|
{
|
//console.info(max+"<"+option.series[0].data[i]);
|
max=option.series[0].data[i];
|
}
|
if(parseFloat(min)>parseFloat(option.series[0].data[i]))
|
{
|
min=option.series[0].data[i];
|
}
|
}
|
//console.info(max+"----"+min);
|
if(maxflag==true && value.value==max)
|
{
|
maxflag=false;
|
return 'green';
|
}
|
else if(minflag==true && value.value==min)
|
{
|
minflag=false;
|
return 'red';
|
}else
|
{
|
var clow=SerPerTitleobj.getClow();
|
var alow=SerPerTitleobj.getAlow();
|
if(parseFloat(value.value)<parseFloat(clow)){
|
return "#BFA0D1"; //设置更换颜色
|
}else if(parseFloat(value.value)<parseFloat(alow)){
|
return "#ffff00"; //设置告警颜色
|
}
|
//console.info(title.getClow());
|
return '#b4d3fa'; //设置为普通的颜色
|
}
|
max=0;
|
min=0;
|
}
|
}
|
},
|
//显示平均值
|
markLine:{
|
data:[
|
{
|
type:'average',
|
name:avg_string,
|
itemStyle:{
|
normal:{
|
color:'#54d3e6'
|
}
|
}
|
},
|
sdata.length>0?[
|
{name: alarm_string, value:SerPerTitleobj.getAlow(),xAxis:xdata[0], yAxis:SerPerTitleobj.getAlow(),itemStyle:{ normal:{color:'#ffff00'} }},
|
{name: alarm_string,value:SerPerTitleobj.getAlow(),xAxis:xdata[xdata.length-1], yAxis: SerPerTitleobj.getAlow()}
|
]:[
|
{name: '', value:''},
|
{name: '', value:''}
|
],
|
sdata.length>0?[
|
{name: change_string, value:SerPerTitleobj.getClow(),xAxis:xdata[0], yAxis: SerPerTitleobj.getClow(),itemStyle:{ normal:{color:'#ff66cc'} }},
|
{name: change_string, value:SerPerTitleobj.getClow(),xAxis:xdata[xdata.length-1], yAxis: SerPerTitleobj.getClow()}
|
]:[
|
{name: '', value:''},
|
{name: '', value:''}
|
]
|
]
|
}
|
}]
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
if(echartObj=='mySerpercentChart'){
|
mySerpercentChart.setOption(option);
|
}else{
|
mybigSerpercentChart.setOption(option);
|
}
|
}
|
//电导百分比条形图
|
function reflushmySerpercent(data,tname){
|
//更新数据
|
resmaxflag = true;
|
resminflag = true;
|
var option = SerEchart.getOption();
|
option.title[0].text = tname;
|
//console.info(option);
|
option.series[0].data=data;
|
SerEchart.setOption(option);
|
if($('#bigEchartsCon').css('display')=='block'){
|
|
option=BigSerEchart.getOption();
|
option.title[0].text=tname;
|
//console.info(option);
|
BigSerEchart.setOption(option);
|
}
|
}
|
|
|
|
//创建电池电压条形图
|
var MonEchart;
|
var BigMonEchart;
|
function CreateMonEchart(echartObj,ele,xdata,sdata,tname){
|
maxflag=true;
|
minflag=true;
|
if(echartObj=='MonEchart'){
|
MonEchart=echarts.init(ele);
|
}else{
|
BigMonEchart=echarts.init(ele);
|
}
|
var option={
|
tooltip:{},
|
title : {
|
text: tname,
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:11
|
}
|
},
|
xAxis:{
|
data:xdata
|
},
|
yAxis:[{
|
name:"y(V)",
|
type:'value',
|
//max:parseInt(ymax),
|
//min:ymin-1.0,
|
axisLabel:{
|
formatter:function(value){
|
//解决原点处带符号问题
|
if(value==0)
|
{
|
return value;
|
}else{
|
return value;
|
}
|
}
|
}
|
}],
|
series:[{
|
type:'bar',
|
//name:lname,
|
data:sdata,
|
//显示柱状的数值
|
itemStyle:{
|
width:0.5,
|
emphasis:{
|
color:'#54d3e6'
|
},
|
|
normal:{
|
label:{
|
show:false
|
},
|
color: function(value) {
|
var option;
|
if(echartObj=='MonEchart'){
|
option=MonEchart.getOption();
|
}else{
|
option=BigMonEchart.getOption();
|
}
|
var max=value.value;
|
var min=option.series[0].data[0];
|
for(var i=0;i<sdata.length;i++)
|
{
|
if(option.series[0].data[i]>max)
|
{
|
max=option.series[0].data[i];
|
}
|
if(min>option.series[0].data[i])
|
{
|
min=option.series[0].data[i];
|
}
|
}
|
if(maxflag==true && value.value==max)
|
{
|
maxflag=false;
|
return 'green';
|
}
|
else if(minflag==true && value.value==min)
|
{
|
minflag=false;
|
return 'red';
|
}else
|
{
|
var clow=VolTitleobj.getClow();
|
var alow=VolTitleobj.getAlow();
|
if(parseFloat(value.value)<parseFloat(clow)){
|
return "#BFA0D1"; //设置更换颜色
|
}else if(parseFloat(value.value)<parseFloat(alow)){
|
return "#ffff00"; //设置告警颜色
|
}
|
//console.info(title.getClow());
|
return '#b4d3fa'; //设置为普通的颜色
|
}
|
max=0;
|
min=0;
|
}
|
}
|
},
|
//显示平均值
|
markLine:{
|
data:[
|
{
|
type:'average',
|
name:avg_string,
|
itemStyle:{
|
normal:{
|
color:'#54d3e6'
|
}
|
}
|
},
|
sdata.length>0?[
|
{name: alarm_string, value: VolTitleobj.getAlow(),xAxis:xdata[0], yAxis:VolTitleobj.getAlow(),itemStyle:{ normal:{color:'#ffff00'} }},
|
{name: alarm_string,value: VolTitleobj.getAlow(),xAxis:xdata[xdata.length-1], yAxis: VolTitleobj.getAlow()}
|
]:[
|
{name: '', value:''},
|
{name: '', value:''}
|
],
|
sdata.length>0?[
|
{name: change_string, value:VolTitleobj.getClow(),xAxis:xdata[0], yAxis: VolTitleobj.getClow(),itemStyle:{ normal:{color:'#ff66cc'} }},
|
{name: change_string, value:VolTitleobj.getClow(),xAxis:xdata[xdata.length-1], yAxis: VolTitleobj.getClow()}
|
]:[
|
{name: '', value:''},
|
{name: '', value:''}
|
]
|
]
|
}
|
}]
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
if(echartObj=='MonEchart'){
|
MonEchart.setOption(option);
|
}else{
|
BigMonEchart.setOption(option);
|
}
|
}
|
//更新柱状图中的数据
|
function reflushMonEchart(data,tname){
|
//更新数据
|
resmaxflag=true;
|
resminflag=true;
|
var option=MonEchart.getOption();
|
option.title[0].text=tname;
|
//console.info(option);
|
option.series[0].data=data;
|
MonEchart.setOption(option);
|
if($('#bigEchartsCon').css('display')=='block'){
|
|
option=BigMonEchart.getOption();
|
option.title[0].text=tname;
|
//console.info(option);
|
BigMonEchart.setOption(option);
|
}
|
}
|
|
|
//创建电池电导条形图
|
var SerEchart;
|
var BigSerEchart;
|
function CreateSerEchart(echartObj,ele,xdata,sdata,tname){
|
maxflag=true;
|
minflag=true;
|
if(echartObj=='SerEchart'){
|
SerEchart=echarts.init(ele);
|
}else{
|
BigSerEchart=echarts.init(ele);
|
}
|
var option={
|
tooltip:{},
|
title : {
|
text: tname,
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:11
|
}
|
},
|
xAxis:{
|
data:xdata
|
},
|
yAxis:[{
|
//name:"y(V)",
|
type:'value',
|
//max:parseInt(ymax),
|
//min:ymin-1.0,
|
axisLabel:{
|
formatter:function(value){
|
//解决原点处带符号问题
|
if(value==0)
|
{
|
return value;
|
}else{
|
return value;
|
}
|
}
|
}
|
}],
|
series:[{
|
type:'bar',
|
//name:lname,
|
data:sdata,
|
//显示柱状的数值
|
itemStyle:{
|
width:0.5,
|
emphasis:{
|
color:'#54d3e6'
|
},
|
|
normal:{
|
label:{
|
show:false
|
},
|
color: function(value) {
|
var option;
|
if(echartObj=='SerEchart'){
|
option=SerEchart.getOption();
|
}else{
|
option=BigSerEchart.getOption();
|
}
|
|
var max=option.series[0].data[0];
|
var min=option.series[0].data[0];
|
for(var i=0;i<sdata.length;i++)
|
{
|
if(parseFloat(max)<parseFloat(option.series[0].data[i]))
|
{
|
//console.info(max+"<"+option.series[0].data[i]);
|
max=option.series[0].data[i];
|
}
|
if(parseFloat(min)>parseFloat(option.series[0].data[i]))
|
{
|
min=option.series[0].data[i];
|
}
|
}
|
//console.info(max+"----"+min);
|
if(maxflag==true && value.value==max)
|
{
|
maxflag=false;
|
return 'green';
|
}
|
else if(minflag==true && value.value==min)
|
{
|
minflag=false;
|
return 'red';
|
}else
|
{
|
var clow=SerTitleobj.getClow();
|
var alow=SerTitleobj.getAlow();
|
if(parseFloat(value.value)<parseFloat(clow)){
|
return "#BFA0D1"; //设置更换颜色
|
}else if(parseFloat(value.value)<parseFloat(alow)){
|
return "#ffff00"; //设置告警颜色
|
}
|
//console.info(title.getClow());
|
return '#b4d3fa'; //设置为普通的颜色
|
}
|
max=0;
|
min=0;
|
}
|
}
|
},
|
//显示平均值
|
markLine:{
|
data:[
|
{
|
type:'average',
|
name:avg_string,
|
itemStyle:{
|
normal:{
|
color:'#54d3e6'
|
}
|
}
|
},
|
sdata.length>0?[
|
{name: alarm_string, value:SerTitleobj.getAlow(),xAxis:xdata[0], yAxis:SerTitleobj.getAlow(),itemStyle:{ normal:{color:'#ffff00'} }},
|
{name: alarm_string,value:SerTitleobj.getAlow(),xAxis:xdata[xdata.length-1], yAxis: SerTitleobj.getAlow()}
|
]:[
|
{name: '', value:''},
|
{name: '', value:''}
|
],
|
sdata.length>0?[
|
{name: change_string, value:SerTitleobj.getClow(),xAxis:xdata[0], yAxis: SerTitleobj.getClow(),itemStyle:{ normal:{color:'#ff66cc'} }},
|
{name: change_string, value:SerTitleobj.getClow(),xAxis:xdata[xdata.length-1], yAxis: SerTitleobj.getClow()}
|
]:[
|
{name: '', value:''},
|
{name: '', value:''}
|
]
|
]
|
}
|
}]
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
if(echartObj=='SerEchart'){
|
SerEchart.setOption(option);
|
}else{
|
BigSerEchart.setOption(option);
|
}
|
}
|
//更新柱状图中的数据
|
function reflushSerEchart(data,tname){
|
//更新数据
|
resmaxflag=true;
|
resminflag=true;
|
var option=SerEchart.getOption();
|
option.title[0].text=tname;
|
//console.info(option);
|
option.series[0].data=data;
|
SerEchart.setOption(option);
|
if($('#bigEchartsCon').css('display')=='block'){
|
|
option=BigSerEchart.getOption();
|
option.title[0].text=tname;
|
//console.info(option);
|
BigSerEchart.setOption(option);
|
}
|
}
|
|
|
/*
|
生成柱状图
|
@param object eBar echarts对象
|
@param object opt echarts对象的属性
|
@param array lname 存储值得名称
|
@param array oldData 初始数据
|
@param array newData 实际数据
|
@param array xAxisData 图表中x轴坐标的数据
|
*/
|
function createBar(eBar, lname, oldData, newData, xAxisData) {
|
var shift = getShift(oldData, newData);
|
var opt = getOpt(lname, oldData, newData, xAxisData);
|
eBar.setOption(opt);
|
}
|
|
// 设置柱状图的option
|
function getOpt(lname, oldData, newData, xAxisData) {
|
var option = new Object();
|
var shift = getShift(oldData, newData);
|
option = {
|
backgroundColor: "#fff",
|
tooltip: {},
|
xAxis: {
|
data: xAxisData,
|
name: '单体',
|
silent: false,
|
splitLine: {
|
show: false
|
},
|
splitArea: {
|
show: false
|
}
|
},
|
yAxis: {
|
name: 'V',
|
inverse: false,
|
splitArea: {
|
show: false
|
}
|
},
|
grid: {
|
|
},
|
series: [{
|
name: lname[0],
|
type: 'bar',
|
stack: 'one',
|
data: newData,
|
label: {
|
normal: {
|
show: false,
|
position: 'inside'
|
}
|
},
|
itemStyle: {
|
normal: {
|
color: function (value) {
|
var max = Math.max.apply(Math, newData);
|
var min = Math.min.apply(Math, newData);
|
if (value.value == max) {
|
return 'green';
|
} else if (value.value == min) {
|
return 'red';
|
} else {
|
return '#54d3e6';
|
}
|
}
|
}
|
}
|
},
|
{
|
name: lname[1],
|
type: 'bar',
|
label: {
|
normal: {
|
show: false,
|
position: 'inside'
|
}
|
},
|
itemStyle: {
|
normal: {
|
color: '#aaa',
|
borderColor: '#aaa'
|
}
|
},
|
stack: 'one',
|
data: shift
|
}
|
]
|
};
|
return option;
|
}
|
|
// 计算两个同样长度的数组的对应值得差
|
function getShift(oldData, newData) {
|
var temp = new Array();
|
if (oldData.length != newData.length) {
|
alert('数据有bug！！！');
|
} else {
|
for (var i = 0; i < oldData.length; i++) {
|
temp.push((oldData[i] - newData[i]).toFixed(2));
|
}
|
}
|
|
return temp;
|
}
|
|
/**
|
* 获取折线图的opt
|
* @param object obj生成折线图数据
|
* @return object opt 生成折线图的opt对象
|
*/
|
function getGraphLineOpt(obj) {
|
var _obj = new Object();
|
_obj.name = obj.name?obj.name:""; // 主标题
|
_obj.subname = obj.subname?obj.subname:""; // 子标题
|
_obj.lname = obj.lname?obj.lname:[]; // 折线名称
|
_obj.xdata = obj.xdata?obj.xdata:[]; // x轴数据
|
_obj.ydata = obj.ydata?obj.ydata:[]; // y轴数据
|
_obj.yunit = obj.yunit?obj.yunit:""; // y轴单位
|
var ymin = getMinFromArr(_obj.ydata); // 数据的最小值
|
var ymax = getMaxFromArr(_obj.ydata); // 数据的最大值
|
var opt={
|
tooltip:{
|
trigger:'axis'
|
},
|
title : {
|
text: _obj.name,
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:13
|
},
|
subtext:_obj.subname,
|
subtextStyle:{
|
fontSize:13,
|
align:'right'
|
}
|
},
|
toolbox:{
|
show : true,
|
feature : {
|
//dataZoom : {show: true},
|
//restore : {show: true}
|
|
}
|
},
|
calculable : true,
|
xAxis:{
|
data:_obj.xdata
|
},
|
grid: {
|
left: '1%',
|
right: '5%',
|
bottom: '2%',
|
containLabel: true
|
},
|
yAxis:[{
|
name: _obj.yunit,
|
type:'value',
|
//min:ymin-0.1,
|
//max:ymax+0.1,
|
min:(ymin*0.99).toFixed(3),
|
max:(ymax*1.01).toFixed(3),
|
axisLabel:{
|
formatter:function(value){
|
//解决原点处带符号问题
|
if(value==0)
|
{
|
return value;
|
}else{
|
return value ;
|
}
|
}
|
}
|
}],
|
series:function(){
|
var serie=[];
|
for( var i=0;i<_obj.ydata.length;i++){
|
var item={
|
type:'line',
|
symbol:'none',
|
name:_obj.lname[i],
|
data:_obj.ydata[i],
|
itemStyle:{
|
normal:{
|
lineStyle:{
|
width:1
|
}
|
}
|
}
|
};
|
serie.push(item);
|
}
|
return serie;
|
}()
|
};
|
|
return opt;
|
}
|
|
// 获取二维数组的最后一笔数据
|
function getLastData(arr) {
|
var rs = new Array();
|
for(var i=0; i<arr.length; i++) {
|
var last = arr[i].length -1;
|
rs.push(arr[i][last]);
|
}
|
|
return rs;
|
}
|
|
// 获取二维数组指定位置的数据(从0开始)
|
function getPointData(arr, index) {
|
var rs = new Array();
|
for(var i=0; i<arr.length; i++) {
|
rs.push(arr[i][index]);
|
}
|
|
return rs;
|
}
|
|
// 将二维数组值的行变成列
|
function changeArrColAndRow(arr) {
|
var rs = new Array();
|
var rows = arr.length;
|
var cols = arr[0].length;
|
//console.info(arr);
|
for(var i=0; i<rows; i++) {
|
if(arr[i].length > cols) {
|
cols = arr[i].length;
|
}
|
}
|
|
// 将二维数组的行变成列
|
for(var i=0; i<cols; i++) {
|
var _rs = new Array();
|
for(var j=0; j<rows; j++) {
|
if(i <arr[j].length || i==arr[j].length) {
|
_rs.push(arr[j][i]);
|
}
|
}
|
rs.push(_rs);
|
}
|
|
return rs;
|
}
|
|
// 生成页面中特殊的折线图
|
function createSpecialGraphLine(echartObj, options) {
|
var defaults = {
|
tname: '',
|
subtxt: '',
|
xdata: [],
|
sdata: [],
|
unit: '',
|
maxtimes: 1.01,
|
mintimes: 0.99,
|
save: 2,
|
lname: [],
|
setMax: true,
|
setMin: true,
|
group: ''
|
};
|
echartObj.clear();
|
var opts = $.extend({}, defaults, options || {});
|
//console.info(opts);
|
echartObj.group = opts.group;
|
// 设置最大值和最小值
|
var min = opts.setMin?(getMinFromArr(opts.sdata)*opts.mintimes).toFixed(opts.save): 0;
|
var max = (getMaxFromArr(opts.sdata)*opts.maxtimes).toFixed(opts.save);
|
//console.info('最小值'+getMinFromArr(opts.sdata));
|
//console.info('最大值'+getMaxFromArr(opts.sdata));
|
var option={
|
tooltip:{
|
trigger:'axis',
|
formatter:function(params){
|
var data = "";
|
var str = '';
|
str+=params[0].name+'</br>';
|
for(var i=0;i<params.length;i++){
|
var marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+params[i].color+';"></span>';
|
str+=marker+params[i].seriesName+': '+params[i].data+opts.unit+'</br>';
|
data = params[i].data == undefined?marker+params[i].seriesName+":-":str;
|
}
|
return data;
|
}
|
},
|
title : {
|
text: opts.tname,
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:13
|
},
|
subtext: opts.subtxt,
|
subtextStyle:{
|
fontSize:13,
|
align:'right'
|
}
|
},
|
toolbox:{
|
show : true,
|
feature : {
|
//dataZoom : {show: true},
|
//restore : {show: true}
|
|
}
|
},
|
calculable : true,
|
xAxis:{
|
data:opts.xdata
|
},
|
grid: {
|
left: '1%',
|
right: '5%',
|
bottom: '2%',
|
containLabel: true
|
},
|
yAxis:[{
|
name:"y"+opts.unit,
|
type:'value',
|
min: min,
|
max: max,
|
axisLabel:{
|
formatter:function(value){
|
//解决原点处带符号问题
|
if(value==0)
|
{
|
return value;
|
}else{
|
return value ;
|
}
|
}
|
}
|
}],
|
series:function(){
|
var serie=[];
|
for( var i=0;i<opts.sdata.length;i++){
|
var item={
|
type:'line',
|
symbol:'none',
|
smooth:true,
|
name:opts.lname[i],
|
data:opts.sdata[i],
|
itemStyle:{
|
normal:{
|
lineStyle:{
|
width:2
|
}
|
}
|
}
|
};
|
serie.push(item);
|
}
|
return serie;
|
}()
|
};
|
|
echartObj.setOption(option);
|
}
|
|
// 生成柱状图
|
function createSpecialGraphBar(echartObj, options) {
|
var defaults = {
|
tname: '',
|
subtxt: '',
|
xdata: [],
|
sdata: [],
|
unit: '',
|
maxtimes: 1.01,
|
mintimes: 0.99,
|
save: 2,
|
lname: [],
|
setMax: true,
|
setMin: true,
|
group: '',
|
isnotshowvalue: false
|
};
|
|
|
echartObj.clear();
|
var opts = $.extend({}, defaults, options || {});
|
|
// 设置最大值和最小值
|
var min = opts.setMin?(getMinFromArr(opts.sdata)*opts.mintimes).toFixed(opts.save): 0;
|
var max = (getMaxFromArr(opts.sdata)*opts.maxtimes).toFixed(opts.save);
|
|
var option={
|
//animation:false,
|
tooltip:{
|
show:true,
|
trigger: 'axis',
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
type : 'line', // 默认为直线，可选为：'line' | 'shadow'
|
color:"white"
|
}
|
},
|
title : {
|
text: opts.tname,
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:13
|
}
|
},
|
xAxis:{
|
data:opts.xdata
|
},
|
grid: {
|
left: '1%',
|
right: '5%',
|
bottom: '2%',
|
containLabel: true
|
},
|
yAxis:{
|
min:min,
|
max:max,
|
name: "y"+opts.unit
|
},
|
series:[{
|
type:'bar',
|
name:opts.lname,
|
data:opts.sdata,
|
//显示柱状的数值
|
itemStyle:{
|
emphasis:{
|
color:'#54d3e6',
|
label: {
|
show: true,
|
position: 'top',
|
textStyle:{
|
fontWeight: 'bolder',
|
color:"#000"
|
}
|
}
|
},
|
normal:{
|
label:{
|
show: opts.isnotshowvalue,
|
position: 'top',
|
textStyle:{
|
fontWeight: 'bolder',
|
color:"#000"
|
}
|
|
},
|
|
color: function setcolor(value) {
|
var option = echartObj.getOption();
|
//console.info(option);
|
//console.info(value);
|
var max=Math.max.apply( Math, option.series[0].data);
|
var min=Math.min.apply( Math, option.series[0].data);
|
|
if(value.value==max)
|
{
|
return 'green';
|
}
|
else if(value.value==min)
|
{
|
return 'red';
|
}else
|
{
|
return '#5a5af8'; //设置为普通的颜色
|
}
|
}
|
}
|
}
|
}]
|
};
|
|
echartObj.setOption(option);
|
}
|
