vue3 で echarts チャートを使用する - 準備

プロジェクト内のデータを表すためにチャートをよく使用しますが、現在最も一般的に使用されているアイコンは echarts です。次に、Vue で echarts アイコンを使用する方法を学び始めます。

1. vue プロジェクトを準備します (通常は vue-cli ではなく vite を通じて構築されます)

 1. vite公式Webサイトを見つけて開きます

2. 作成コマンドを実行します。

yarn create vite

3.yarn install を実行してプロジェクトの依存関係をインストールし、yarn dev を実行してプロジェクトを実行します

2. echarts の依存関係を追加する

  1. echarts公式サイトを検索

 2. 依存関係を追加する

yarn add echarts

3. vue で echart を使用する基本的なケースを書く

<template>
  <div id="main"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
onMounted(()=>{
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
        }
    ]
    };
    option && myChart.setOption(option);
});


</script>

<style scoped>
#main {
  width: 50vw;
  height: 50vh;
}
</style>

まだ問題がいくつかあります。DOM ノードの取得と通常のデータのリクエストは非同期です。これについては次の記事で説明します。