v-charts使用總結(隨時補充)

柱狀圖、折線圖、環圖的常用配置(配置連接地址https://v-charts.js.org/#/line)

:data 綁定基本數據

{
  // 第一個參數為維度(就是橫軸，例如時間)，剩余為指標（就是legend）
  columns: ['日期', '訪問用戶', '下單用戶', '下單率'],
  // rows為數組，每個指標各有一條柱，並標注出每個指標的值
  rows: [
            { '日期': '2018-01-01', '訪問用戶': 1393, '下單用戶': 1093, '下單率': 0.32 },
            { '日期': '2018-01-02', '訪問用戶': 3530, '下單用戶': 3230, '下單率': 0.26 },
            { '日期': '2018-01-03', '訪問用戶': 2923, '下單用戶': 2623, '下單率': 0.76 },
            { '日期': '2018-01-05', '訪問用戶': 1723, '下單用戶': 1423, '下單率': 0.49 },
            { '日期': '2018-01-10', '訪問用戶': 3792, '下單用戶': 3492, '下單率': 0.323 },
            { '日期': '2018-01-20', '訪問用戶': 4593, '下單用戶': 4293, '下單率': 0.78 }
],
  // rows為對象 -- 散點圖可以用
  rows: {
    name1: [
      {month:'二月', key1:'', key2:'', key3: ''}
    ],
    name2: [
      {month:'三月', key1:'', key2:'', key3: ''}
    ],
  }
}

:settings 綁定基本配置

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

  // 設置橫軸為連續的數值軸，如時間，數字等
  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圖例

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

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

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

}

　　grid繪制整個區域

{
  // 調整位置
  bottom: 0,

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

　　title： 環形圖中間的文字說明

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

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

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

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

{

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

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

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