mirror of https://github.com/jeecgboot/jeecg-boot
88 lines
1.7 KiB
Java
88 lines
1.7 KiB
Java
<template>
|
|
<div :style="{ padding: '0' }">
|
|
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
|
|
|
<v-chart ref="chart" :forceFit="true" :height="height" :data="dataSource" :scale="scale">
|
|
<v-tooltip :shared="false"/>
|
|
<v-axis/>
|
|
<v-line position="x*y" :size="lineSize" :color="lineColor"/>
|
|
<v-area position="x*y" :color="color"/>
|
|
</v-chart>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { triggerWindowResizeEvent } from '@/utils/util'
|
|
|
|
export default {
|
|
name: 'AreaChartTy',
|
|
props: {
|
|
// 图表数据
|
|
dataSource: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
// 图表标题
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// x 轴别名
|
|
x: {
|
|
type: String,
|
|
default: 'x'
|
|
},
|
|
// y 轴别名
|
|
y: {
|
|
type: String,
|
|
default: 'y'
|
|
},
|
|
// Y轴最小值
|
|
min: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
// Y轴最大值
|
|
max: {
|
|
type: Number,
|
|
default: null
|
|
},
|
|
// 图表高度
|
|
height: {
|
|
type: Number,
|
|
default: 254
|
|
},
|
|
// 线的粗细
|
|
lineSize: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
// 面积的颜色
|
|
color: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 线的颜色
|
|
lineColor: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
computed: {
|
|
scale() {
|
|
return [
|
|
{ dataKey: 'x', title: this.x, alias: this.x },
|
|
{ dataKey: 'y', title: this.y, alias: this.y, min: this.min, max: this.max }
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
triggerWindowResizeEvent()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "chart";
|
|
</style> |