v-charts基于 Vue2.0 和 ECharts 封裝的圖表組件

在使用 echarts 生成圖表時，經(jīng)常需要做繁瑣的數(shù)據(jù)類型轉(zhuǎn)化、修改復(fù)雜的配置項，v-charts 的出現(xiàn)正是為了解決這個痛點?；?Vue2.0 和 echarts 封裝的 v-charts 圖表組件，只需要統(tǒng)一提供一種對前后端都友好的數(shù)據(jù)格式，設(shè)置簡單的配置項，便可輕松生成常見的圖表。

安裝

npm i v-charts echarts -S

快速上手

<template>
  <div>
    <ve-line :data="chartData"></ve-line>
  </div>
</template>

<script>
import VeLine from 'v-charts/lib/line'
export default {
  created () {
    this.chartData = {
      columns: ['日期', '銷售量'],
      rows: [
        { '日期': '1月1日', '銷售量': 123 },
        { '日期': '1月2日', '銷售量': 1223 },
        { '日期': '1月3日', '銷售量': 2123 },
        { '日期': '1月4日', '銷售量': 4123 },
        { '日期': '1月5日', '銷售量': 3123 },
        { '日期': '1月6日', '銷售量': 7123 }
      ]
    }
  },

  components: { VeLine }
}
</script>

結(jié)果：