echart 로 라인차트 구현하기

chart-bar.vue

<template>
  <e-charts :options="lineOptions"/>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
let vm
export default {
  name: 'chart-bar',
  components: {ECharts},
  created () {
    vm = this
    setInterval(function () {
      vm.$store.dispatch('chart/addData', {
        chartName: vm.chartName,
        data: {x: Math.random(), y: Math.random()}
      })
    }, 1000)
  },
  methods: {},
  computed: {
    lineOptions () {
      return this.$store.getters['chart/lineOptions'](this.chartName)
    }
  },
  data: function () {
    return {
      chartName: 'chart1'
    }
  }
}
</script>

<style scoped>
</style>

chart.js

import {INCREMENT_CHART_VALUE} from './mutation-types'

export const state = () => ({
  chart1: {
    x: [],
    y: []
  }
})
export const actions = {
  async addData ({ commit, state }, param) {
    await commit('INCREMENT_CHART_VALUE', param)
  }
}
export const mutations = {
  [INCREMENT_CHART_VALUE] (state, param) {
    state[param.chartName].x.push(param.data.x)
    state[param.chartName].y.push(param.data.y)
  }
}
export const getters = {
  lineOptions: (state) => (chartName) => {
    return {
      xAxis: {
        data: state[chartName].x,
        type: 'category'
      },
      tooltip: {},
      yAxis: {
        type: 'value'
      },
      series: [{
        data: state[chartName].y,
        type: 'line',
        smooth: false
      }]
    }
  }
}