antd vue v-chart绘制柱形图

网上对v-chart的介绍不太多 有一个官网 https://www.wenjiangs.com/doc/vux-v-chart#title-9
绘制柱形图
1.下载viser-vue
2.main.js引入
import Viser from ‘viser-vue’
Vue.use(Viser)
3.创建一个放柱形图的组件 Bar.vue

<template>
  <div :style="{ padding: '0 50px 32px 0' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding=" padding" :onClick="handleClick">
      <v-tooltip/>
      <v-legend/>
      <v-axis/>
      **<v-bar position="type*bar"/>**
      ***这一步是关键 position 里面放的是x，y  你拿到数据里面的对象***
      <v-line position="type*line" color="#2fc25b" :size="3"/>
    </v-chart>
  </div>
</template>

<script>
  import { ChartEventMixins } from './mixins/ChartMixins'

  export default {
    name: 'BarAndLine',
    mixins: [ChartEventMixins],
    props: {
      title: {
        type: String,
        default: ''
      },
       // 线的粗细
      lineSize: {
        type: Number,
        default: 50
      },
      dataSource: {
        type: Array,
        default: () => [
          { type: '10:10', bar: 200, line: 1000 },
          { type: '10:15', bar: 600, line: 1000},
          { type: '10:20', bar: 200, line: 1000},
          { type: '10:25', bar: 900, line: 1000},
          { type: '10:30', bar: 200, line: 1000},
          { type: '10:35', bar: 200, line: 1000},
          { type: '10:40', bar: 100, line: 1000}
        ]
      },
      height: {
        type: Number,
        default: 400
      }
    },
    data() {
      return {
        padding: { top:50, right:50, bottom:100, left:50 },
        scale: [{
          dataKey: 'bar',
          min: 0
        }, {
          dataKey: 'line',
          min: 0
        }]
      }
    },
    computed: {
      data() {
        return this.dataSource
      }
    }
  }
</script>
如果要加柱形图每一个数据的宽度  就是在props里面加lineSize  设置宽度 再把lineSize加到<v-bar :size="lineSize"></v-bar>