1、下载echars所需要的文件
官方地址
echarts.all.js echarts.blank.js echarts.common.js echarts.simple.js
2、观看echars官方文档和案例：
文档
案例
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:
标题组件，包含主标题和副标题。
