最近三个月各产品良率和出货率变化趋势echarts category配置项内容和展示
配置项如下
var siteThreeMonthYield = [
{"ThreeMonthYield":[{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()}]},
{"ThreeMonthYield":[{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()}]},
{"ThreeMonthYield":[{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()}]},
{"ThreeMonthYield":[{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()}]},
{"ThreeMonthYield":[{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()}]},
{"ThreeMonthYield":[{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()}]},
{"ThreeMonthYield":[{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()}]},
{"ThreeMonthYield":[{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()}]},
{"ThreeMonthYield":[{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()}]},
{"ThreeMonthYield":[{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()}]},
{"ThreeMonthYield":[{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()}]},
{"ThreeMonthYield":[{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()},{"yield": Math.random() , "outputrate": Math.random()}]}
];
var sitenames = ['产品1','产品2','产品3','产品4','产品5','产品6','产品7','产品8','产品9','产品10','产品11','产品12'];
var grids = [];
var xAxes = [];
var yAxes = [];
var series = [];
var titles = [];
var datas =[];
var aGradeRates=[];
var count = 0;
var zh_month = new Array(3);//最近三个月
var now = new Date();
var currentMonth = now.getMonth()+1;
var sitesnum = sitenames.length;
var monthFontSize = 12; //default month lablesize
var monthRorate = 0; //default month lable rorate
if(sitenames.length< 6) {monthFontSize = 12; monthRorate = 0;}
else if(sitenames.length> 6) { monthFontSize = 9;monthRorate = -90;}
for(var i=0; i<3; i++){
var month = currentMonth-2+i;
switch(month)
{
case 1: zh_month[i] = '一月';break;
case 2: zh_month[i] = '二月';break;
case 3: zh_month[i] = '三月';break;
case 4: zh_month[i] = '四月';break;
case 5: zh_month[i] = '五月';break;
case 6: zh_month[i] = '六月';break;
case 7: zh_month[i] = '七月';break;
case 8: zh_month[i] = '八月';break;
case 9: zh_month[i] = '九月';break;
case 10: zh_month[i] = '十月';break;
case 11: zh_month[i] = '十一月';break;
case 12: zh_month[i] = '十二月';break;
default: break;
}
}
for(var i = 0; i < sitesnum; i++) {
siteThreeMonthYield[i].ThreeMonthYield
var data = new Array(3);
var outputRate = new Array(3);
for(var j=0 ; j < 3; j++){
data[j]=siteThreeMonthYield[i].ThreeMonthYield[j].yield*100;
outputRate[j]=siteThreeMonthYield[i].ThreeMonthYield[j].outputrate*100;
}
if(i===0){
grids.push({
left:'4%',
show: true,
borderWidth: 0,
backgroundColor: '#fff',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 1,
height:'70%',
top:'20%',
width: (1/sitesnum*(100-4))+'%',
//右边距right的位置：左边100先减去第一个左移的4%，再减去宽度 (1/sitesnum*(100-4))+'%'
right: ((100-4)-(1/sitesnum*(100-4)))+'%'
});
}else{
grids.push({
left:((4)+(i)/sitesnum*(100-4))+'%',//除去第一个左边距的4%,剩余渐分都以96%进行分割
show: true,
borderWidth: 0,
backgroundColor: '#fff',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 1,
height:'70%',
top:'20%',
Width: (1/sitesnum*(100-4))+'%',
//右边距right的位置：左边100%先减去第一个左移的4%，再减去96%为起始的该grid的左边距(i/sitesnum*(100-4))，再减去宽度 (1/sitesnum*(100-4))+'%'
right:((100-4)-(i/sitesnum*(100-4))-(1/sitesnum*(100-4)))+'%'
});
}
titles.push({
text:'最近三个月各产品良率和出货率变化趋势'
,left:'0%'
,top:'6%'
});
xAxes.push({
gridIndex:i,
type : 'category',
data : zh_month,
axisTick: {
alignWithLabel: false
},
textStyle: {
fontSize: 20,
color: 'red'
},
axisLabel:{
show:true,
interval:0,
rotate: monthRorate,
margin: 4,
fontSize: monthFontSize
},
position:'bottom'
});
xAxes.push({ //给每个Grid 底部设置一个现地的名字
gridIndex:i,
type : 'category',
position:'bottom',
name: sitenames[i], //设置site名字
nameLocation: 'center', //现地名字居中对齐
nameTextStyle: {
fontWeight: 'bold' //现地名字粗体
},
nameGap: -5,
offset: 30,
data: [''], // 设置该坐标轴只有一个刻度
axisTick: {
length: 30,
inside: true
},
axisLabel: {
inside: false,
show: false
},
axisLine: {
show: false,
onZero: false
}
});
if(i===0){
yAxes.push({
name : '百分比 (%)',
gridIndex:i,
type : 'value',
interval:20,
max:100,
min:0,
axisTick:{
inside:false
},
axisLabel : {
show:true,
formatter: '{value} '
},
position: 'left'
});
}else{
yAxes.push({
gridIndex:i,
type : 'value',
interval:20,
max:100,
min:0,
axisTick:{//坐标轴刻度线
show:false
},
axisLine:{
show:false,
onZero: true
},
axisLabel:{
show:false
}
});
}
series.push({
xAxisIndex: i*2,
yAxisIndex: i,
name:'良率',
type:'line',
//barWidth: '60%',
data:data
// ,markLine: {
// data: [
// {type: 'average', name: '良率均值'}
// ]
// }
// ,itemStyle:itemStyle
});
series.push({
xAxisIndex: i*2,
yAxisIndex: i,
name:'出货率',
type:'line',
//barWidth: '60%',
data:outputRate
// ,markLine: {
// data: [
// {type: 'average', name: 'A级率均值'}
// ]
// }
// ,itemStyle:itemStyle
});
}
option = {
title:titles,
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data : ['良率','出货率'],
top:'10%'
},
toolbox: {
top: '10%',
show: true,
feature: {
dataView: {readOnly: false},
magicType: {type: ['line','bar']},
restore: {title:'Refresh'},
saveAsImage: {title:'Save'}
}
},
grid : grids,
xAxis : xAxes,
yAxis : yAxes,
series : series
};
截图如下
