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组件为例 柱状图:

<template>
  <ve-histogram
    :data="data"
    :colors="colors"
    :settings="settingsAs"
    :grid="gridAs"
    :title="titleAs"
    :extend="extendAs"
    :mark-line="markLineAs"
    :height="height"
    v-bind="$attrs"
  >
    <slot />
  </ve-histogram>
</template>
<script>
import 'echarts/lib/component/title'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/markLine'
import 'v-charts/lib/style.css'

export default {
  name: 'HistogramChart',
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          columns: [],
          rows: []
        }
      }
    },
    colors: {
      type: Array,
      default: () => ['#01A1AC', '#739AFF', '#61a0a8', '#d48265', '#91c7ae']
    },
    title: {
      type: Object,
      default: () => ({})
    },
    extend: {
      type: Object,
      default: () => ({})
    },
    settings: {
      type: Object,
      default: () => ({})
    },
    grid: {
      type: Object,
      default: () => ({})
    },
    markLine: {
      type: Object,
      default: () => ({})
    },
    height: {
      type: String,
      default: '350px'
    }
  },
  data() {
    return {
      options: Object.freeze({
        grid: {
          show: true,
          top: 80,
          bottom: 20,
          left: '3%',
          right: '3%',
          containLabel: true,
          backgroundColor: 'transparent',
          borderColor: 'transparent'
        },
        // dataZoom: [{
        //   show: true,
        //   type: 'slider',
        //   realtime: true,
        //   start: 0,
        //   end: 0
        // }],
        markLine: {
          symbol: 'none',
          precision: 2, // 标线数值的精度
          label: {
            show: true,
            position: 'start',
            // fontWeight: 'bold',
            fontSize: 14,
            formatter: ({ value }) => (value * 100).toFixed(2) + '%'
          },
          lineStyle: {
            color: '#1e90ff'
          },
          data: [
            // {
            //   type: 'average',
            //   name: '平均值'
            // }
          ]
        },
        title: {
          show: false,
          text: '',
          subtext: '',
          x: 'left',
          top: 20,
          textStyle: {
            color: '#666',
            fontSize: 16
          }
        },
        extend: {
          legend: {
            show: false,
            x: 'center',
            y: 'bottom',
            orient: 'horizontal'
          },
          xAxis: {
            name: '', // 坐标轴名称。
            nameLocation: 'end', // 坐标轴名称显示位置。
            axisLabel: {// 坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: 0
            },
            axisLine: { // 设置轴线的属性
              show: false,
              lineStyle: {
                color: '#000',
                width: 1
              }
            }
          },
          yAxis: {
            nameLocation: 'end', // 坐标轴名称显示位置。
            axisLine: { // 设置轴线的属性
              show: false,
              lineStyle: {
                color: '#000',
                width: 1
              }
            }
          },
          // series: {
          //   barGap: '40%',
          //   barCategoryGap: '40%',
          //   barMaxWidth: 20
          // },
          animationEasing: 'elasticOut',
          animationDelayUpdate: idx => idx * 5,
          series(v) {
            v && v.forEach(i => {
              i.barGap = '40%'
              i.barCategoryGap = '40%'
              i.barMaxWidth = 20
              i.animationDelay = idx => idx * 10 + 100
            })
            return v
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            }
          }
        },
        settings: {
          yAxisType: ['normal'],
          yAxisName: [],
          label: { // 设置图形上的文本标签样式
            show: true,
            position: 'top',
            color: '#666',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontSize: 14
          },
          labelMap: {}, // 设置指标的别名，同时作用于提示框和图例
          legendName: {} // 设置图表上方图例的别名
        }
      })
    }
  },
  computed: {
    extendAs() {
      return Object.assign({}, this.options.extend, this.extend)
    },
    titleAs() {
      return Object.assign({}, this.options.title, this.title)
    },
    // dataRoomAs() {
    //   return Object.assign({}, this.options.dataZoom, this.dataZoom)
    // },
    markLineAs() {
      return Object.assign({}, this.options.markLine, this.markLine)
    },
    settingsAs() {
      return Object.assign({}, this.options.settings, this.settings)
    },
    gridAs() {
      return Object.assign({}, this.options.grid, this.grid)
    }
  }
}
</script>

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

<template>
     <histogram-chart
            height="580px"
            :data="histogramChartData"
            :extend="{legend: {show: true, x: 'top', y: 20, itemGap: 20, orient: 'horizontal', align:'left' }}"
            :settings="{labelMap}"
          />
</template>

<script>
export default {
  data() {
    return {
      labelMap: {
        date: '日期',
        userCount: '访问用户',
        userOrder: '下单用户',
        userRate: '下单率'
      },
      histogramChartData: [{
          columns: ['date', 'userCount', 'userOrder', 'userRate'],
          rows: [
            { 'date': '1/1', 'userCount': 1393, 'userOrder': 1093, 'userRate': 0.32 },
            { 'date': '1/2', 'userCount': 3530, 'userOrder': 3230, 'userRate': 0.26 },
            { 'date': '1/3', 'userCount': 2923, 'userOrder': 2623, 'userRate': 0.76 },
            { 'date': '1/4', 'userCount': 1723, 'userOrder': 1423, 'userRate': 0.49 },
            { 'date': '1/5', 'userCount': 3792, 'userOrder': 3492, 'userRate': 0.323 },
            { 'date': '1/6', 'userCount': 4593, 'userOrder': 4293, 'userRate': 0.78 }
      }]
    }
  }
 }
</script>

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