Vue-Vega Basic

Basic Usage of `vega-lite` component in template

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-vega"></script>
<div id='app'>
  <vega-lite
    :data="[
        {a: 'A', b: 78}, {a: 'B', b: 55}, {a: 'C', b: 43},
        {a: 'D', b: 91}, {a: 'E', b: 81}, {a: 'F', b: 53},
        {a: 'G', b: 19}, {a: 'H', b: 87}, {a: 'I', b: 52}
    ]"
    mark="bar"
    :encoding="{
      x: {field: 'a', type: 'ordinal'},
      y: {field: 'b', type: 'quantitative'}
    }">
  </vega-lite>
</div>

JavaScript

Vue.use(VueVega.default)

new Vue({
  el: '#app'
})