hugo/content/blog/2020-04-12-vue.md

+++ date = "2020-04-12JST" tags = ["vue"] title = "vueでapexchartsを使いチャートを作ってみた" slug = "vue" +++

chart.jsが有名みたいで、ちょっと触ってチャートを表示してみたのですが、非常に操作しづらかったので、apexchartsを使ってみました。個人的には、こちらのほうがオススメかも。

# https://github.com/apexcharts/vue-apexcharts
$ yarn add apexcharts vue-apexcharts

今回作ったのは、vue+apexcharts+axiosという構成で、毎日更新されてるぽいcovid-19のjsonがあるのですが、値をとってきてチャートで表示することにしてみました。

https://syui.cf/covid-vue-chart

$ git clone https://github.com/syui/covid-vue-chart
$ cd !$:t
$ yarn install
$ yarn serve

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueApexCharts from 'vue-apexcharts'

Vue.component('apexchart', VueApexCharts)
Vue.config.productionTip = false
Vue.use(VueAxios, axios, VueApexCharts)

new Vue({
  render: h => h(App)
}).$mount('#app')

内容は非常にシンプルで以下のような書き方になりました。axiosでjsonを取ってきて配列に入れてあげる感じ。あと、type:lineがやりたくてoptionかなあと思ったのですが、vue-apexchartは、htmlでtype="line"みたいです。

チャートを作成するときは、jsonのkeyやら確認する必要がありますので、this.items = res.dataして表示してます。これはなくてもいい。

<template>
	<div id="covid19">
		<h1>covid19</h1>
		<div>
			<apexchart width="95%" type="line" :options="chartOptions" :series="series"></apexchart>
		</div>
		<div v-for="(item, idx) in items" v-bind:key="idx">
			<li  v-if="idx === 'Japan'">
				{{ idx }} {{ item }}
			</li>
		</div>
	</div>
</template>

<script>
import axios from 'axios';
export default {
	created(){
		axios.get('https://raw.githubusercontent.com/pomber/covid19/master/docs/timeseries.json').then((res) => {
			var confirmed = []
			var confirmedt = []
			var date = []
			res.data.Japan.forEach(function (key) {
						confirmed.push(key.confirmed)
			})
			res.data.Thailand.forEach(function (key) {
						confirmedt.push(key.confirmed)
			})
			res.data.Japan.forEach(function (key) {
						date.push(key.date)
			})
			this.series = [{ data: confirmed },{ data: confirmedt }]
			this.chartOptions = {
				xaxis: { 
					categories:	date
			}}
			this.items = res.data
		}).catch((error) => {
			console.error(error)
		})
	},
	data () {
		return {
			chartOptions: {
				chart: {
					id: 'vuechart-example'
				},
				xaxis: {
					categories: [] 
				}
			},
			series: [ {name: "japan", data: [] }, {name: "Thailand", data: [] } ]
		}
	}
}
</script>

注意点としては、gh-pagesは、サブディレクトリになるので、vue.config.jsでpublicPathを設定してやることです。index.htmlのlink pathが/なので。

昨日、マンガのやつでちょっとだけvueを触ったこともあり、vue、楽しかったので、今日もついつい触ってしまいました。