ホームページ > ウェブフロントエンド > jsチュートリアル > vue で echarts3.0adaptive を使用するにはどのような方法がありますか?

vue で echarts3.0adaptive を使用するにはどのような方法がありますか?

亚连
リリース: 2018-06-04 13:56:27
オリジナル
2289 人が閲覧しました

この記事では主に Vue での echarts3.0 の適応について紹介しますので、参考にしてください。

私はフロントエンド時代に vue プロジェクトに取り組んでいました。Echart は次のようにオンデマンドで導入されました:

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入折线图
import 'echarts/lib/chart/line'
// 引入提示框和图例组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legendScroll'
ログイン後にコピー

その後、ブラウザ ウィンドウを拡大すると折れ線グラフが適応しないことがわかりました。それを解決して、必要な人のために記録しておきます。

最初のタイプ: ブラウザ適応

パス:

myChart.setOption の後に

window.onresize = myChart.resize;
ログイン後にコピー

を追加します。複数のグラフィックがある場合は、それらをカプセル化できます。メソッド:

mounted(){ 
this.changEcharts(); 
}, 
methods:{ 
changEcharts() { 
window.addEventListener('resize', ()=> { 
this.drawLineDom.resize(); 
this.todayFlowDom.resize(); 
this.hitRateDom.resize();});};},} 
this.drawLineDom = this.$echarts.init(document.getElementById('chart-bandwidth'));
ログイン後にコピー

2番目のケース、pサイズの変化に応じて適応

vueはpサイズの変化をリアルタイムで監視できないため、ボタンを定義し、ボタンの値が変化したときに、サイズ変更が実行されます;

import { mapState }from'vuex'; 
computed: mapState({isCollapse:'isCollapse',//这里我是语用的vuex保存的变量,可以不用vuex,我是因为组件之间的通讯}), 
watch: { 
isCollapse() { // 注意一定不要用箭头函数,会获取不到this 
setTimeout(() => { 
this.drawLineDom.resize(); 
this.todayFlowDom.resize(); 
this.hitRateDom.resize(); 
}, 500);},},
ログイン後にコピー

実際、私はこれをナビゲーションに使用します。スケーリングすると、p のサイズが変更されるため、この方法で reszie を実行すると完全に適応できます。これからのみんな。

関連記事:

vueのスロットの子コンポーネントに親コンポーネントから渡されたテンプレートを表示する方法(詳細なチュートリアル)


vueを使用してズーム、縮小、回転を実現しながら画像をトリミングする方法関数 (詳細 チュートリアル)


React コンポーネントのパフォーマンス最適化に関する詳細な説明


以上がvue で echarts3.0adaptive を使用するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート