vue中使用v-charts,以柱状图为例

1.v-charts真的不错的一个图标插件,它是在echarts基础上二次封装而来,不管从调用和使用来说都比较方便.唯一的美中不足就是官方文档是真的忒少了.。不是知道他们怎么想的，不多说咱们直接上干货。

2 我们在写项目的时候通常只会用到图表中的某一个，全部引用的话太消耗性能了，所以我们考虑按需引入的方式，可以参考v-chats官网

可以自定义调用的位置,反正我是放在这边的,下面是charts.js里面的内容:

import Vue from 'vue'
import VeLine from 'v-charts/lib/line.common' // 折线
import VeHistogram from 'v-charts/lib/histogram.common' // 柱状
import VeRing from 'v-charts/lib/ring.common' // 环形
import VePie from 'v-charts/lib/pie.common' // 饼形

Vue.component(VeLine.name, VeLine)
Vue.component(VeHistogram.name, VeHistogram)
Vue.component(VeRing.name, VeRing)
Vue.component(VePie.name, VePie)

接着我们就需要在我们的 main.js中如引入就好

import './plugins/charts'

3 虽然v-charts本身进行了封装,但是在实际应用过程中,许多恒定不变的参数,需要重复的去写,所以考虑到这份因素的存在,就对v-charts进行再再再一次的分装,所以谢了公用的组件

4 创建 components文件夹专门用来存放公用组件

定义好名称之后我们来详解index.js里面的内容,这边我不做过多的解释,目的是不用写很多的 import {} from 啥啥啥的

const modulesFiles = require.context('./', false, /\.vue$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const install = (vm) => {
  for (let com in modules) {
    vm.component(com, modules[com])
  }
}

export default { install }

最后在main.js里面进行组件调用

// 组件
import myComponents from './components'
Vue.use(myComponents)

5到现在为止能,我们把注册以及调用的方式全部写好了,那么接下来我们来详解一下

HistogramChart,LineChart,RingChart,PieChart 组件里面的内容是啥

6 以HistogramChart组件为例 柱状图:

柱状图的调用方式,我这边偷懒了,你们自己写的时候需要多注意结构问题

差不多不出意外的话长这丫子