因為工作需要，使用v-chart也有一段時間了，期間針對配置圖表也遇到了不少問題，在這里總結一下。

如何配置圖表信息

echart的配置項可謂是相當?shù)暮Ａ?，能不看就不看。而v-chart對其進行了不少的簡化，所以我們想要自定義一個圖表時，最好按照以下步驟來檢查：

圖表私有屬性

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所有圖表組件中共有的屬性，直接在圖標組件上掛載:屬性名稱="屬性值"即可設置，下面是一些比較常用的

公共屬性上最重要的可以說就是extend屬性了，在vchart的公共屬性里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的配置項里找了，下面是一些目前比較常用的配置項

其中series的屬性就可以完成絕大多數(shù)配置了，下邊是一個配置示例 實現(xiàn)的效果為：

• 圖例位于圖表右方，且距右邊緣20px
• 圖例顏色#A0A0A0，字體12px
• 環(huán)圖中心相對于左上角距離112px, s92px
• 隱藏環(huán)圖上的文本標簽和引導線
• 環(huán)圖內半徑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]
    }
  }
}