109 lines
1.8 KiB
Vue
109 lines
1.8 KiB
Vue
<template>
|
|
<BaseEChart :options="chartOptions" v-bind="$attrs" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import BaseEChart from './BaseEChart.vue'
|
|
|
|
defineOptions({
|
|
name: 'BarChart'
|
|
})
|
|
|
|
const props = defineProps({
|
|
// 数据项
|
|
data: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
// x轴数据
|
|
xAxis: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
// 是否显示背景
|
|
showBackground: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 系列配置
|
|
series: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
// 图表标题
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 柱子宽度
|
|
barWidth: {
|
|
type: Number,
|
|
default: 30
|
|
}
|
|
})
|
|
|
|
const chartOptions = computed(() => {
|
|
const series = props.series.length > 0 ? props.series : [{
|
|
name: '数值',
|
|
data: props.data,
|
|
type: 'bar',
|
|
barWidth: props.barWidth,
|
|
showBackground: props.showBackground,
|
|
backgroundStyle: {
|
|
color: 'rgba(180, 180, 180, 0.1)'
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [4, 4, 0, 0]
|
|
}
|
|
}]
|
|
|
|
return {
|
|
title: props.title ? {
|
|
text: props.title,
|
|
left: 'center',
|
|
top: 10
|
|
} : null,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
top: props.title ? '60px' : '40px',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: props.xAxis,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#E5E7EB'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#E5E7EB'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
series
|
|
}
|
|
})
|
|
</script> |