1. インストールnpm インストール echarts --save 2. vue2でEchartsを使用するmain.jsファイル内// echarts をインポート 'echarts' から echarts をインポートします Vue.prototype.$echarts = echarts コンテナが与えられた場合<div id="myChart" :style="{幅: '300px', 高さ: '300px'}"></div>
// 基本テンプレートを導入する let echarts = require('echarts/lib/echarts') //棒グラフコンポーネントを導入する require('echarts/lib/chart/bar') //ツールチップとタイトルコンポーネントを導入する require('echarts/lib/component/tooltip') 'echarts/lib/component/title' が必要です エクスポートデフォルト{ 名前: 'こんにちは', データ() { 戻る { メッセージ: 'Vue.js アプリへようこそ' } }, マウント() { この.drawLine(); }, メソッド: { 描画線() { // 準備された DOM に基づいて、echarts インスタンスを初期化します。let myChart = echarts.init(document.getElementById('myChart')) // チャートのタイトルを描画: { テキスト: 「折れ線グラフの積み重ね」 }, ツールチップ: { トリガー: '軸' }, 伝説: { データ: ['メールマーケティング'、'アフィリエイト広告'、'ビデオ広告'、'ダイレクトアクセス'、'検索エンジン'] }, グリッド: { 左: '3%'、 右: '4%'、 下: '3%'、 ラベルを含む: true }, ツールボックス: 特徴: 画像として保存: {} } }, x軸: タイプ: 'カテゴリ', 境界ギャップ: false、 データ: ['月曜日'、'火曜日'、'水曜日'、'木曜日'、'金曜日'、'土曜日'、'日曜日'] }, y軸: { タイプ: '値' }, シリーズ: [ { 名前:「電子メールマーケティング」 タイプ: 'line'、 スタック: '合計金額'、 データ: [120, 132, 101, 134, 90, 230, 210] }, { 名称:「アライアンス広告」 タイプ: 'line'、 スタック: '合計金額'、 データ: [220, 182, 191, 234, 290, 330, 310] }, { 名前:「ビデオ広告」 タイプ: 'line'、 スタック: '合計金額'、 データ: [150, 232, 201, 154, 190, 330, 410] }, { 名前: 「直接アクセス」 タイプ: 'line'、 スタック: '合計金額'、 データ: [320, 332, 301, 334, 390, 330, 320] }, { 名前:「検索エンジン」 タイプ: 'line'、 スタック: '合計金額'、 データ: [820, 932, 901, 934, 1290, 1330, 1320] } ] } } } 3. vue3でEchartsを使用する
ルートコンポーネント(通常はApp.vue)にechartを導入します。'echarts' から * を echarts としてインポートします 'vue' から { provide } をインポートします エクスポートデフォルト{ 名前: 'アプリ'、 設定(){ provide('echarts',echarts) //提供する }, コンポーネント: } } ここで注意すべき点は、 輸出 { EChartsFullOptionをEChartsOptionとして、 接続する、 切断、 処分する、 getInstanceByDom、 IDによるインスタンス取得、 取得マップ、 初期化、 登録ロケール、 レジスタマップ、 登録テーマ }; 使用する必要があるページでdivを定義します<div id="ホームページトラフィックチャート" スタイル="幅: 600px; 高さ: 280px"> 次に、Echartsを使用する必要があるページに挿入します。エクスポートデフォルト{ 名前: 'data_page', 設定 () { const トラフィックデータ = ref({}) const echarts = inject('echarts') マウント時(() => { const myChart = echarts.init(document.getElementById('home-page-traffic_chart')) // チャートを描画する myChart.setOption({ タイトル: テキスト: 「今日の通話統計」 }, ツールチップ: { トリガー: '軸'、 軸ポインタ: タイプ: '影' } }, グリッド: { 左: '3%'、 右: '4%'、 下: '3%'、 ラベルを含む: true }, x軸: [ { タイプ: 'カテゴリ', データ: ['月', '火', '水', '木', '金', '土', '日'], 軸目盛り: { ラベルに合わせる: true } } ]、 y軸: [ { タイプ: '値' } ]、 シリーズ: [ { 名前: 「直接アクセス」 タイプ: 'バー'、 バー幅: '60%', データ: [10, 52, 200, 334, 390, 330, 220] } ] }) window.onresize = 関数 () { myChart.サイズ変更() } }) 戻る { } } } 効果画像: 以下もご興味があるかもしれません:
|
>>: Nginx における 2 つの現在の制限方法についての簡単な説明
今日は、MySQL データベースと SQL 標準 (および他のデータベース) の UPDATE ステ...
目次1. 基本2. 問題の説明3. 解決策付録: js を使用して Excel の日付形式を変換する...
序文: MySQL 8.0 では高速な列追加がサポートされ、数秒で大きなテーブルにフィールドを追加で...
記事は主にUbuntu 20.04の簡単なインストールプロセスを記録し、インストール後に国内ソースを...
序文DBA として、仕事中に MySQL マスターとスレーブの同期遅延の問題に遭遇することがよくあり...
1. グローバルオブジェクトすべてのモジュールは呼び出すことができます1) global: ブラウザ...
1. Dockerのインストールと設定 #CentOS をインストールし、Docker パッケージを...
主キーを作成するには 2 つの方法があります。 テーブルテーブル名を作成( フィールド名タイプ、 フ...
1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分...
目次背景説明GETリクエストの作成事前リクエストスクリプトで署名を作成するスクリプトは環境変数に書き...
MySQL はオープンソースの小規模リレーショナル データベース管理システムです。現在、MySQL...
初回の読み込みを高速化できるルートの遅延読み込みをどうして忘れられるでしょうか?ルーティングの遅延読...
この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...
目次0x01. パゴダパネルをインストールする0x02. サーバーポートを開く0x03. ブラウザを...
目次1. 開発モードとリリースモードに異なるパッケージエントリポイントを指定する2. 外部CDNリソ...