vue中使用v-charts

前段时间由于公司需要，产品临时安排任务，希望尽快出一个实时数据统计的图表，所以综合考虑就没有用echarts本身，而是使用了通过vue封装过的v-charts，希望能快速上手echarts,然后就有了这篇文章的实现过程。

相关文档

• vue官方文档
• v-charts官方文档
• echarts官方文档

界面效果图

接下来按照上图红框从左到右从上到下一一讲解：

框一、 环图占比

• 因为是用vue实现的，不希望所有内容都写在一个组件里，所以上图的五个红框分别代表五个子组件；
• 目录如下：

├── src                    源码目录  
│  ├── main.js             入口js文件
│  ├── app.json            全局配置
│  ├── components          组件目录
│  │  └── common           公共组件
          └── classfiyRing.vue   框5
          └── hHistogram.vue     框4
          └── hLine.vue          框2
          └── hMap.vue           框3
          └── hRing.vue          框1复制代码

• 环图组件内容：

<!-- 环状 -->
<template>
  <div class="h-ring">
    <div class="ring-relative">
      <ve-ring
        class="ring-box"
        :data="chartData"
        :settings="chartSettings"
        height="112px"
        width="112px"
        :tooltip="tooltip"
        :extend="chartExtend"
      ></ve-ring>
      <span class="desc">{
    {percentage}}</span>
    </div>
    <p class="title">{
    {text}}</p>
  </div>
</template>

<script>
export default {
  data () {
    this.chartSettings = {
      dimension: 'name',
      metrics: 'value',
      label: {
        normal: {
          show: false
        }
      },
      radius: [
        '25', '40'
      ],
      offsetY: 56
    }
    return {
      tooltip: {
        trigger: 'none'
      },
      chartExtend: {
        legend: {
          show: false
        },
        color: ['#44F0FF', '#19355A']
      }
    }
  },
  props: {
    text: {
      type: String,
      required: true
    },
    chartData: {
      type: Object,
      required: true
    },
    percentage: {
      type: String,
      required: true
    }
  }
}
</script>复制代码

• v-charts官方文档提到两点：

1. extend 属性，为了能够更方便的设置属性配置项等，可以通过extend属性实现对已配置好的内部属性进行单独的设置；

2. echarts options 属性，与echarts配置项对应的属性也被加到了组件上，用于直接覆盖options原有的对应属性；

3. echarts options 属性如下：

grid: [object, array],
colors: array,
visualMap: [object, array],
dataZoom: [object, array],
toolbox: [object, array],
title: object,
legend: [object, array],
xAxis: [object, array],
yAxis: [object, array],
radar: object,
tooltip: object,
axisPointer: object,
brush: [object, array],
geo: object,
timeline: [object, array],
graphic: [object, array],
series: [object, array],
backgroundColor: [object, string],
textStyle: object,
animation: object复制代码

• ve-ring组件相关配置项

1. settings，大家可以参考v-charts官方文档
2. data，大家可以参考v-charts官方文档
3. tooltip，大家可以参考echarts官方文档
4. extend，大家可以参考v-charts文档里的extend属性说明

• ve-ring组件内各属性值细节说明：

1. settings内label作