79 lines
1.5 KiB
Vue
79 lines
1.5 KiB
Vue
<template>
|
|
<view class="charts-box" :style="{ width: width, height: height }">
|
|
<qiun-data-charts
|
|
type="line"
|
|
canvas2d
|
|
:opts="opts"
|
|
:chartData="chartData"
|
|
ontouch
|
|
tooltip-format="tooltipExer"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
interface SeriesType {
|
|
name: string;
|
|
date: any[];
|
|
color?: string;
|
|
}
|
|
interface ChartDataType {
|
|
categories: any[];
|
|
series: SeriesType[];
|
|
}
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
width?: string;
|
|
height?: string;
|
|
chartData: any;
|
|
tooltipFormatType?: string;
|
|
}>(),
|
|
{ height: '420rpx', categories: () => [] },
|
|
);
|
|
|
|
const chartData = ref(props.chartData);
|
|
const opts = ref({
|
|
padding: [15, 20, 0, 15],
|
|
enableScroll: false,
|
|
dataLabel: false,
|
|
dataPointShape: false,
|
|
legend: { position: 'top', padding: 2 },
|
|
xAxis: {
|
|
disableGrid: true,
|
|
labelCount: 6, // 标签数
|
|
format: 'xAixsHoursMin',
|
|
},
|
|
yAxis: {
|
|
gridType: 'dash',
|
|
dashLength: 2,
|
|
calibration: true,
|
|
},
|
|
extra: {
|
|
line: {
|
|
type: 'curve',
|
|
width: 2,
|
|
activeType: 'none',
|
|
},
|
|
tooltip: {
|
|
bgColor: '#21D17A',
|
|
fontColor: '#fff',
|
|
bgOpacity: 1,
|
|
borderRadius: 8,
|
|
gridColor: '#21D17A',
|
|
labelFontColor: '#333',
|
|
legendShow: false,
|
|
borderOpacity: 1,
|
|
labelBgOpacity: 1,
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
.charts-box {
|
|
width: 100%;
|
|
}
|
|
</style>
|