echarts报表开发

1、下载echarts所需要的文件
官方
echarts.all.js echarts.blank.js echarts.common.js echarts.simple.js
2、观看echarts官方文档和案例：
案例

3、混合图：

前台异步请求：

myChars.setOption(option);
				 myChars.setOption({//【每一组数据必须要对应起来，才能保证数据的正确性.】
					series : [{
						data:array4,
						
					},{
						data:array5,
						
					},{
						data:array1,
					
					}, {
						data : array2,
					
					},{
						data:array3,
					}
					
					]
				}); 
				

页面接收：

	var myChars=echarts.init(document.getElementById('imgstament'));//报表加载位置
	option = {
		    xAxis: {  //x轴逐渐
		    	name:'',  //名称
		        type: 'category',  //组件类型
		        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] //X值
		    },
		    yAxis: [  //y轴组件
		    	{//先右后左
		            type: 'value', //y轴传参类型
		            name: '',//名称
		            min: 0,//最小值
		            max: 800,//最大值
		            interval: 50,//步长
		            axisLabel: {//y轴显示值
		                formatter: '{value}'//刻度标签的内容格式器
		            }
		        },{
		            type: 'value',
		            name: '',
		            min: -10,
		            max:105,
		            interval:5,
		            axisLabel: {//坐标轴刻度标签的相关设置。
		                formatter: '{value} %'
		            },
		            splitLine:{//是否显示分隔线。默认数值轴显示
		            	show:false
		            }
		        }
		    ],
		    legend:{//图例组件。
		    	orient:'vertical',//图例列表的布局朝向。
		    	top:'30%',//图例组件离容器上侧的距离。
		    	left:'85%',//图例组件离容器左侧的距离。
		    	selectedMode:false
		    },
		    grid:[{//直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
		    	width:'70%'//grid 组件的宽度。默认自适应。
		    	
		    }],
		    series: [{//系列列表。每个系列通过 type 决定自己的图表类型
		    	name:'单机FTBF',
		        data: [],
		        type: 'bar',//图形组件类型
		        yAxisIndex:0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
		        itemStyle:{  //折线拐点标志的样式
	                normal: {  
	                    label: {  //图形上的文本标签，可用于说明图形的一些数据信息
	                        show: true,  //是否显示直角坐标系网格。
	                        position: 'top',  //显示位置
	                        formatter: '{c}' //文本标签文字的格式化器。
	                    }  
	                }  
	            }
		    },{
		    	name:'单机MTTR',
		        data: [],
		        type: 'bar',
		        yAxisIndex:0,
		        itemStyle:{  
	                normal: {  
	                    label: {  
	                        show: true,  
	                        position: 'top',  
	                        formatter: '{c}' 
	                    }  
	                }  
	            }
		    },{
		    	name:'关键设备OEE',
		        data: [],
		        type: 'line',
		        yAxisIndex:1,
		        itemStyle:{  
	                normal: {  
	                    label: {  
	                        show: true,  
	                        position: 'top',  
	                        formatter: '{c}%' 
	                    }  
	                }  
	            }
		    },{
		    	name:'总体设备故障停机率',
		        data: [],
		        type: 'line',
		        itemStyle:{  
	                normal: {  
	                    label: {  
	                        show: true,  
	                        position: 'top',  
	                        formatter: '{c}%' 
	                    }  
	                }  
	            }
		    },
		    {
		    	name:'单机设备故障停机率',
		        data: [],
		        type: 'line',
		        itemStyle:{  
	                normal: {  
	                    label: {  
	                        show: true,  
	                        position: 'top',  
	                        formatter: '{c}%' 
	                    }  
	                }  
	            }
		    }]
		};
	
});

xAxis：
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
yAxis：
直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
polar：
极坐标系，可以用于散点图和折线图。每个极坐标系拥有一个角度轴和一个半径轴。
grid：
直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
legend：
图例组件。
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
series[i]：
系列列表。每个系列通过 type 决定自己的图表类型
title:
标题组件，包含主标题和副标题。