生产数据大屏开发案例(作战指挥室)

【实例简介】

应用于企业led大屏开发

【实例截图】

【核心代码】

//年仪表盘
y_gauge1 = echarts.init(document.getElementById('y_gauge1'));
y_gauge2 = echarts.init(document.getElementById('y_gauge2'));
y_gauge3 = echarts.init(document.getElementById('y_gauge3'));
y_gauge4 = echarts.init(document.getElementById('y_gauge4'));

//订单完成情况螺旋图
var yearPlanData=[];
var yearOrderData=[];
var differenceData=[];
var visibityData=[];
var xAxisData=[];

for(var i=0;i<12;i )
{
yearPlanData.push(Math.round(Math.random()*900) 100);
yearOrderData.push(Math.round(Math.random()*yearPlanData[i]));
differenceData.push(yearPlanData[i]-yearOrderData[i]);
visibityData.push(yearOrderData[i]);
xAxisData.push((i 1).toString() "月");
}
orderStatus= echarts.init(document.getElementById('orderStatus'));
orderStatus_option={
title :{show:false},
tooltip : {
trigger: 'axis',
formatter: function (params){
return params[0].name '<br/>'
    params[0].seriesName ' : ' params[0].value '<br/>'
    params[1].seriesName ' : ' params[1].value '<br/>'
    '完成率：'
    (params[0].value > 0 ? (params[1].value/params[0].value*100).toFixed(2) '%' : '-') 
    '<br/>'
},
textStyle: {
color: '#FFF',
fontSize:24
}
},
toolbox: {show:false},
legend:{
top: 'top',
textStyle: {
color: '#B7E2FF',
fontSize:24,
fontFamily:'微软雅黑'
},
data:['计划生产','已接订单']
},
xAxis: {
data: xAxisData,
axisLabel: {
textStyle: {
color: '#B7E1FF',
fontSize:24
}
},
axisLine:{
lineStyle:{
color:'#09F'
}
},
axisTick:{
lineStyle:{
color:'#09F'
}
}
},
yAxis: {
inverse: false,
splitArea: {show: false},
axisLine:  {show: false},
axisTick:  {show: false},
axisLabel: {
textStyle: {
color: '#B7E1FF',
fontSize:24,
fontFamily:'Arial',
}
},
splitLine :{
lineStyle:{
color:'#09F'
}
}
},
grid: {
left: 100
},
series : [{
name:'计划生产',
type:'line',
smooth :true,
symbol: 'circle',
symbolSize: 10,
showAllSymbol : true,
color:color[1],
data:yearPlanData
},
{
name:'已接订单',
type:'line',
smooth :true,
symbol: 'circle',
symbolSize: 10,
showAllSymbol : true,
color:'#F90',
itemStyle:{
normal:{
  lineStyle: {
width:2
  }
}
},
data:yearOrderData
},
{
name:'不可见',
type:'bar',
stack: '1',
barWidth: 1,
itemStyle:{
normal:{
color:'rgba(0,0,0,0)'
},
emphasis:{
color:'rgba(0,0,0,0)'
}
},
data:visibityData
},
{
name:'变化',
type:'bar',
stack: '1',
barWidth: 1,
color:'#B7E1FF',
data:differenceData
}
]
}
orderStatus.setOption(orderStatus_option);