vue.js + vue-c3でグラフを書く

#前提条件
.vueファイルをwebpackなどでビルド できる環境になっていること。

#インストール

npm install --save vue-c3

#コンポーネント(.vueファイル)

<template>
  <div>
    <vue-c3 :handler="handler"></vue-c3>
  </div>
</template>
 
<script>
import Vue from 'vue'
import VueC3 from 'vue-c3'
import 'c3/c3.min.css'
 
export default {
  name: 'コンポーネント名',
  components: {
    VueC3
  },
  data () {
    return {
      handler: new Vue()
    }
  },
  mounted () {
    let options = {
      //c3.chartのデータ例
      data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
        ]
      }
    }
    this.handler.$emit('init', options)
  }
}   
</script>

#ポイント
c3のc3.min.cssをimportすること。

#書ききれなかった事
c3のデータはdata > columsをpropsなり、vuexなりで渡し
オプションはコンポーネント内に設定すると使いまわしが良さそう。

追記

スタイル指定

例えばlineチャートの線を太くしたい場合

<style>
.c3-line {
  stroke-width: 3;
}
</style>

このように単一ファイルコンポーネントのスタイル部分にsvgのスタイルを当ててやれば良い
これはsvg製のグラフライブラリのメリットだと思った。