使用v-charts過程中，官方給出的文檔不夠詳細，很多參數最后還是要去e-charts文檔上找，或者網上自己找，總結一下在使用過程中遇到的配置問題，剩下的還需要在使用過程中慢慢發現

有問題請留言，一起解決哈~

柱圖、折線圖、環圖的常用配置

:data 綁定基本數據

<template>
    <ve-histogram :data="{columns:[], rows:[]}"></ve-histogram>
</template>

{
  // 第一個參數為維度(記住這個詞，就是橫軸，例如時間)，剩余為指標（就是給哪些東西做統計，可以直接為中文）
  columns: ['month', 'key1', 'key2', 'key3'],
  // rows為數組，每個指標各有一條柱，并標注出每個指標的值
  rows: [
    {month:'一月', key1: value1, key2: value2, key3: value3},
    {month:'二月', key1: value4, key2: value5, key3: value6}
  ],
  // rows為對象 -- 散點圖可以用
  rows: {
    name1: [
      {month:'二月', key1:'', key2:'', key3: ''}
    ],
    name2: [
      {month:'三月', key1:'', key2:'', key3: ''}
    ],
  }
}

:settings 綁定基本配置

numerify

<template>
    <ve-histogram :settings="{dimension:[]}""></ve-histogram>
</template>

{
  // 聲明維度 -- 默認就是columns的第一個
  dimension: ['month'],

  // 設置橫軸為連續的數值軸，如時間，數字等
  xAxisType: 'value(橫軸必須是數字)', 'time(橫軸是時間)'

  // 聲明指標 -- columns的第二個開始
  metrics: ['key1', 'key2', 'key3'],

  // 指標的別名 -- 后臺數據給的指標大多時候不為中文，但是給用戶看的肯定是中文的
  labelMap: {
    key1: 'value指標',
    key2: 'value指標',
    key3: 'value指標',
    key4: '舉個例子顯示百分比'
  },

  // 修改圖例別名 -- 就是頂部的那個幾個色塊，官網文檔沒用，綁定在legend里設置
  legendName:{
    'key1': '訪問用戶 total: 10000'
  },
  
  // 指標所在的軸 -- 設置左右雙Y軸用
  axisSite: { right: ['key4'] },

  // 柱圖 -- 堆疊key1、key2、key3在一條軸上顯示
  stack: { 'month': ['key1', 'key2', 'key3'] },

  // 柱圖 -- 設置其中一個指標為折線圖（需要引入折線圖組件）
  showLine: ['key3'],

  // 縱軸左右坐標軸標題
  yAxisName: ['月度課程發布情況', 'key4Name'],

  // 設置常用數據格式 -- 指標的單位
  // 可以使用 numerify? 的格式來配置顯示，具體的格式支持和插件擴展寫法可以參考 numerify? 文檔
  // 也支持使用回調函數的方式function (v) {return v + ' ￥'}
  // 折線圖 -- 用yAxisType
  yAxisType: ['KMB(對應yAxisName第一位)', 'percent(對應yAxisName第二位)'],
  // 餅圖環圖 -- 用dataType
  dataType: {
    'key1': 'KMB', //數字轉為RMB(基本的數據格式)
    'key2': 'percent', //百分比格式(基本的數據格式)
    'key3': 'normal' //千分位(基本的數據格式)
  },

  // 數據格式為 percent 保留的小數點
  digit: 2,

  // 設置數據的排序方式，例如根據指標key1升序（實際效果好像是反的）
  dataOrder: {
    { label: 'key1', order: 'asc' }
  },

  // 折線圖 -- 填充整個面積的色塊
  area: true

  // 色塊透明度
  opacity: 0.5,

  // 環圖 -- 限制最大數量
  limitShowNum: 3,

  // 環圖 -- 內外徑
  radius: [50, 70],

  // 環圖 -- 縱軸中心位置，px或者%或'center'等
  offsetY: '45%',

  // 環圖 -- 支出來的那個線后面的文字
  label: {
    show: false
  },
  // 柱圖 -- 顯示柱狀圖數據值，并把具體數字放在頂部
  label: { show: true, position: "top" }
  // 折線 -- 顯示具體數據數值
  label: { normal: { show: true } }

  // 環圖 -- 支出來的那個線
  labelLine: {
    show: false
  },

  // 環圖 -- 玫瑰圖
  roseType: 'radius'

  // 環圖餅圖 -- 是否放上去放大
  hoverAnimation: false
}

:legend 圖例（就是小方塊那個說明區）

<template>
    <ve-histogram :legend="{right: 0}"></ve-histogram>
</template>

{
  // 調整圖例區的位置，單位(數字，百分比，center/left位置)
  right: 0,

  // 是否可以點擊，隱藏點擊的內容
  selectedMode:false,

  // 圖例的寬度，不夠會換行
  width: 100,
  
  //樣式
  textStyle: {
    color: '#BED1EF'
  }

}

grid 整個繪制區域

<template>
    <ve-histogram :grid="{bottom: 0}"></ve-histogram>
</template>

{
  // 調整位置
  bottom: 0,

  //調整大小啥的
  width: 200
}

title 環形圖中間的文字說明

<template>
  <ve-histogram :title="{title: '你的標題'}"></ve-histogram>
</template>

import 'echarts/lib/component/title'; //必須引入這個組件，默認不帶title
{ 
  // 文字啥的，用\n可以換行
  text: '',

  //調整位置
  x: 'center',
  top: '35%',

  //調整樣式
  textStyle: {
    fontSize: 20,
    fontWeight: 'normal'
  }
}

:extend 最終所有的配置都可以用這個值重新設置

<template>
    <ve-histogram :extend="{series:{}}"></ve-histogram>
</template>

{
  // x軸的文字傾斜
  'xAxis.0.axisLabel.rotate': 45,

  series: {
      //環圖 -- 圓心位置
      center: ['50%', '50%'],
      ///環圖顏色順序，顏色不是按你的列表一一對應的，需要手動設置順序
      itemStyle: {
        normal: {
          color: (params)=> {
            return this.colorList[params.dataIndex]
          }
        }
      },
      barWidth : 20,//柱圖 -- 條寬度
  },

yAxis: {
    // 縱坐標網格線設置，同理橫坐標
    splitLine:{
      lineStyle: {
        color: '#999'
      }
    },
    // 縱坐標字體顏色，同理橫坐標
    axisLine:{
      lineStyle:{
        color: '#BED1EF'
      }
    }
  } 
}