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 つの現在の制限方法についての簡単な説明
目次1. ノードをインストールする2. Commander.jsをインストールする3. JavaSc...
目次序文1. 需要と効果必要効果2. コードの実装index.vue(html)日付方法テスト結果3...
最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...
1. asキーワードはアサーションを示すTypescript では、アサーションを表現する方法が 2...
まず依存関係をダウンロードします: cnpm i -S vue-uuid ali-oss画像フィール...
まずは簡単なデータを見てみましょう。 Googleが発表したレポートによると、 ①中国の都市の97%...
1. レンダリングJD効果シミュレーション効果 2. 原則高さと幅が0のボックスを用意しますこのボ...
上図のように、パディング値は時計回り(右上、右下)の複合属性であり、パディングの内側の余白がボックス...
AI 画像の切り取りは PS と連携する必要があります。まず、スライスするレイヤーを選択し、それを...
<br />緑は黄色と青(寒色と暖色)の中間の色で、より穏やかな色です。そのため、緑は最...
私は熟練した DBA になるつもりはありませんが、MySQL を最適化するときは、いくつかの構成を調...
Centos マシンで docker のインストールが完了したら、docker info コマンドを...
目次序文事例: JD.com の虫眼鏡効果の模倣オフセットシリーズクライアントシリーズスクロールシリ...
RDF と OWL は、2 つの重要なセマンティック ウェブ テクノロジーです。 RDF と OWL...
CSS3 を使用して、クールなレーダースキャン画像を実現します。 コード上で直接: // インデック...