<template>
|
<el-tabs v-model="activeName" class="demo-tabs min-w-[38rem] flex-column" @tab-click="handleClick">
|
<el-tab-pane class="h-full" label="Chart" name="first">
|
<el-select class="flex-0 w-36" v-model="selectChartType" @change="selectChartTypeChange">
|
<el-option
|
v-for="item in Object.keys(chartTypeMapName)"
|
:key="item"
|
:value="parseInt(item)"
|
:label="chartTypeMapName[item]"
|
></el-option>
|
</el-select>
|
<div class="flex-auto">
|
<div ref="chartRef" class="h-full"></div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane class="h-full" label="Data" name="second">
|
<el-table :data="data.values" style="width: 100%">
|
<el-table-column v-for="(item, index) in data?.names" :label="item" :key="index">
|
<template #default="scope">
|
{{ scope.row[index] }}
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</template>
|
<script lang="ts" setup>
|
import * as echarts from 'echarts';
|
import type { TabsPaneContext } from 'element-plus';
|
import type { PropType } from 'vue';
|
import { onMounted, ref } from 'vue';
|
import { ChartTypeEnum, chartTypeMapEchart, chartTypeMapName } from '../types';
|
import type { RecordSetValues } from '/@/api/ai/chat';
|
import { dateRegex } from '/@/utils/toolsValidate';
|
const activeName = ref('first');
|
const chartRef = ref<HTMLDivElement>(null);
|
const selectChartType = ref<ChartTypeEnum>(ChartTypeEnum.Line);
|
|
const props = defineProps({
|
data: {
|
type: Object as PropType<RecordSetValues>,
|
},
|
});
|
|
|
|
const selectChartTypeChange = () => {
|
drawChart();
|
};
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => {};
|
|
let chartInstance: echarts.ECharts = null;
|
|
const getXType = (xData?: any[]) => {
|
const xValue = xData?.[0];
|
if (xValue == null) return 'value';
|
if (typeof xValue === 'number') {
|
return 'value';
|
} else if (typeof xValue === 'string') {
|
const isValidDate = dateRegex.test(xValue);
|
return isValidDate ? 'time' : 'category';
|
} else {
|
throw '图表x轴数据类型异常';
|
}
|
};
|
|
const drawChart = () => {
|
const xData = props.data.values?.map((item) => item[0]);
|
const xType = getXType(xData);
|
chartInstance.setOption({
|
grid: {
|
// bottom: 120,
|
right:'15%',
|
bottom: '15%',
|
},
|
tooltip: {
|
show: true,
|
},
|
title: {
|
text: props.data.title,
|
left: 'center',
|
|
},
|
xAxis: {
|
name: props.data?.names[0],
|
type: xType,
|
},
|
yAxis: {
|
name: props.data?.names[1],
|
type: 'value',
|
},
|
series: [
|
{
|
data: props.data.values,
|
type: chartTypeMapEchart[selectChartType.value],
|
},
|
],
|
dataZoom: {
|
type: 'inside',
|
},
|
});
|
};
|
|
onMounted(() => {
|
setTimeout(() => {
|
|
const parent = chartRef.value.parentElement;
|
|
const parentBound = parent.getBoundingClientRect();
|
chartInstance = echarts.init(chartRef.value,undefined,{
|
width:parentBound.width,
|
height:parentBound.height
|
});
|
|
drawChart();
|
}, 300);
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.el-tabs {
|
:deep(.el-tabs__header) {
|
flex: 0 0 auto;
|
}
|
:deep(.el-tabs__content) {
|
flex: 1;
|
.el-tab-pane {
|
display: flex;
|
flex-direction: column;
|
min-height: 24rem;
|
}
|
}
|
}
|
</style>
|
