viser图表的使用

最近项目里要用到图表，如图。经理找的模板里自带viser，我找了一下文档，写的真的不咋地，底下一片骂声。

 

找了半天，大概是这么写(数据我瞎写的)：

<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart :data="data" :height="124" :force-fit="true" :onClick="handleClick">
      <v-tooltip/>
      <v-axis/>
      <v-legend/>
      <v-bar position="x*y" :adjust="adjust"/>
    </v-chart>
  </div>
</template>
export default {
    data(){
        return{
            title: '统计图',
            dataSource: [
              { type: '已完成', '套餐1': 18, '套餐2': 28, '套餐3': 39, '套餐4': 81},
              { type: '已取消', '套餐1': 18, '套餐2': 28, '套餐3': 39, '套餐4': 81}
        ],
           fields: ['套餐1', '套餐2', '套餐3', '套餐4'],
            adjust: [{
              type: 'dodge',
              marginRatio: 1 / 32
            }],
            aliases: []
       }
    },
    computed: {
      data() {
        const dv = new DataSet.View().source(this.dataSource)
        dv.transform({
          type: 'fold',
          fields: this.fields,
          key: 'x',
          value: 'y'
        })

        // bar 使用不了 - 和 / 所以替换下
        let rows = dv.rows.map(row => {
          if (typeof row.x === 'string') {
            row.color = row.type == 'Jeecg' ? '#ffff00' : '#000000'
            row.x = row.x.replace(/[-/]/g, '_')
          }
          return row
        })
        // 替换别名
        rows.forEach(row => {
          for (let item of this.aliases) {
            if (item.field === row.type) {
              row.type = item.alias;
              break
            }
          }
        })
        return rows
      }
    },
}

问题来了，出来的俩柱状图的颜色就是默认颜色，怎么改呢，文档上也没写。

我百度了半天。有的说写colors，有的说写color，反正我怎么写都不对，只能去找找源码看，你们看看这个数据格式有多变态。

得这么写才行：

<v-bar position="x*y" :color="['type',['#7196C1','#E52A1C']]" :adjust="adjust"/>

贴一下源码里的方法：