<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';
|
import { PATH_ICON, SCATTER_SYMBOL_SIZE, chatComProps, timeDataOptionToContent } from '../common';
|
import { usePageDisplay } from '/@/hooks/usePageDisplay';
|
import { debounce } from '/@/utils/util';
|
const activeName = ref('first');
|
const chartRef = ref<HTMLDivElement>(null);
|
const selectChartType = ref<ChartTypeEnum>(ChartTypeEnum.Line);
|
|
const props = defineProps(chatComProps);
|
|
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: {
|
left: 35,
|
right: 45,
|
bottom: '5%',
|
},
|
tooltip: {
|
show: true,
|
trigger: 'axis',
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
dataZoom: {
|
yAxisIndex: 'none',
|
},
|
myBar: {
|
title: '转化为柱状图',
|
show: true,
|
icon: PATH_ICON.bar,
|
onclick: () => {
|
chartInstance.setOption({
|
series: {
|
data: props.data.values,
|
type: 'bar',
|
symbol: 'none',
|
},
|
});
|
},
|
},
|
|
myScatter: {
|
title: '转化为散点图',
|
show: true,
|
icon: PATH_ICON.scatter,
|
onclick: () => {
|
chartInstance.setOption({
|
data: props.data.values,
|
type: 'scatter',
|
symbol: 'circle',
|
symbolSize: SCATTER_SYMBOL_SIZE,
|
});
|
},
|
},
|
myLine: {
|
title: '转化为曲线图',
|
show: true,
|
icon: PATH_ICON.line,
|
onclick: () => {
|
chartInstance.setOption({
|
data: props.data.values,
|
type: 'line',
|
symbol: 'none',
|
smooth: true,
|
});
|
},
|
},
|
dataView: {
|
readOnly: true,
|
optionToContent: timeDataOptionToContent,
|
},
|
saveAsImage: {},
|
},
|
},
|
|
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,
|
symbol: 'none',
|
smooth: true,
|
type: chartTypeMapEchart[selectChartType.value],
|
},
|
],
|
dataZoom: {
|
type: 'inside',
|
},
|
});
|
};
|
|
const showEvent = () => {
|
window.addEventListener('resize', resizeChart);
|
};
|
|
const hideEvent = () => {
|
window.removeEventListener('resize', resizeChart);
|
};
|
let resizeChart = null;
|
const { haveExecutedMounted } = usePageDisplay(showEvent, hideEvent);
|
onMounted(() => {
|
setTimeout(() => {
|
const parent = chartRef.value.parentElement;
|
if (!parent) {
|
}
|
const parentBound = parent.getBoundingClientRect();
|
chartInstance = echarts.init(chartRef.value, undefined, {
|
width: parentBound.width,
|
height: parentBound.height,
|
});
|
resizeChart = debounce(() => {
|
const parentBound = parent.getBoundingClientRect();
|
chartInstance.resize({
|
width: parentBound.width,
|
height: parentBound.height,
|
});
|
});
|
showEvent();
|
haveExecutedMounted.value = true;
|
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>
|
