Vue プロジェクトに ECharts を導入する

npm インストール echarts --save

* を echarts として "echarts" からインポートします。

<テンプレート>
  <div
    クラス="echart"
    id="mychart"
    :style="{ float: 'left', 幅: '100%', 高さ: '400px' }"
  </div>
</テンプレート>

<スクリプト>
* を echarts として "echarts" からインポートします。

エクスポートデフォルト{
  データ（） {
    戻る {
      名前: 「張雪」、
      xData: ["2020-02", "2020-03", "2020-04", "2020-05"], // 水平座標データ yData: [30, 132, 80, 134] // 水平座標に対応する垂直座標データ};
  },
  マウント() {
    チャートを初期化します。
  },
  メソッド: {
    initEcharts() {
      const オプション = {
        タイトル：
          テキスト: 「ECharts 入門例」
        },
        ツールチップ: {},
        伝説： {
          データ: ["販売量"]
        },
        x軸:
          データ: ["シャツ", "セーター", "シフォンシャツ", "パンツ", "ハイヒール", "靴下"]
        },
        y軸: {},
        シリーズ： [
          {
            名前: 「売上高」、
            type: "bar", // タイプは棒グラフです data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));// アイコンの初期化 myChart.setOption(option);// ページのレンダリング// 画面サイズに合わせてチャートを調整する window.addEventListener("resize", () => {
        チャートのサイズを変更します。
      });
    }
  }
};
</スクリプト>

// echarts を使用するために必要なインターフェースを提供する echarts コア モジュールをインポートします。
'echarts/core' から * を echarts としてインポートします。
// 棒グラフをインポートします。すべてのグラフには接尾辞「Chart」が付きます
'echarts/charts' から { BarChart } をインポートします。
// プロンプト ボックス、タイトル、直交座標系、データ セット、組み込みデータ コンバーター コンポーネントを導入します。すべて接尾辞 Component が付きます。
輸入 {
  タイトルコンポーネント、
  ツールチップコンポーネント、
  グリッドコンポーネント、
  データセットコンポーネント、
  データセットコンポーネントオプション、
  変換コンポーネント
} 'echarts/components' から;
// ラベルの自動レイアウト、グローバル遷移アニメーション、その他の機能 import { LabelLayout, UniversalTransition } from 'echarts/features';
// Canvas レンダラーをインポートします。CanvasRenderer または SVGRenderer のインポートは必須の手順であることに注意してください。import { CanvasRenderer } from 'echarts/renderers';

// 必要なコンポーネントを登録しますecharts.use([
  タイトルコンポーネント、
  ツールチップコンポーネント、
  グリッドコンポーネント、
  データセットコンポーネント、
  TransformComponent、
  棒グラフ、
  ラベルレイアウト、
  ユニバーサルトランジション、
  キャンバスレンダラー
]);

// 以下の使用方法は前と同じで、チャートを初期化し、構成項目を設定します。 var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});