echars開発について報告します

1、必要なファイルecharsにダウンロード
公式アドレスを
echarts.all.js echarts.blank.js echarts.common.js echarts.simple.js
、2時計echars公式文書やケース:
ドキュメント
ケース

3、図を混合:
多成分混合型の報告
前景非同期要求:
myChars.setOption(オプション);
myChars.setOption([{//それに対応するデータの各セットは、データの正確性を確保するためにしなければならない。]
シリーズ:[{
データ:array4、

				},{
					data:array5,
					
				},{
					data:array1,
				
				}, {
					data : array2,
				
				},{
					data:array3,
				}
				
				]
			}); 

ページの受信:
VAR = myChars echarts.init(のdocument.getElementById( 'imgstamentを')); //レポートローディング位置
オプションは、= {
XAXIS:{// X軸徐々に
名: ''、//名前の
種類: 'カテゴリ'、 //コンポーネントタイプの
データ:[「月」、「2月」、「月」、「4月」、「月」、「6月」、「7月」、「8月」、「9月'月'10' '11ヶ月、月12 ''] // X値
}、
YAXIS:[Y軸成分@
右、リア左{//
タイプ: '値'、// y軸渡すパラメータタイプ
名: ''、//名前
最小:0、//最小値
最大値:800、//最大
間隔:50、//ステップ
たAxisLabel:{// Y軸が示す値
フォーマッタ: '{値}' /スケールフォーマッタ/ラベル内容
}
}、{
'値':タイプ
名: ''、
分:-10、
最大:105、
間隔:. 5
たAxisLabel:{//設定軸目盛ラベル。
フォーマッタ: '{値}%'
}、
分割線:{//別の行が表示されます。デフォルト値軸表示
ショー:偽へ
}
}
]、
凡例:{//凡例アセンブリ。
オリエント:「垂直」、//凡例のレイアウトリスト向けました。
上部:'30%」、コンテナの上辺から距離アセンブリ//凡例。
左:'85%」、アセンブリ@凡例コンテナの左側からの距離を。
selectedMode:偽へ
}、
グリッド:[{//描画グリッドデカルト座標系、アップ配置することができ、ダウン単一グリッド二つのX軸内に、Y軸は左右しました。
幅:'70%「//グリッドアセンブリ幅。適応デフォルト。

	    }],
	    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は:
x軸にシステムグリッドをデカルト座標、単一グリッドアセンブリ一般に二つの上部および下部のx軸まで保持することができ、x軸の複数の位置とオフセット防止性を設定するためつ以上の必要性をxは軸重複。
YAXISは:
オフセットプロパティを設定することによって、同じ場所にY軸複数の2つの重複を防止するために必要であるよりも、グリッドにおける直交座標系のY軸は、アセンブリ一般に、単一のグリッドは、約2 y軸にy軸を保持することができます。
極性:
極座標系が散乱するために使用され、線グラフことができます。各システムは、シャフトの極座標角度および半径方向軸を有します。
グリッド:
グリッド図面をデカルト座標系は、アップ配置することができ、ダウン単一グリッド二つのX軸内に、Y軸は左右しました。これは、グリッド線グラフ、棒グラフ、散布(図バブル)の上であってもよいです。
伝説:
伝説のコンポーネント。
イラストショーシリーズマーク(記号)、色、名前の異なるコンポーネント。どのシリーズが表示されていない伝説をクリックすることで制御することができます。
シリーズ[I]:
リストシリーズ。グラフの種類の各シリーズは、型の独自介して決定する
:タイトル
タイトルコンポーネント、メインタイトルおよびサブタイトルなどを。

公開された26元の記事 ウォンの賞賛0 ビュー714

おすすめ

転載: blog.csdn.net/YHM_MM/article/details/103213869