//获取随机数
|
function getRandom(n)
|
{
|
var array=[];
|
for(var i=0;i<n;i++)
|
{
|
array[i]=Math.floor(10*Math.random()+10);
|
}
|
return array;
|
}
|
|
//创建柱状图
|
var myChart;
|
var maxflag;
|
var minflag;
|
function CreateEchart(ele,tle,lname,xdata,sdata,tname,max,min,colorObj){
|
//mychart=undefined;
|
if(colorObj == undefined) {
|
colorObj = {
|
"normal": '#5986BF'
|
}
|
}
|
myChart=echarts.init(ele);
|
myChart.clear();
|
maxflag=true;
|
minflag=true;
|
var option={
|
myColor: colorObj,
|
tooltip:{
|
show:true,
|
trigger: 'axis',
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
type : 'line', // 默认为直线，可选为：'line' | 'shadow'
|
color:"white"
|
},
|
formatter: function(params) {
|
var res = params[0].name+'<br/>';
|
var markline_data = myChart.getOption().series[0].markLine.data;
|
res+= params[0].seriesName;
|
res+=' : '+params[0].data+tle+'</br>';
|
//console.info(params);
|
for(var i = 0; i < markline_data.length; i++) {
|
|
res += markline_data[i][0].name;
|
res += ' : '+markline_data[i][0].value+tle+'<br/>';
|
}
|
return res;
|
}
|
},
|
title : {
|
text:tname,
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:13
|
}
|
},
|
xAxis:{
|
data:xdata
|
},
|
grid: {
|
top:'7%',
|
left: '6%',
|
right: '5%',
|
bottom: '8%'
|
},
|
yAxis:{
|
min:min,
|
max:max,
|
name: tle
|
},
|
series:[{
|
type:'bar',
|
name:lname,
|
data:sdata,
|
|
//显示柱状的数值
|
itemStyle:{
|
emphasis:{
|
color:'#54d3e6',
|
label: {
|
show: true,
|
position: 'top',
|
textStyle:{
|
fontWeight: 'bolder',
|
color:"#000"
|
}
|
}
|
},
|
normal:{
|
label:{
|
show: isnotshowvalue,
|
position: 'top',
|
textStyle:{
|
fontWeight: 'bolder',
|
color:"#000"
|
}
|
|
},
|
|
color: function setcolor(value) {
|
|
var option = myChart.getOption();
|
var max=Math.max.apply( Math, option.series[0].data);
|
var min=Math.min.apply( Math, option.series[0].data);
|
/*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 option.myColor.max;
|
}
|
else if(minflag==true && value.value==min)
|
{
|
minflag=false;
|
return option.myColor.min;
|
}else
|
{
|
//console.info(title);
|
var clow=title.getAhight();
|
var alow=title.getAlow();
|
if(parseFloat(value.value)>parseFloat(clow)){
|
return option.myColor.change;
|
//return "#ff66cc"; //设置更换颜色
|
}else if(parseFloat(value.value)<parseFloat(alow)){
|
//return "#F0DC97";
|
return option.myColor.warn; //设置告警颜色
|
}
|
//console.info(title.getClow());
|
return option.myColor.normal; //设置为普通的颜色
|
}
|
|
}
|
}
|
},
|
//显示平均值
|
markLine:{
|
silent:false,
|
label:{
|
normal:{
|
show:true
|
}
|
},
|
data:[
|
[
|
{
|
name: '平均值',
|
x:'6%',
|
value:title.getAvg(),
|
yAxis:title.getAvg(),
|
itemStyle:{
|
normal:{color:'blue'}
|
}
|
}, //标线起点
|
{
|
name: '平均值',
|
x:'95%',
|
value:title.getAvg(),
|
yAxis:title.getAvg()
|
} //标线终点
|
],
|
[
|
{
|
name: '低告警',
|
value:title.getAlow(),
|
x:'6%',
|
yAxis:title.getAlow(),
|
itemStyle:{
|
normal:{
|
color: function() {
|
return colorObj.warn;
|
}()
|
}
|
}
|
}, //标线起点
|
{name: '低告警',value:title.getAlow(),x:'95%', yAxis: title.getAlow()} //标线终点
|
],
|
[
|
{
|
name: '高告警',
|
value:title.getAhight(),
|
x:'6%',
|
yAxis: title.getAhight(),
|
itemStyle:{
|
normal:{
|
color: function() {
|
return colorObj.change;
|
}()
|
}
|
}
|
}, //标线起点
|
{name: '高告警',value:title.getAhight(),x:'95%', yAxis: title.getAhight()} //标线终点
|
]
|
]
|
}
|
}]
|
};
|
var lastcolor="";
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option);
|
//console.info(myChart.getOption());
|
myChart.hideLoading();
|
//console.info(option);
|
}
|
|
|
//更新图中的
|
function reflush(ydata,xdata,tname,max,min, colorObj){
|
if(!myChart){
|
return;
|
}
|
//更新数据
|
var option = myChart.getOption();
|
option.myColor = colorObj;
|
//console.info(option);
|
option.series[0].data = ydata;
|
option.title[0].text=tname;
|
option.xAxis[0].data = xdata;
|
var data=option.series[0].markLine.data;
|
//console.info(title);
|
for(var i=0;i<data.length;i++){
|
for(var j=0;j<data[i].length;j++){
|
if(data[i][j].name=='低告警'){
|
data[i][j].value = title.getAlow();
|
data[i][j].yAxis = title.getAlow();
|
if(j==0){
|
data[i][j].xAxis = xdata[0];
|
}else if(j==1){
|
data[i][j].xAxis = xdata[xdata.length-1];
|
}
|
}else if(data[i][j].name=='高告警'){
|
data[i][j].value = title.getAhight();
|
data[i][j].yAxis = title.getAhight();
|
if(j==0){
|
data[i][j].xAxis = xdata[0];
|
}else if(j==1){
|
data[i][j].xAxis = xdata[xdata.length-1];
|
}
|
}else if(data[i][j].name=='平均值'){
|
data[i][j].value = parseFloat(title.getAvg());
|
data[i][j].yAxis = parseFloat(title.getAvg());
|
if(j==0){
|
data[i][j].xAxis = xdata[0];
|
}else if(j==1){
|
data[i][j].xAxis = xdata[xdata.length-1];
|
}
|
}
|
}
|
}
|
option.series[0].markLine.data=data;
|
maxflag=true;
|
minflag=true;
|
//console.info("更新柱状图");
|
//console.info(option);
|
var tempmax = Math.max.apply(null,ydata)
|
if(tempmax > max){
|
max = (tempmax*1.25).toFixed(1);
|
}
|
option.yAxis[0].max = max;
|
option.yAxis[0].min = min;
|
myChart.setOption(option);
|
myChart.hideLoading();
|
//console.info(myChart.getOption());
|
}
|
|
//创建内阻的条形图
|
function CreateResistanceEchart(ele,tle,lname,xdata,sdata,tname,max,min,colorObj){
|
|
myChart=echarts.init(ele);
|
myChart.clear();
|
maxflag=true;
|
minflag=true;
|
var option={
|
myColor:colorObj,
|
tooltip : {
|
trigger: 'axis',
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
type : 'line', // 默认为直线，可选为：'line' | 'shadow'
|
color:"white"
|
},
|
formatter: function(params) {
|
var res = params[0].name+'<br/>';
|
var markline_data = myChart.getOption().series[0].markLine.data;
|
res+= params[0].seriesName;
|
res+=' : '+params[0].data+tle+'</br>';
|
for(var i = 0; i < markline_data.length; i++) {
|
res += markline_data[i][0].name;
|
res += ' : '+markline_data[i][0].value+tle+'<br/>';
|
}
|
return res;
|
}
|
},
|
title : {
|
text:tname,
|
x: "center", //标题水平方向位置
|
textStyle: {
|
fontSize:13
|
}
|
},
|
xAxis:{
|
data:xdata
|
},
|
grid: {
|
top:'7%',
|
left: '6%',
|
right: '5%',
|
bottom: '8%'
|
},
|
yAxis:{
|
// min:min,
|
max:max,
|
name: tle
|
},
|
series:[{
|
type:'bar',
|
name:lname,
|
data:sdata,
|
//显示柱状的数值
|
itemStyle:{
|
emphasis:{
|
color:'#54d3e6',
|
label: {
|
show: true,
|
position: 'top',
|
textStyle:{
|
fontWeight: 'bolder',
|
color:"#000"
|
}
|
}
|
},
|
normal:{
|
label:{
|
show: isnotshowvalue,
|
position: 'top',
|
textStyle:{
|
fontWeight: 'bolder',
|
color:"#000"
|
}
|
|
},
|
color: function(value) {
|
|
var option = myChart.getOption();
|
var max=option.series[0].data[0];
|
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 option.myColor.min; // 颜色值是反的
|
}
|
else if(minflag==true && value.value==min)
|
{
|
minflag=false;
|
return option.myColor.max; // 颜色值是反的
|
}else
|
{
|
var clow=title.getAhight();
|
var alow=title.getAlow();
|
if(parseFloat(value.value)>parseFloat(clow)){
|
return option.myColor.change;
|
//return "#ff66cc"; //设置更换颜色
|
}else if(parseFloat(value.value)<parseFloat(alow)){
|
//return "#ECE286";
|
return option.myColor.warn; //设置告警颜色
|
}
|
//console.info(title.getClow());
|
return option.myColor.normal; //设置为普通的颜色
|
}
|
|
}
|
}
|
},
|
|
//显示平均值
|
markLine:{
|
data:[
|
[
|
{
|
name: '平均值',
|
x:'6%',
|
value:title.getAvg(),
|
yAxis:title.getAvg(),
|
itemStyle:{
|
normal:{color:'blue'}
|
}
|
}, //标线起点
|
{
|
name: '平均值',
|
x:'95%',
|
value:title.getAvg(),
|
yAxis:title.getAvg()
|
} //标线终点
|
],
|
[
|
{
|
name: '低告警',
|
value: title.getAlow(),
|
x:'6%',
|
yAxis:title.getAlow(),
|
itemStyle:{
|
normal:{
|
color:function() {
|
return colorObj.warn;
|
}()
|
}
|
}
|
},
|
{name: '低告警',value: title.getAlow(),x:'95%', yAxis: title.getAlow()}
|
],
|
[
|
{
|
name: '高告警',
|
value:title.getAhight(),
|
x:'6%',
|
yAxis: title.getAhight(),
|
itemStyle:{
|
normal:{
|
color: function() {
|
return colorObj.change;
|
}()
|
}
|
}
|
},
|
{name: '高告警', value:title.getAhight(),x:'95%', yAxis: title.getAhight()}
|
]
|
]
|
}
|
}]
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option);
|
myChart.hideLoading();
|
}
|
|
//更新内阻条形图中的信息
|
function reflushResistance(ydata,xdata,tname,max,min, colorObj){
|
if(!myChart){
|
return;
|
}
|
|
//更新数据
|
var option = myChart.getOption();
|
option.myColor = colorObj;
|
option.series[0].data = ydata;
|
option.title[0].text=tname;
|
//console.info(option.series[0].markLine.data);
|
var data=option.series[0].markLine.data;
|
for(var i=0;i<data.length;i++){
|
for(var j=0;j<data[i].length;j++){
|
if(data[i][j].name=='低告警'){
|
data[i][j].value=title.getAlow();
|
data[i][j].yAxis=title.getAlow();
|
if(j==0){
|
data[i][j].xAxis = xdata[0];
|
}else if(j==1){
|
data[i][j].xAxis = xdata[xdata.length-1];
|
}
|
}else if(data[i][j].name=='高告警'){
|
data[i][j].value=title.getAhight();
|
data[i][j].yAxis=title.getAhight();
|
if(j==0){
|
data[i][j].xAxis = xdata[0];
|
}else if(j==1){
|
data[i][j].xAxis = xdata[xdata.length-1];
|
}
|
}else if(data[i][j].name=='平均值'){
|
data[i][j].value=title.getAvg();
|
data[i][j].yAxis=title.getAvg();
|
if(j==0){
|
data[i][j].xAxis = xdata[0];
|
}else if(j==1){
|
data[i][j].xAxis = xdata[xdata.length-1];
|
}
|
}
|
}
|
}
|
var tempmax = (Math.max.apply(null,ydata)*1.1).toFixed(3);
|
if(tempmax > max){
|
max = tempmax;
|
//max = (tempmax*1.25).toFixed(1);
|
}
|
option.yAxis[0].max = max;
|
// option.yAxis[0].min = min;
|
option.series[0].markLine.data=data;
|
option.xAxis[0].data = xdata;
|
|
maxflag=true;
|
minflag=true;
|
|
myChart.setOption(option);
|
myChart.hideLoading();
|
}
|
|
