因为工作需要，使用v-chart也有一段时间了，期间针对配置图表也遇到了不少问题，在这里总结一下。

V-Chart概述

v-chart是vue框架的一个插件，基于echart封装得来的，因为echart的配置太过繁琐，而vchart做了很多简化工作，通过简单的配置就可以生成图表。

v-chart的官方文档看这里

echart的官方文档看这里

安装

npm : npm i v-charts echarts -S

yarn : yarn add v-charts echarts

引入

完整引入

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

Vue.use(VCharts)

按需引入

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

Vue.component(VeLine.name, VeLine)

如何配置

echart的配置项可谓是相当的海量，能不看就不看。所以我们想要自定义一个图表时，最好按照以下步骤来检查：

图表私有属性

v-chart每一个图表都有自己独有的设置项，想要配置这些项需要在组件上加入 :setting="chartSettings"，然后在vue组建的data里设置chartSettings的值，如下:

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

<script>
  export default {
    data () {
      this.chartSettings = {
        xAxisType: 'time'
      }
      return {
        chartData: {
          columns: ['日期', '访问用户'],
          rows: [
            { '日期': '2018-01-01', '访问用户': 1393 },
            { '日期': '2018-01-02', '访问用户': 3530 },
            { '日期': '2018-01-03', '访问用户': 2923 }
          ]
        }
      }
    }
  }
</script>

图表公有属性

v-chart所有图表组件中共有的属性，直接在图标组件上挂载:属性名称="属性值"即可设置，下面是一些比较常用的

名称	类型	默认值	介绍
data	Object	无	图表的显示数据
setting	Object	无	图表的私有属性
height	String	400px	高度
width	String	auto	宽度，默认根据高度自动适配
tooltip-visible	boolean	true	是否显示提示框
legend-visible	boolean	true	是否显示图例
extend	Object	无	设置echart的详细属性

公共属性上最重要的可以说就是extend属性了，如果你在前两者中都没有找到想要的设置项，那就可以通过这个属性来设置echart的配置，毕竟是基于echart的嘛，所以echart的所有配置在这里都可以适用，下边是配置示例：

<template>
  <ve-histogram :data="chartData" :extend="chartExtend"></ve-histogram>
</template>

<script>
  export default {
    data () {
      this.chartExtend = {
          series: {
            barWidth: 10
          },
          tooltip: {
            trigger: 'none'
          }
        }
      /* 等同于
        this.chartExtend = {
          series (v) {
            v.forEach(i => {
              i.barWidth = 10
            })
            return v
          },
          tooltip (v) {
            v.trigger = 'none'
            return v
          }
        }
        等同于
        this.chartExtend = {
          'series.0.barWidth': 10,
          'series.1.barWidth': 10,
          'tooltip.trigger': 'none'
        }
      */
      return {
        chartData: { ... }
      }
    }
  }
</script>

Echart配置项

接下来就是重头戏了，如果你在前两者里都没有找到，那就只能从echart的配置项里找了，下面是一些目前比较常用的配置项

名称	类型	介绍
legend	Object	用于控制图表的图例组件，包括位置、样式、类型、图标等
series	Object	每个图表的专属设置项，用于控制图表的详细样式位置等

其中series的属性就可以完成绝大多数配置了，下边是一个配置示例 实现的效果为：

• 图例位于图表右方，且距右边缘20px
• 图例颜色#A0A0A0，字体12px
• 环图中心相对于左上角距离112px, s92px
• 隐藏环图上的文本标签和引导线
• 环图内半径55px与外半径72px

//template
<ve-ring :settings="chartSetting" legend-position="right" :extend="chartExtend"></ve-ring>

...

//script
data () {
  return {
    chartExtend: {
      series: {
        center: [112, 92]
      },
      legend: {
        right: 20,
        textStyle: {
          color: '#A0A0A0',
          fontSize: 12
        }
      }
    }
    chartSetting: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      radius: [55, 72]
    }
  }
}