Echarts適応DIV

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();

}

おすすめ

転載: www.cnblogs.com/cjj123456/p/11274049.html