1.ウィンドウが見つかっサイズが変更された場合、Echarts図は、リアルタイムで更新されていないページに挿入しました。次のように:
オリジナル:
ブラウザが現象を狭めた後:(明らかに適応を実現していなかった2)
3.成功したサンプルコード:
echarts.init myChart4 = VAR(のdocument.getElementById( 'View4'));
//指定されたデータとチャートCIの
VAR = {オプション4の
タイトル:{
表示:trueに、
テキスト: '┃動向'、
//言外の意味:」試験'サブタイトル@、
左:70、
// BORDERCOLOR:'赤」、境界色//
// borderWidth:1、ボーダーの幅//
}
//アセンブリキット
ツールボックス:{
表示:trueに、
機能:{
データビュー:{
表示:真へ
}、
復元:{
表示:真へ
}、
dataZoom:{//コアコード
表示:真へ
}、
saveAsImage:{
表示:真へ
}、
magicType:{
タイプ:[ '行'、 'バー']
}
}
}
ヒント:{
トリガー: '軸' //ポップアセンブリ
}、
凡例:{
データ:[ 'コメント量(QTY)']
}、
XAXIS:{
データ:[ "0時00分"、 "3時00分"、「6時00分"" 09:00 "" 12:00 "" 15:00 "" 18:00 "" 21:00「]
}、
YAXIS:{
}、
シリーズ:[{
名:コメント量(QTY ) '
タイプ:' '線、
データ:[15、20は、25、18 ,. 17、21,12,18である]
markPoint:{//最大値と最小表示設定
データ:[
{タイプ:'最大」 、名称: '最大'、SymbolSize:'35 '}、
{タイプ:'分'名称:'最小」、SymbolSize: '35'}
]
}、
ItemStyle:{
ノーマル:{
色: '#1 5CACEE'
}
}
マークライン:{//平均レベルを示し
:[データ
{タイプ: '平均'、名称: '平均'を}
]
}
}]
};
//単に指定された構成データ項目を使用して、チャートを表示します。
myChart4.setOption(オプション4);
//グローバル設定Echrts -ウィンドウのサイズに応じてグラフが変化
window.onresize =関数(){
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart4.resize() ;
}
4.コアコード:
//グローバル設定Echrts - チャートウィンドウのサイズが変更に応じて、
window.onresize =関数(){
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart4.resize();
}