Blame view

ant-design-vue-jeecg/src/components/chart/MiniBar.vue 1.19 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
<template>
  <div :style="{'width':width==null?'auto':width+'px'}">
    <v-chart :forceFit="width==null" :height="height" :data="data" padding="0">
      <v-tooltip/>
      <v-bar position="x*y"/>
    </v-chart>
  </div>
</template>

<script>
肖超群 authored
11
import moment from 'dayjs'
肖超群 authored
12
肖超群 authored
13
14
const sourceData = []
const beginDay = new Date().getTime()
肖超群 authored
15
肖超群 authored
16
17
18
19
20
21
for (let i = 0; i < 10; i++) {
  sourceData.push({
    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
    y: Math.round(Math.random() * 10)
  })
}
肖超群 authored
22
肖超群 authored
23
24
25
26
27
28
29
const tooltip = [
  'x*y',
  (x, y) => ({
    name: x,
    value: y
  })
]
肖超群 authored
30
肖超群 authored
31
32
33
34
35
36
37
38
39
const scale = [{
  dataKey: 'x',
  min: 2
}, {
  dataKey: 'y',
  title: '时间',
  min: 1,
  max: 30
}]
肖超群 authored
40
肖超群 authored
41
42
43
44
45
46
export default {
  name: 'MiniBar',
  props: {
    dataSource: {
      type: Array,
      default: () => []
肖超群 authored
47
    },
肖超群 authored
48
49
50
    width: {
      type: Number,
      default: null
肖超群 authored
51
    },
肖超群 authored
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
    height: {
      type: Number,
      default: 200
    }
  },
  created() {
    if (this.dataSource.length === 0) {
      this.data = sourceData
    } else {
      this.data = this.dataSource
    }
  },
  data() {
    return {
      tooltip,
      data: [],
      scale
肖超群 authored
69
70
    }
  }
肖超群 authored
71
}
肖超群 authored
72
73
74
</script>

<style lang="less" scoped>
肖超群 authored
75
@import "chart";
肖超群 authored
76
</style>