echarts-on-Vue

A flexible echarts wrapper for Vue.

1. install

npm install --save echarts-on-vue

2. use

<template>
  <div id="app">
    <echarts-on-vue
      v-bind:styleObject="styleObject"
      v-bind:className="className"
      v-bind:options="options"
      v-bind:notMerge="notMerge"
      v-bind:lazyUpdate="lazyUpdate"
      v-bind:silent="silent"
      v-bind:data="data"
      v-bind:echarts="echarts" />
  </div>
</template>

<script>
import EchartsOnVue from 'EchartsOnVue'
import echarts from 'echarts'
const options = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
}

export default {
  name: 'App',
  data: function () {
    return {
      echarts: echarts,
      styleObject: { width: '500px', height: '500px' },
      silent: true,
      lazyUpdate: true,
      notMerge: true,
      options: options,
      className: 'className',
      data: [[1, 2, 3, 4, 5, 6]]
    }
  },
  components: {
    'echarts-on-vue': EchartsOnVue
  },
  mounted: function () {
    setInterval(() => {
      this.data = [
        [
          parseInt(Math.random() * 100, 10),
          parseInt(Math.random() * 100, 10),
          parseInt(Math.random() * 100, 10),
          parseInt(Math.random() * 100, 10),
          parseInt(Math.random() * 100, 10),
          parseInt(Math.random() * 100, 10)
        ]
      ]
    }, 5000)
  }
}
</script>