1. 使用npm安装

npm i v-charts echarts -S

2. 组件引入

v-charts有两种引入方式，一是所有图表组件完整引入，二是按所需图表类型按需引入

• 完整引入
  在main.js中完成引入

import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'

Vue.use(VCharts)

new Vue({
  el: '#app',
  render: h => h(App)
})

• 按需引入
  v-charts的每种图表组件，都已经单独打包到lib文件夹下了

|- lib/
    |- line.common.js  -------------- 折线图
    |- bar.common.js  --------------- 条形图
    |- histogram.common.js  --------- 柱状图
    |- pie.common.js  --------------- 饼图
    |- ring.common.js  -------------- 环图
    |- funnel.common.js  ------------ 漏斗图
    |- waterfall.common.js  --------- 瀑布图
    |- radar.common.js  ------------- 雷达图
    |- map.common.js  --------------- 地图
    |- sankey.common.js  ------------ 桑基图
    |- heatmap.common.js  ----------- 热力图
    |- scatter.common.js  ----------- 散点图
    |- candle.common.js  ------------ k线图
    |- gauge.common.js  ------------- 仪表盘
    |- tree.common.js  -------------- 树图
    |- bmap.common.js  -------------- 百度地图
    |- amap.common.js  -------------- 高德地图

使用时，可以直接将单个图表引入到项目中

import Vue from 'vue'
import VeLine from 'v-charts/lib/line.common'
import App from './App.vue'

Vue.component(VeLine.name, VeLine)

new Vue({
  el: '#app',
  render: h => h(App)
})

3. 简单使用

<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>

然后可以看到一个简单的折现图已经绘制成功！