3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vueプロジェクトでechartsを使う方法

Posted at

Vueプロジェクトでechartsを使う方法

データの重要性はみんな知っていると思う。小さいプロジェクトでもいくつかのグラフを使って展示することがあります。最近はプロジェクトを開発する時でもグラフを使う必要があります、echartsというグラフライブラリを選択しました。なぜechartsを選択しましたか?使いやすい、グラフ種類多い、デザインがきれいためです。

1:直接echartsをインポートする

echartsプロジェクト依存をインストール

npm install echarts --save

或いは

npm install echarts -S

インストールが完了したら、mail.jsにechartsを導入する

import echarts from "echarts";

Vue.prototype.$echarts = echarts; 

グラフを作成

src\App.vueに下記内容を切替する。

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: "app",
  methods: {
    drawChart() {
      // domを基づいて, echartsインスタンスを初期化
      let myChart = this.$echarts.init(document.getElementById("main"));
      // グラフの配置とデータ
      let option = {
        title: {
          text: "ECharts Sample"
        },
        tooltip: {},
        legend: {
          data: ["数量"]
        },
        xAxis: {
          data: ["", "CD", "携帯電話", "パソコン", "プリンタ", "テレビ"]
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      // 指定された配置とデータよりグラフを表示する
      myChart.setOption(option);
    }
  },
  mounted() {
    this.drawChart();
  }
};
</script>

vue01.png

2:Vue-EChartsコンポネントを利用する

コンポネントをインストール

npm install vue-echarts -S

コンポネントを使う

<template>
  <div id="app">
    <v-chart class="my-chart" :options="bar"/>
  </div>
</template>
<script>
import ECharts from "vue-echarts ";
import "echarts/lib/chart/bar";
export default {
  name: "App",
  components: {
    "v-chart": ECharts
  },
  data: function() {
    return {
      bar: {
        title: {
          text: "ECharts サンプル"
        },
        tooltip: {},
        legend: {
          data: ["数量"]
        },
        xAxis: {
          data: ["", "CD", "携帯電話", "パソコン", "プリンタ", "テレビ"]
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    };
  }
};
</script>
<style>
.my-chart {
  width: 800px;
  height: 500px;
}
</style> 

vue02.png

3
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?