From b065f956b99dc1afc27e67a21e5b5480ccc55738 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期三, 17 七月 2024 09:53:49 +0800
Subject: [PATCH] fix: 将页面移入到ai_html
---
src/components/chat/chatComponents/recordSetCom/RecordSetCom.vue | 81 ++++++++++++++++++++++++++++++++++------
1 files changed, 68 insertions(+), 13 deletions(-)
diff --git a/src/components/chat/chatComponents/recordSetCom/RecordSetCom.vue b/src/components/chat/chatComponents/recordSetCom/RecordSetCom.vue
index e7e677d..e45cb04 100644
--- a/src/components/chat/chatComponents/recordSetCom/RecordSetCom.vue
+++ b/src/components/chat/chatComponents/recordSetCom/RecordSetCom.vue
@@ -1,14 +1,14 @@
<template>
- <el-tabs v-model="activeName" class="demo-tabs min-w-[38rem] flex-column" @tab-click="handleClick">
+ <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-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>
+ </el-select> -->
<div class="flex-auto">
<div ref="chartRef" class="h-full"></div>
</div>
@@ -32,6 +32,7 @@
import { ChartTypeEnum, chartTypeMapEchart, chartTypeMapName } from '../types';
import type { RecordSetValues } from '/@/api/ai/chat';
import { dateRegex } from '/@/utils/toolsValidate';
+import { PATH_ICON, SCATTER_SYMBOL_SIZE, timeDataOptionToContent } from '../common';
const activeName = ref('first');
const chartRef = ref<HTMLDivElement>(null);
const selectChartType = ref<ChartTypeEnum>(ChartTypeEnum.Line);
@@ -41,8 +42,6 @@
type: Object as PropType<RecordSetValues>,
},
});
-
-
const selectChartTypeChange = () => {
drawChart();
@@ -71,16 +70,71 @@
chartInstance.setOption({
grid: {
// bottom: 120,
- right:'15%',
- bottom: '15%',
+ right: '15%',
+ 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],
@@ -93,6 +147,8 @@
series: [
{
data: props.data.values,
+ symbol: 'none',
+ smooth: true,
type: chartTypeMapEchart[selectChartType.value],
},
],
@@ -104,14 +160,13 @@
onMounted(() => {
setTimeout(() => {
-
const parent = chartRef.value.parentElement;
- if(!parent){
+ if (!parent) {
}
const parentBound = parent.getBoundingClientRect();
- chartInstance = echarts.init(chartRef.value,undefined,{
- width:parentBound.width,
- height:parentBound.height
+ chartInstance = echarts.init(chartRef.value, undefined, {
+ width: parentBound.width,
+ height: parentBound.height,
});
drawChart();
--
Gitblit v1.9.3