VUE3 の echarts チャートは、レスポンシブ echarts になり、レスポンシブなレイアウトを実現します。

• シングルチャート

  
       
       
        
        
  //dom ノードを取得する
  var myChart = echarts. init ( document . getElementById ( 'main' ));
  // レンダードム
  マイチャート。setOption ({...})
  //レスポンシブ
  ウィンドウ 。onresize =関数( ) {
  マイチャート。サイズ変更();
  }
       
       
        
        
  

  注:このメソッドは 1 つのチャートに対してのみ使用できます。ページに複数のチャートがある場合、最後のチャートに対してのみ有効です。vue で使用する場合、複数のチャートを使用することがよくあります.異なるチャートを複数のコンポーネントに分割しますが、それでも 1 つのチャートに対してのみ機能します。したがって、最も効果的な方法は、グローバルにマウントすることです。

• 複数のグラフ (一般的なアプローチ)

        グローバルにマウント:

   
   
    
    
「vue」から{ createApp }をインポートします
「./App.vue」から アプリ をインポート
「./router/index」からルーターをインポートします
// element-ui を導入する
'element-plus'から ElementPlus をインポートします
import 'element-plus/dist/index.css'

const app = createApp (アプリ)
アプリ。使用( ElementPlus )
アプリ。使用（ルーター）
アプリ。マウント( '#app' )

//メソッド - グローバル マウント
アプリ。構成。グローバルプロパティ。$echartsResize =関数( ref:any ){
ウィンドウ 。addEventListener ( 'サイズ変更' ,関数( ) {
参照。リサイズ()
}))
}
// プロパティ -- グローバル マウント
アプリ。構成。グローバルプロパティ。$axios =アクシオス;
app.config.globalProperties . $Test = "私はグローバルにいます" ;
   
   
    
    

コンポーネントで次を使用します。

        コンポーネント インスタンスでは、 vue からgetCurrentInstanceを導入し、getCurrentInstance を介してプロキシを取得する必要があります。その後、使用するためにグローバルにマウントされたインスタンスを取得できます。

   
   
    
    
<スクリプト設定>
import { onMounted } from 'vue' ;
import * as echarts from 'echarts' ;

//getCurrentInstance を導入する
import { getCurrentInstance } from 'vue'
const { プロキシ } = getCurrentInstance ();

const echartInit = (データ) => {
// 準備された dom に基づいて、echarts インスタンスを初期化します
var myChart = echarts. init ( document . getElementById ( 'main' ));
// チャートを描く
マイチャート。setOption ({...});
// リアクティブ -- 使用
proxy.$echartsResize(myChart)
}

onMounted ( async () => {
キャスト初期化 ()
}))
</script>
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

• シングルチャート

  
       
       
      
      
  //dom ノードを取得する
  var myChart = echarts. init ( document . getElementById ( 'main' ));
  // レンダードム
  マイチャート。setOption ({...})
  //レスポンシブ
  ウィンドウ 。onresize =関数( ) {
  マイチャート。サイズ変更();
  }
       
       
      
      
  

  注:このメソッドは 1 つのチャートに対してのみ使用できます。ページに複数のチャートがある場合、最後のチャートに対してのみ有効です。vue で使用する場合、複数のチャートを使用することがよくあります.異なるチャートを複数のコンポーネントに分割しますが、それでも 1 つのチャートに対してのみ機能します。したがって、最も効果的な方法は、グローバルにマウントすることです。

• 複数のグラフ (一般的なアプローチ)

        グローバルにマウント:

   
   
  
  
「vue」から{ createApp }をインポートします
「./App.vue」から アプリ をインポート
「./router/index」からルーターをインポートします
// element-ui を導入する
'element-plus'から ElementPlus をインポートします
import 'element-plus/dist/index.css'

const app = createApp (アプリ)
アプリ。使用( ElementPlus )
アプリ。使用（ルーター）
アプリ。マウント( '#app' )

//メソッド - グローバル マウント
アプリ。構成。グローバルプロパティ。$echartsResize =関数( ref:any ){
ウィンドウ 。addEventListener ( 'サイズ変更' ,関数( ) {
参照。リサイズ()
}))
}
// プロパティ -- グローバル マウント
アプリ。構成。グローバルプロパティ。$axios =アクシオス;
app.config.globalProperties . $Test = "私はグローバルにいます" ;
   
   
  
  

コンポーネントで次を使用します。

        コンポーネント インスタンスでは、 vue からgetCurrentInstanceを導入し、getCurrentInstance を介してプロキシを取得する必要があります。その後、使用するためにグローバルにマウントされたインスタンスを取得できます。

   
   
  
  
<スクリプト設定>
import { onMounted } from 'vue' ;
import * as echarts from 'echarts' ;

//getCurrentInstance を導入する
import { getCurrentInstance } from 'vue'
const { プロキシ } = getCurrentInstance ();

const echartInit = (データ) => {
// 準備された dom に基づいて、echarts インスタンスを初期化します
var myChart = echarts. init ( document . getElementById ( 'main' ));
// チャートを描く
マイチャート。setOption ({...});
// リアクティブ -- 使用
proxy.$echartsResize(myChart)
}

onMounted ( async () => {
キャスト初期化 ()
}))
</script>