iview统计图

1、Bar.vue

<template>

<div>

<h4 :style="{ marginBottom: '20px' }">{ { title }}</h4>

<v-chart forceFit="true" :height="height" :data="dataSource" :scale="scale" :padding="padding">

<v-tooltip/>

<v-axis dataKey="y" :title="ytitle"></v-axis>

<v-bar position="x*y"/>

</v-chart>

</div>

</template>

 

<script>

 

export default {

name: 'Bar',

props: {

dataSource: {

type: Array,

required: true

},

yaxisText: {

type: String,

default: 'y'

},

title: {

type: String,

default: ''

},

height: {

type: Number,

default: 254

},

tickInterval: {

type: Number,

default: 1

}

},

data() {

return {

padding: ['auto', 'auto', '40', '70'],

scale : [{

dataKey: 'y',

alias: this.yaxisText,

tickInterval: this.tickInterval

}],

ytitle : {

text: this.yaxisText,

textStyle:{