64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<template>
|
|
<div class="charts-box" :style="{ width: width, height: height }">
|
|
<qiun-data-charts
|
|
type="column"
|
|
:canvas2d="canvas2d"
|
|
:opts="opts"
|
|
:tooltipShow="false"
|
|
:chartData="chartData"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
interface SeriesType {
|
|
data: { color?: string; value: number }[];
|
|
}
|
|
interface ChartDataType {
|
|
categories: string[];
|
|
series: SeriesType[];
|
|
}
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
width?: string;
|
|
height?: string;
|
|
chartData: ChartDataType;
|
|
}>(),
|
|
{ height: '440rpx', categories: () => [] },
|
|
);
|
|
const canvas2d = ref(true);
|
|
const chartData = ref(props.chartData);
|
|
const opts = ref({
|
|
padding: [20, 25, 0, 0],
|
|
enableScroll: false,
|
|
legend: {
|
|
show: false,
|
|
},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
},
|
|
yAxis: {
|
|
// format: 'integerFormat',
|
|
},
|
|
extra: {
|
|
column: {
|
|
type: 'group',
|
|
width: 30,
|
|
activeBgColor: '#000000',
|
|
activeBgOpacity: 0.05,
|
|
barBorderCircle: false,
|
|
seriesGap: 5,
|
|
linearOpacity: 0.5,
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
.charts-box {
|
|
width: 100%;
|
|
}
|
|
</style>
|