You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.4 KiB
60 lines
1.4 KiB
<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"/> |
|
<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: '' |
|
}, |
|
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> |