Skip to content
GitLab
Commit 6c6b90e5 authored by 水玉婷's avatar 水玉婷
Browse files

feat:添加饼图并支持多维度过滤

parent 09b84c6f
Hide whitespace changes
Inline Side-by-side
.env.dev 0 → 100644
View file @ 6c6b90e5
# 开发环境配置
VITE_API_BASE_URL=http://peddev.cmic.com.cn
# 应用基础路径
VITE_BASE_PATH=/ai/
VITE_SSE_PATH=/agentService
# API基础路径
VITE_API_BASE_PATH=''
# 应用代码
VITE_APP_CODE=ped.qywx
# 环境标识
VITE_ENV=development
\ No newline at end of file
.env.test 0 → 100644
View file @ 6c6b90e5
# 测试环境配置
NODE_ENV = 'test'
# API基础URL - 保持不变，使用原配置
VITE_API_BASE_URL=http://peddev.cmic.com.cn
# 应用基础路径
VITE_BASE_PATH=/ai/
VITE_SSE_PATH=/aiService
# API基础路径
VITE_API_BASE_PATH=/pedapi
# 应用代码
VITE_APP_CODE=ped.qywx
# 环境标识
VITE_ENV=test
\ No newline at end of file
package.json
View file @ 6c6b90e5
...@@ -5,7 +5,12 @@ ...@@ -5,7 +5,12 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"dev:dev": "vite --mode dev",
"dev:test": "vite --mode test",
"test": "vite test",
"build": "vite build", "build": "vite build",
"build:dev": "vite build --mode dev",
"build:test": "vite build --mode test",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
...@@ -23,4 +28,4 @@ ...@@ -23,4 +28,4 @@
"less": "^4.4.2", "less": "^4.4.2",
"vite": "^4.3.0" "vite": "^4.3.0"
} }
} }
\ No newline at end of file
src/views/components/AiChat.vue
View file @ 6c6b90e5
...@@ -435,7 +435,7 @@ const sendMessage = async (type: MessageType = 'text', params: MessageParams = { ...@@ -435,7 +435,7 @@ const sendMessage = async (type: MessageType = 'text', params: MessageParams = {
...props.params, ...props.params,
}; };
const response = await fetch(`${props.apiBaseUrl}/aiService/ask/app/${props.params?.appId}`, { const response = await fetch(`${import.meta.env.VITE_SSE_PATH}/ask/app/${props.params?.appId}`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
...@@ -592,32 +592,48 @@ onBeforeUnmount(() => { ...@@ -592,32 +592,48 @@ onBeforeUnmount(() => {
const simulateLineChartMessage = () => { const simulateLineChartMessage = () => {
console.log('模拟折线图消息'); console.log('模拟折线图消息');
// 使用真实医院数据创建折线图数据 // 使用真实医院数据创建折线图数据，包含多个维度和指标
const lineChartData = { const lineChartData = {
title:"2023年第三季度武汉各医院每月住院患者总数及费用汇总", title:"2023年各医院月度运营数据汇总",
dimFields: ['月份', '地区'], dimFields: ['月份', '地区', '医院类型', '科室'],
indexFields: ['用户总数', '费用汇总'], indexFields: ['用户总数', '费用汇总', '平均住院天数', '手术台数', '门诊量'],
rows: [ rows: [
{ '月份': '1月', '地区': '北京', '用户总数': 100, '费用汇总': 5000 }, { '月份': '1月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 100, '费用汇总': 5000, '平均住院天数': 7.2, '手术台数': 15, '门诊量': 1200 },
{ '月份': '2月', '地区': '北京', '用户总数': 150, '费用汇总': 6000 }, { '月份': '2月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 150, '费用汇总': 6000, '平均住院天数': 6.8, '手术台数': 18, '门诊量': 1400 },
{ '月份': '3月', '地区': '北京', '用户总数': 120, '费用汇总': 5500 }, { '月份': '3月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 120, '费用汇总': 5500, '平均住院天数': 7.5, '手术台数': 16, '门诊量': 1300 },
{ '月份': '4月', '地区': '北京', '用户总数': 180, '费用汇总': 8000 }, { '月份': '4月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 180, '费用汇总': 8000, '平均住院天数': 6.5, '手术台数': 22, '门诊量': 1600 },
{ '月份': '5月', '地区': '北京', '用户总数': 200, '费用汇总': 9000 }, { '月份': '5月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 200, '费用汇总': 9000, '平均住院天数': 6.2, '手术台数': 25, '门诊量': 1800 },
{ '月份': '6月', '地区': '北京', '用户总数': 250, '费用汇总': 11000 }, { '月份': '6月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 250, '费用汇总': 11000, '平均住院天数': 5.8, '手术台数': 30, '门诊量': 2000 },
{ '月份': '1月', '地区': '上海', '用户总数': 80, '费用汇总': 4000 },
{ '月份': '2月', '地区': '上海', '用户总数': 120, '费用汇总': 5000 }, { '月份': '1月', '地区': '北京', '医院类型': '三甲医院', '科室': '外科', '用户总数': 80, '费用汇总': 8000, '平均住院天数': 8.5, '手术台数': 45, '门诊量': 800 },
{ '月份': '3月', '地区': '上海', '用户总数': 100, '费用汇总': 4500 }, { '月份': '2月', '地区': '北京', '医院类型': '三甲医院', '科室': '外科', '用户总数': 120, '费用汇总': 9500, '平均住院天数': 8.2, '手术台数': 52, '门诊量': 900 },
{ '月份': '4月', '地区': '上海', '用户总数': 150, '费用汇总': 7000 }, { '月份': '3月', '地区': '北京', '医院类型': '三甲医院', '科室': '外科', '用户总数': 100, '费用汇总': 8500, '平均住院天数': 8.8, '手术台数': 48, '门诊量': 850 },
{ '月份': '5月', '地区': '上海', '用户总数': 180, '费用汇总': 8000 }, { '月份': '4月', '地区': '北京', '医院类型': '三甲医院', '科室': '外科', '用户总数': 150, '费用汇总': 12000, '平均住院天数': 7.8, '手术台数': 60, '门诊量': 1100 },
{ '月份': '6月', '地区': '上海', '用户总数': 220, '费用汇总': 10000 }, { '月份': '5月', '地区': '北京', '医院类型': '三甲医院', '科室': '外科', '用户总数': 180, '费用汇总': 14000, '平均住院天数': 7.5, '手术台数': 68, '门诊量': 1200 },
{ '月份': '1月', '地区': '广州', '用户总数': 60, '费用汇总': 3000 }, { '月份': '6月', '地区': '北京', '医院类型': '三甲医院', '科室': '外科', '用户总数': 220, '费用汇总': 16000, '平均住院天数': 7.2, '手术台数': 75, '门诊量': 1400 },
{ '月份': '2月', '地区': '广州', '用户总数': 90, '费用汇总': 4000 },
{ '月份': '3月', '地区': '广州', '用户总数': 80, '费用汇总': 3500 }, { '月份': '1月', '地区': '上海', '医院类型': '三甲医院', '科室': '内科', '用户总数': 80, '费用汇总': 4000, '平均住院天数': 6.8, '手术台数': 12, '门诊量': 1000 },
{ '月份': '4月', '地区': '广州', '用户总数': 120, '费用汇总': 6000 }, { '月份': '2月', '地区': '上海', '医院类型': '三甲医院', '科室': '内科', '用户总数': 120, '费用汇总': 5000, '平均住院天数': 6.5, '手术台数': 15, '门诊量': 1200 },
{ '月份': '5月', '地区': '广州', '用户总数': 150, '费用汇总': 7000 }, { '月份': '3月', '地区': '上海', '医院类型': '三甲医院', '科室': '内科', '用户总数': 100, '费用汇总': 4500, '平均住院天数': 7.0, '手术台数': 13, '门诊量': 1100 },
{ '月份': '6月', '地区': '广州', '用户总数': 180, '费用汇总': 9000 } { '月份': '4月', '地区': '上海', '医院类型': '三甲医院', '科室': '内科', '用户总数': 150, '费用汇总': 7000, '平均住院天数': 6.2, '手术台数': 18, '门诊量': 1400 },
{ '月份': '5月', '地区': '上海', '医院类型': '三甲医院', '科室': '内科', '用户总数': 180, '费用汇总': 8000, '平均住院天数': 5.9, '手术台数': 22, '门诊量': 1600 },
{ '月份': '6月', '地区': '上海', '医院类型': '三甲医院', '科室': '内科', '用户总数': 220, '费用汇总': 10000, '平均住院天数': 5.6, '手术台数': 28, '门诊量': 1800 },
{ '月份': '1月', '地区': '上海', '医院类型': '二甲医院', '科室': '内科', '用户总数': 60, '费用汇总': 2500, '平均住院天数': 5.5, '手术台数': 8, '门诊量': 600 },
{ '月份': '2月', '地区': '上海', '医院类型': '二甲医院', '科室': '内科', '用户总数': 90, '费用汇总': 3200, '平均住院天数': 5.2, '手术台数': 10, '门诊量': 700 },
{ '月份': '3月', '地区': '上海', '医院类型': '二甲医院', '科室': '内科', '用户总数': 80, '费用汇总': 2800, '平均住院天数': 5.8, '手术台数': 9, '门诊量': 650 },
{ '月份': '4月', '地区': '上海', '医院类型': '二甲医院', '科室': '内科', '用户总数': 120, '费用汇总': 4500, '平均住院天数': 5.0, '手术台数': 12, '门诊量': 800 },
{ '月份': '5月', '地区': '上海', '医院类型': '二甲医院', '科室': '内科', '用户总数': 150, '费用汇总': 5500, '平均住院天数': 4.8, '手术台数': 15, '门诊量': 900 },
{ '月份': '6月', '地区': '上海', '医院类型': '二甲医院', '科室': '内科', '用户总数': 180, '费用汇总': 6500, '平均住院天数': 4.5, '手术台数': 18, '门诊量': 1000 },
{ '月份': '1月', '地区': '广州', '医院类型': '三甲医院', '科室': '内科', '用户总数': 60, '费用汇总': 3000, '平均住院天数': 6.0, '手术台数': 10, '门诊量': 800 },
{ '月份': '2月', '地区': '广州', '医院类型': '三甲医院', '科室': '内科', '用户总数': 90, '费用汇总': 4000, '平均住院天数': 5.8, '手术台数': 12, '门诊量': 900 },
{ '月份': '3月', '地区': '广州', '医院类型': '三甲医院', '科室': '内科', '用户总数': 80, '费用汇总': 3500, '平均住院天数': 6.2, '手术台数': 11, '门诊量': 850 },
{ '月份': '4月', '地区': '广州', '医院类型': '三甲医院', '科室': '内科', '用户总数': 120, '费用汇总': 6000, '平均住院天数': 5.5, '手术台数': 15, '门诊量': 1100 },
{ '月份': '5月', '地区': '广州', '医院类型': '三甲医院', '科室': '内科', '用户总数': 150, '费用汇总': 7000, '平均住院天数': 5.2, '手术台数': 18, '门诊量': 1200 },
{ '月份': '6月', '地区': '广州', '医院类型': '三甲医院', '科室': '内科', '用户总数': 180, '费用汇总': 9000, '平均住院天数': 4.9, '手术台数': 22, '门诊量': 1400 }
], ],
chartType: 'line' // 将chartType放在message对象内部 // chartType: 'line' // 设置默认图表类型为折线图
}; };
// 正确的SSE消息格式：status 3（图表数据），type 2（表格数据） // 正确的SSE消息格式：status 3（图表数据），type 2（表格数据）
......
src/views/components/ChartComponent.vue
View file @ 6c6b90e5
<template> <template>
<div class="chart-component"> <div class="chart-container">
<ColumnChart <!-- 图表类型选择器 -->
v-if="chartType === CHART_TYPES.COLUMN" <div class="chart-controls">
:chart-data="chartData" <div class="chart-type-selector">
:title="title" <!-- <span class="control-label">图表类型</span> -->
:width="width" <a-select
:height="height" v-model:value="selectedChartType"
/> :options="chartTypeOptions"
<LineChart :getPopupContainer="triggerNode => triggerNode.parentNode"
v-else-if="chartType === CHART_TYPES.LINE" @change="handleChartTypeChange"
:chart-data="chartData" />
:title="title" </div>
:width="width"
:height="height" <!-- 指标和维度选择器（非表格时显示） -->
/> <div v-if="showChartControls" class="chart-fields-selector">
<div v-else class="chart-error"> <div class="field-selector">
不支持的图表类型: {{ chartType }} <span class="control-label">维度</span>
<a-tooltip placement="top">
<template #title>
<span>维度用于对数据进行分类，如时间、地区等</span>
</template>
<question-circle-outlined/>
</a-tooltip>
<!-- 维度选择器 -->
<a-select
v-model:value="selectedDimensions"
:mode="selectedChartType === CHART_TYPES.PIE ? undefined : 'multiple'"
:maxTagCount="12"
:maxTagTextLength="6"
:dropdownMatchSelectWidth="false"
:getPopupContainer="triggerNode => triggerNode.parentNode"
placeholder="请选择维度"
@change="handleFieldChange"
>
<a-select-option
v-for="dim in availableDimensions"
:key="dim"
:value="dim"
:disabled="
(selectedDimensions.length >= 2 && !selectedDimensions.includes(dim))"
>
{{ dim }}
</a-select-option>
</a-select>
</div>
<div class="field-selector">
<span class="control-label">指标</span>
<a-tooltip placement="top">
<template #title>
<span>指标用于衡量数据，如销售额、用户数等</span>
</template>
<question-circle-outlined/>
</a-tooltip>
<!-- 指标选择器 -->
<a-select
v-model:value="selectedIndexes"
:mode="selectedChartType === CHART_TYPES.PIE ? undefined : 'multiple'"
:maxTagCount="2"
:maxTagTextLength="6"
:dropdownMatchSelectWidth="false"
:getPopupContainer="triggerNode => triggerNode.parentNode"
placeholder="请选择指标"
@change="handleFieldChange"
>
<a-select-option
v-for="index in availableIndexes"
:key="index"
:value="index"
:disabled="(selectedIndexes.length >= 2 && !selectedIndexes.includes(index))"
>
{{ index }}
</a-select-option>
</a-select>
</div>
</div>
</div>
<!-- 图表渲染区域 -->
<div class="chart-render-area">
<!-- 表格渲染 -->
<div v-if="selectedChartType === CHART_TYPES.TABLE" class="table-render">
<div v-html="tableHtml" class="message-table"></div>
</div>
<!-- 柱状图渲染 -->
<ColumnChart
v-else-if="selectedChartType === CHART_TYPES.COLUMN && processedChartData"
:chart-data="processedChartData"
:title="title"
:width="width"
:height="height"
/>
<!-- 折线图渲染 -->
<LineChart
v-else-if="selectedChartType === CHART_TYPES.LINE && processedChartData"
:chart-data="processedChartData"
:title="title"
:width="width"
:height="height"
/>
<!-- 饼图渲染 -->
<PieChart
v-else-if="selectedChartType === CHART_TYPES.PIE && processedChartData"
:chart-data="processedChartData"
:title="title"
:width="width"
:height="height"
/>
<!-- 空数据提示 -->
<div v-else-if="!processedChartData" class="chart-empty">
<div class="empty-icon">📊</div>
<div class="empty-text">请选择维度和指标</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts">
// 图表类型常量（需要在模块作用域中定义，以便在defineProps中使用）
export const CHART_TYPES = {
TABLE: 'table',
COLUMN: 'column',
LINE: 'line',
PIE: 'pie'
} as const;
export type ChartType = typeof CHART_TYPES[keyof typeof CHART_TYPES];
</script>
<script setup lang="ts"> <script setup lang="ts">
import ColumnChart from './ColumnChart.vue'; import { ref, computed, watch, onMounted, defineAsyncComponent, type Ref } from 'vue';
import LineChart from './LineChart.vue'; import { Select as ASelect, SelectOption as ASelectOption, Tooltip as ATooltip } from 'ant-design-vue';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { generateTableHTML } from './utils/tableTemplate';
// 在模块作用域中定义图表类型常量
const CHART_TYPES = {
COLUMN: 'column',
LINE: 'line'
};
// 定义组件属性 // 类型定义
interface ChartData {
dimFields?: string[];
indexFields?: string[];
rows?: any[];
}
interface ChartTypeOption {
value: string;
label: string;
}
interface Props { interface Props {
chartData: any; chartData?: ChartData;
chartType?: number | string; chartType?: number | string;
title?: string; title?: string;
width?: number | string; width?: number | string;
height?: number | string; height?: number | string;
} }
// 使用异步组件实现按需加载
const ColumnChart = defineAsyncComponent(() => import('./ColumnChart.vue'));
const LineChart = defineAsyncComponent(() => import('./LineChart.vue'));
const PieChart = defineAsyncComponent(() => import('./PieChart.vue'));
// 组件属性定义
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
chartType: 'column', chartType: CHART_TYPES.COLUMN,
title: '数据图表', title: '数据图表',
width: '100%', width: '100%',
height: 'auto' height: 'auto'
}); });
// 响应式数据
const selectedChartType: Ref<ChartType> = ref(CHART_TYPES.TABLE);
const selectedDimensions = ref<string[]>([]);
const selectedIndexes = ref<string[]>([]);
const processedChartData = ref<ChartData | null>(null);
// 计算属性
const showChartControls = computed(() => {
return selectedChartType.value === CHART_TYPES.COLUMN ||
selectedChartType.value === CHART_TYPES.LINE ||
selectedChartType.value === CHART_TYPES.PIE;
});
const availableDimensions = computed(() => {
return props.chartData?.dimFields ?? [];
});
const availableIndexes = computed(() => {
return props.chartData?.indexFields ?? [];
});
const tableHtml = computed(() => {
return props.chartData?.rows ? generateTableHTML(props.chartData.rows) : '';
});
// 修改chartTypeOptions以包含饼图选项
const chartTypeOptions = computed<ChartTypeOption[]>(() => {
return [
{ value: CHART_TYPES.TABLE, label: '图表类型 : 表格' },
{ value: CHART_TYPES.COLUMN, label: '图表类型 : 柱状图' },
{ value: CHART_TYPES.LINE, label: '图表类型 : 折线图' },
{ value: CHART_TYPES.PIE, label: '图表类型 : 饼图' }
];
});
// 方法 - 处理图表类型变化
const handleChartTypeChange = () => {
// 重置选择
selectedDimensions.value = [];
selectedIndexes.value = [];
processedChartData.value = null;
// 如果是表格，直接使用原始数据
if (selectedChartType.value === CHART_TYPES.TABLE) {
processedChartData.value = props.chartData ?? null;
} else {
// 对于柱状图、折线图和饼图，设置默认的维度和指标
if (availableDimensions.value.length > 0) {
selectedDimensions.value = [availableDimensions.value[0]];
}
if (availableIndexes.value.length > 0) {
selectedIndexes.value = [availableIndexes.value[0]];
}
// 处理数据，初始化图表
handleFieldChange();
}
};
// 修改handleFieldChange以支持饼图的选择限制
const handleFieldChange = () => {
// 根据图表类型设置不同的选择限制
const maxDimensions = selectedChartType.value === CHART_TYPES.PIE ? 1 : 2;
const maxIndexes = selectedChartType.value === CHART_TYPES.PIE ? 1 : 2;
// 确保selectedDimensions和selectedIndexes始终是数组格式
if (!Array.isArray(selectedDimensions.value)) {
selectedDimensions.value = selectedDimensions.value ? [selectedDimensions.value] : [];
}
if (!Array.isArray(selectedIndexes.value)) {
selectedIndexes.value = selectedIndexes.value ? [selectedIndexes.value] : [];
}
// 限制最多选择数量
if (selectedDimensions.value.length > maxDimensions) {
selectedDimensions.value = selectedDimensions.value.slice(0, maxDimensions);
}
if (selectedIndexes.value.length > maxIndexes) {
selectedIndexes.value = selectedIndexes.value.slice(0, maxIndexes);
}
// 确保至少选择一个维度和指标（适用于所有图表类型）
if (selectedDimensions.value.length === 0 && availableDimensions.value.length > 0) {
selectedDimensions.value = [availableDimensions.value[0]];
}
if (selectedIndexes.value.length === 0 && availableIndexes.value.length > 0) {
selectedIndexes.value = [availableIndexes.value[0]];
}
// 处理数据，只保留选中的维度和指标
if (selectedDimensions.value.length > 0 && selectedIndexes.value.length > 0 && props.chartData) {
processedChartData.value = {
...props.chartData,
dimFields: selectedDimensions.value,
indexFields: selectedIndexes.value
};
} else {
processedChartData.value = null;
}
};
// 监听chartType属性变化
watch(() => props.chartType, (newType) => {
if (!newType) return;
// 直接使用传入的图表类型
if (Object.values(CHART_TYPES).includes(newType as ChartType)) {
selectedChartType.value = newType as ChartType;
}
// 如果是其他无效类型，保持当前选择
}, { immediate: true });
// 监听原始数据变化
watch(() => props.chartData, (newData) => {
if (!newData) return;
// 如果是表格类型，直接使用数据
if (selectedChartType.value === CHART_TYPES.TABLE) {
processedChartData.value = newData;
return;
}
// 对于图表类型，设置默认的维度和指标
if (newData.dimFields && newData.dimFields.length > 0) {
selectedDimensions.value = [newData.dimFields[0]];
}
if (newData.indexFields && newData.indexFields.length > 0) {
selectedIndexes.value = [newData.indexFields[0]];
}
// 处理数据
handleFieldChange();
}, { immediate: true });
// 组件挂载时设置默认值
onMounted(() => {
if (!props.chartData) return;
// 如果是表格类型，直接使用数据
if (selectedChartType.value === CHART_TYPES.TABLE) {
processedChartData.value = props.chartData;
return;
}
// 对于图表类型，设置默认的维度和指标
if (props.chartData.dimFields && props.chartData.dimFields.length > 0) {
selectedDimensions.value = [props.chartData.dimFields[0]];
}
if (props.chartData.indexFields && props.chartData.indexFields.length > 0) {
selectedIndexes.value = [props.chartData.indexFields[0]];
}
// 处理数据
handleFieldChange();
});
</script> </script>
<style scoped> <style scoped>
.chart-component { .chart-container {
margin: 16px 0; border-radius: 8px;
background-color: #fff;
overflow: hidden;
width: 100% !important;
max-width: 100% !important;
}
.chart-controls {
padding: 8px 16px;
background-color: #fafafa;
border-bottom: 1px solid #e8e8e8;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
min-height: auto;
}
.chart-type-selector {
display: flex;
align-items: center;
margin-right: 6px;
}
.chart-fields-selector {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.field-selector {
display: flex;
align-items: center;
margin-right: 6px;
}
.control-label {
font-size: 14px;
color: #323232;
white-space: nowrap;
line-height: 28px;
margin-right: 4px;
}
.anticon-question-circle{
color: #999;
margin-right: 6px;
} }
.chart-error { /* Ant Design Select 样式调整 */
padding: 20px; :deep(.ant-select) {
text-align: center; font-size: 14px;
color: #f5222d; min-width: 60px;
background-color: #fff2f0; }
border: 1px solid #ffccc7;
:deep(.ant-select-selector) {
border-radius: 4px; border-radius: 4px;
} }
:deep(.ant-select-multiple .ant-select-selector) {
min-height: 32px;
}
/* 移除选中和hover样式 */
:deep(.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector) {
box-shadow: none !important;
border-color: #d9d9d9 !important;
}
:deep(.ant-select:not(.ant-select-disabled):hover .ant-select-selector) {
border-color: #d9d9d9 !important;
}
.chart-render-area {
padding: 0px 8px;
min-height: 300px;
font-size: 0;
width: 100% !important;
display: flex;
flex-direction: column;
}
.table-render {
width: 100%;
overflow-x: auto;
}
.chart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
color: #999;
}
.empty-icon {
font-size: 48px;
margin-bottom: 16px;
}
.empty-text {
font-size: 16px;
}
</style> </style>
\ No newline at end of file
src/views/components/ColumnChart.vue
View file @ 6c6b90e5
...@@ -87,6 +87,7 @@ const formatNumber = (value: any): string => { ...@@ -87,6 +87,7 @@ const formatNumber = (value: any): string => {
*/ */
const getColors = () => { const getColors = () => {
return [ return [
'#5B90F9', '#73DEB3', '#8074FF', '#00CDFE', '#FDDD60', '#FF8B45', '#F478D1', '#FF6F77', '#8D48E4',
'#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2', '#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2',
'#fa541c', '#eb2f96', '#a0d911', '#2f54eb', '#fa8c16', '#52c41a', '#fa541c', '#eb2f96', '#a0d911', '#2f54eb', '#fa8c16', '#52c41a',
'#13c2c2', '#1890ff', '#722ed1', '#faad14', '#f5222d', '#eb2f96', '#13c2c2', '#1890ff', '#722ed1', '#faad14', '#f5222d', '#eb2f96',
...@@ -148,11 +149,32 @@ const getBaseChartConfig = () => ({ ...@@ -148,11 +149,32 @@ const getBaseChartConfig = () => ({
left: '3%', left: '3%',
right: '3%', right: '3%',
bottom: '3%', bottom: '3%',
top: '70px', // 改为固定值，为legend留出空间 top: '70px', // 增加顶部间距，为legend留出更多空间
containLabel: true containLabel: true
} }
}); });
/**
* 基础legend配置 - 始终放在顶部，与折线图保持一致
*/
const getBaseLegendConfig = (data: string[]) => ({
data,
orient: 'horizontal' as const,
left: 'center' as const,
top: '0' as const,
padding: [10, 20, 0, 20], // 调整padding，确保顶部有足够空间
itemGap: 15,
type: 'scroll' as const,
textStyle: {
fontSize: 12
},
pageTextStyle: {
fontSize: 10
},
pageIconSize: 12,
pageButtonItemGap: 5
});
/** /**
* 基础tooltip配置 * 基础tooltip配置
*/ */
...@@ -168,7 +190,7 @@ const getBaseTooltipConfig = () => ({ ...@@ -168,7 +190,7 @@ const getBaseTooltipConfig = () => ({
show: true, show: true,
backgroundColor: '#1890ff', backgroundColor: '#1890ff',
color: '#fff', color: '#fff',
fontSize: 12, fontSize: 14,
padding: [4, 6], padding: [4, 6],
borderRadius: 2 borderRadius: 2
} }
...@@ -178,7 +200,7 @@ const getBaseTooltipConfig = () => ({ ...@@ -178,7 +200,7 @@ const getBaseTooltipConfig = () => ({
borderWidth: 1, borderWidth: 1,
textStyle: { textStyle: {
color: '#333', color: '#333',
fontSize: 12 fontSize: 14
}, },
confine: false, confine: false,
triggerOn: 'mousemove', triggerOn: 'mousemove',
...@@ -230,7 +252,7 @@ const getXAxisConfig = (xAxisData: string[]) => ({ ...@@ -230,7 +252,7 @@ const getXAxisConfig = (xAxisData: string[]) => ({
interval: 0, interval: 0,
rotate: xAxisData.length > 6 ? 45 : 0, rotate: xAxisData.length > 6 ? 45 : 0,
margin: 8, margin: 8,
fontSize: 12 fontSize: 14
} }
}); });
...@@ -241,7 +263,8 @@ const getYAxisConfig = (name?: string) => ({ ...@@ -241,7 +263,8 @@ const getYAxisConfig = (name?: string) => ({
type: 'value' as const, type: 'value' as const,
...(name && { name }), ...(name && { name }),
axisLabel: { axisLabel: {
formatter: (value: number) => formatNumber(value) formatter: (value: number) => formatNumber(value),
fontSize: 14
}, },
axisTick: { axisTick: {
show: true, show: true,
...@@ -253,7 +276,7 @@ const getYAxisConfig = (name?: string) => ({ ...@@ -253,7 +276,7 @@ const getYAxisConfig = (name?: string) => ({
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
width: 1 width: 1,
} }
}, },
splitLine: { splitLine: {
...@@ -273,7 +296,10 @@ const getDualYAxisConfig = (yFields: string[]) => [ ...@@ -273,7 +296,10 @@ const getDualYAxisConfig = (yFields: string[]) => [
...getYAxisConfig(yFields[0]), ...getYAxisConfig(yFields[0]),
position: 'left' as const, position: 'left' as const,
nameTextStyle: { nameTextStyle: {
align: 'right' align: 'center',
fontSize: 14,
fontWeight: 'bold',
color: '#323232'
}, },
splitLine: { lineStyle: { type: 'dashed' as const, color: '#ccc', width: 1 } } splitLine: { lineStyle: { type: 'dashed' as const, color: '#ccc', width: 1 } }
}, },
...@@ -281,7 +307,10 @@ const getDualYAxisConfig = (yFields: string[]) => [ ...@@ -281,7 +307,10 @@ const getDualYAxisConfig = (yFields: string[]) => [
...getYAxisConfig(yFields[1]), ...getYAxisConfig(yFields[1]),
position: 'right' as const, position: 'right' as const,
nameTextStyle: { nameTextStyle: {
align: 'left' align: 'center',
fontSize: 14,
fontWeight: 'bold',
color: '#323232'
}, },
splitLine: { lineStyle: { type: 'solid' as const, color: '#e8e8e8', width: 1 } } splitLine: { lineStyle: { type: 'solid' as const, color: '#e8e8e8', width: 1 } }
} }
...@@ -317,7 +346,7 @@ const createSingleColumnOption = (chartConfig: any): echarts.EChartsOption => { ...@@ -317,7 +346,7 @@ const createSingleColumnOption = (chartConfig: any): echarts.EChartsOption => {
.filter((item: any) => item[chartConfig.groupField] === group) .filter((item: any) => item[chartConfig.groupField] === group)
.map((item: any) => item[chartConfig.yField]); .map((item: any) => item[chartConfig.yField]);
return getBaseSeriesConfig(group, groupData, colors[index % colors.length]); return getBaseSeriesConfig(group, groupData, colors[index % colors.length], 0, xAxisData.length);
}); });
return { return {
...@@ -325,23 +354,7 @@ const createSingleColumnOption = (chartConfig: any): echarts.EChartsOption => { ...@@ -325,23 +354,7 @@ const createSingleColumnOption = (chartConfig: any): echarts.EChartsOption => {
tooltip: { tooltip: {
...getBaseTooltipConfig() ...getBaseTooltipConfig()
}, },
legend: { legend: getBaseLegendConfig(groups),
data: groups,
orient: 'horizontal',
left: 'center',
top: '0',
padding: [15, 20, 20, 25], // 增加四周的padding
itemGap: 15,
type: 'scroll',
textStyle: {
fontSize: 12
},
pageTextStyle: {
fontSize: 10
},
pageIconSize: 12,
pageButtonItemGap: 5
},
xAxis: getXAxisConfig(xAxisData), xAxis: getXAxisConfig(xAxisData),
yAxis: getYAxisConfig(), yAxis: getYAxisConfig(),
series series
...@@ -357,7 +370,7 @@ const createSingleColumnOption = (chartConfig: any): echarts.EChartsOption => { ...@@ -357,7 +370,7 @@ const createSingleColumnOption = (chartConfig: any): echarts.EChartsOption => {
legend: { show: false }, legend: { show: false },
xAxis: getXAxisConfig(xAxisData), xAxis: getXAxisConfig(xAxisData),
yAxis: getYAxisConfig(), yAxis: getYAxisConfig(),
series: [getBaseSeriesConfig(chartConfig.yField, seriesData, colors[0])] series: [getBaseSeriesConfig(chartConfig.yField, seriesData, colors[0], 0, xAxisData.length)]
}; };
} }
}; };
...@@ -377,7 +390,7 @@ const createDualColumnOption = (chartConfig: any): echarts.EChartsOption => { ...@@ -377,7 +390,7 @@ const createDualColumnOption = (chartConfig: any): echarts.EChartsOption => {
.filter((item: any) => item[chartConfig.groupField] === group) .filter((item: any) => item[chartConfig.groupField] === group)
.map((item: any) => item[chartConfig.yFields[0]]); .map((item: any) => item[chartConfig.yFields[0]]);
return getBaseSeriesConfig(`${group} - ${chartConfig.yFields[0]}`, groupData, colors[index % colors.length], 0); return getBaseSeriesConfig(`${group} - ${chartConfig.yFields[0]}`, groupData, colors[index % colors.length], 0, xAxisData.length);
}); });
const series2 = groups.map((group, index) => { const series2 = groups.map((group, index) => {
...@@ -385,7 +398,7 @@ const createDualColumnOption = (chartConfig: any): echarts.EChartsOption => { ...@@ -385,7 +398,7 @@ const createDualColumnOption = (chartConfig: any): echarts.EChartsOption => {
.filter((item: any) => item[chartConfig.groupField] === group) .filter((item: any) => item[chartConfig.groupField] === group)
.map((item: any) => item[chartConfig.yFields[1]]); .map((item: any) => item[chartConfig.yFields[1]]);
return getBaseSeriesConfig(`${group} - ${chartConfig.yFields[1]}`, groupData, colors[(index + 3) % colors.length], 1); return getBaseSeriesConfig(`${group} - ${chartConfig.yFields[1]}`, groupData, colors[(index + 3) % colors.length], 1, xAxisData.length);
}); });
return { return {
...@@ -393,23 +406,7 @@ const createDualColumnOption = (chartConfig: any): echarts.EChartsOption => { ...@@ -393,23 +406,7 @@ const createDualColumnOption = (chartConfig: any): echarts.EChartsOption => {
tooltip: { tooltip: {
...getBaseTooltipConfig() ...getBaseTooltipConfig()
}, },
legend: { legend: getBaseLegendConfig([...series1, ...series2].map(s => s.name)),
data: [...series1, ...series2].map(s => s.name),
orient: 'horizontal',
left: 'center',
top: '0',
padding: [15, 20, 20, 25], // 增加四周的padding
itemGap: 15,
type: 'scroll',
textStyle: {
fontSize: 12
},
pageTextStyle: {
fontSize: 10
},
pageIconSize: 12,
pageButtonItemGap: 5
},
xAxis: getXAxisConfig(xAxisData), xAxis: getXAxisConfig(xAxisData),
yAxis: getDualYAxisConfig(chartConfig.yFields), yAxis: getDualYAxisConfig(chartConfig.yFields),
series: [...series1, ...series2] series: [...series1, ...series2]
...@@ -423,12 +420,12 @@ const createDualColumnOption = (chartConfig: any): echarts.EChartsOption => { ...@@ -423,12 +420,12 @@ const createDualColumnOption = (chartConfig: any): echarts.EChartsOption => {
tooltip: { tooltip: {
...getBaseTooltipConfig() ...getBaseTooltipConfig()
}, },
legend: { data: [chartConfig.yFields[0], chartConfig.yFields[1]] }, legend: getBaseLegendConfig([chartConfig.yFields[0], chartConfig.yFields[1]]),
xAxis: getXAxisConfig(xAxisData), xAxis: getXAxisConfig(xAxisData),
yAxis: getDualYAxisConfig(chartConfig.yFields), yAxis: getDualYAxisConfig(chartConfig.yFields),
series: [ series: [
getBaseSeriesConfig(chartConfig.yFields[0], series1Data, colors[0], 0), getBaseSeriesConfig(chartConfig.yFields[0], series1Data, colors[0], 0, xAxisData.length),
getBaseSeriesConfig(chartConfig.yFields[1], series2Data, colors[1], 1) getBaseSeriesConfig(chartConfig.yFields[1], series2Data, colors[1], 1, xAxisData.length)
] ]
}; };
} }
...@@ -506,6 +503,12 @@ const createChart = () => { ...@@ -506,6 +503,12 @@ const createChart = () => {
return; return;
} }
// 清理之前的图表实例，确保每次数据变化时创建全新实例
if (chartInstance.value) {
chartInstance.value.dispose();
chartInstance.value = null;
}
const chartConfig = formatData(props.chartData); const chartConfig = formatData(props.chartData);
// 根据数据特征自动选择图表类型 // 根据数据特征自动选择图表类型
...@@ -548,7 +551,7 @@ onUnmounted(() => { ...@@ -548,7 +551,7 @@ onUnmounted(() => {
<style scoped> <style scoped>
.message-chart { .message-chart {
margin: 16px 0; margin: 24px 0 16px;
/* 完全自适应，不设置固定高度 */ /* 完全自适应，不设置固定高度 */
/* 确保宽度不超过父容器 */ /* 确保宽度不超过父容器 */
box-sizing: border-box; /* 包含边框和内边距在宽度计算中 */ box-sizing: border-box; /* 包含边框和内边距在宽度计算中 */
...@@ -565,14 +568,13 @@ onUnmounted(() => { ...@@ -565,14 +568,13 @@ onUnmounted(() => {
} }
.chart-container { .chart-container {
border: 1px solid #e8e8e8; border: none;
border-radius: 4px; border-radius: 0;
/* 正常图表保持宽高比自适应 */ aspect-ratio: 3 / 1.5;
aspect-ratio: 3 / 2; /* 宽高比 3:2 */ min-height: 200px;
min-height: 200px; /* 最小高度确保显示效果 */ width: 100%;
width: 100%; /* 确保宽度不超过父容器 */ box-sizing: border-box;
box-sizing: border-box; /* 包含边框在宽度计算中 */ overflow: hidden;
overflow: hidden; /* 防止内容溢出导致滚动条 */
} }
/* 空状态样式 */ /* 空状态样式 */
......
src/views/components/LineChart.vue
View file @ 6c6b90e5
...@@ -87,10 +87,11 @@ const formatNumber = (value: any): string => { ...@@ -87,10 +87,11 @@ const formatNumber = (value: any): string => {
*/ */
const getColors = () => { const getColors = () => {
return [ return [
'#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#5B90F9', '#73DEB3', '#8074FF', '#00CDFE', '#FDDD60', '#FF8B45', '#F478D1', '#FF6F77', '#8D48E4',
'#fc8452', '#9a60b4', '#ea7ccc', '#c23531', '#2f4554', '#61a0a8', '#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2',
'#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#fa541c', '#eb2f96', '#a0d911', '#2f54eb', '#fa8c16', '#52c41a',
'#546570', '#c4ccd3', '#f4eccc', '#76bca0', '#e69d87', '#8dc1a9' '#13c2c2', '#1890ff', '#722ed1', '#faad14', '#f5222d', '#eb2f96',
'#a0d911', '#2f54eb', '#fa8c16', '#52c41a', '#13c2c2', '#1890ff'
]; ];
}; };
...@@ -145,10 +146,10 @@ const getBaseChartConfig = () => ({ ...@@ -145,10 +146,10 @@ const getBaseChartConfig = () => ({
animationDuration: 500, animationDuration: 500,
animationEasing: 'cubicOut' as const, animationEasing: 'cubicOut' as const,
grid: { grid: {
left: '3%', left: '2%',
right: '3%', right: '2%',
bottom: '3%', bottom: '3%',
top: '80px', // 增加顶部间距，为legend留出更多空间 top: '70px', // 增加顶部间距，为legend留出更多空间
containLabel: true containLabel: true
} }
}); });
...@@ -199,7 +200,7 @@ const getBaseTooltipConfig = () => ({ ...@@ -199,7 +200,7 @@ const getBaseTooltipConfig = () => ({
borderWidth: 1, borderWidth: 1,
textStyle: { textStyle: {
color: '#333', color: '#333',
fontSize: 12 fontSize: 14
}, },
confine: false, confine: false,
triggerOn: 'mousemove', triggerOn: 'mousemove',
...@@ -251,7 +252,7 @@ const getXAxisConfig = (xAxisData: string[]) => ({ ...@@ -251,7 +252,7 @@ const getXAxisConfig = (xAxisData: string[]) => ({
interval: 0, interval: 0,
rotate: xAxisData.length > 6 ? 45 : 0, rotate: xAxisData.length > 6 ? 45 : 0,
margin: 8, margin: 8,
fontSize: 12 fontSize: 14
} }
}); });
...@@ -262,7 +263,8 @@ const getYAxisConfig = (name?: string) => ({ ...@@ -262,7 +263,8 @@ const getYAxisConfig = (name?: string) => ({
type: 'value' as const, type: 'value' as const,
...(name && { name }), ...(name && { name }),
axisLabel: { axisLabel: {
formatter: (value: number) => formatNumber(value) formatter: (value: number) => formatNumber(value),
fontSize: 14
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
...@@ -281,7 +283,7 @@ const getYAxisConfig = (name?: string) => ({ ...@@ -281,7 +283,7 @@ const getYAxisConfig = (name?: string) => ({
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
width: 1 width: 1,
} }
} }
}); });
...@@ -294,7 +296,10 @@ const getDualYAxisConfig = (yFields: string[]) => [ ...@@ -294,7 +296,10 @@ const getDualYAxisConfig = (yFields: string[]) => [
...getYAxisConfig(yFields[0]), ...getYAxisConfig(yFields[0]),
position: 'left' as const, position: 'left' as const,
nameTextStyle: { nameTextStyle: {
align: 'right' align: 'center',
fontSize: 14,
fontWeight: 'bold',
color: '#323232'
}, },
splitLine: { lineStyle: { type: 'dashed' as const, color: '#ccc', width: 1 } } splitLine: { lineStyle: { type: 'dashed' as const, color: '#ccc', width: 1 } }
}, },
...@@ -302,7 +307,10 @@ const getDualYAxisConfig = (yFields: string[]) => [ ...@@ -302,7 +307,10 @@ const getDualYAxisConfig = (yFields: string[]) => [
...getYAxisConfig(yFields[1]), ...getYAxisConfig(yFields[1]),
position: 'right' as const, position: 'right' as const,
nameTextStyle: { nameTextStyle: {
align: 'left' align: 'center',
fontSize: 14,
fontWeight: 'bold',
color: '#323232'
}, },
splitLine: { lineStyle: { type: 'solid' as const, color: '#e8e8e8', width: 1 } } splitLine: { lineStyle: { type: 'solid' as const, color: '#e8e8e8', width: 1 } }
} }
...@@ -497,6 +505,12 @@ const createChart = () => { ...@@ -497,6 +505,12 @@ const createChart = () => {
return; return;
} }
// 清理之前的图表实例
if (chartInstance.value) {
chartInstance.value.dispose();
chartInstance.value = null;
}
const chartConfig = formatData(props.chartData); const chartConfig = formatData(props.chartData);
// 根据数据特征自动选择图表类型 // 根据数据特征自动选择图表类型
...@@ -539,7 +553,7 @@ onUnmounted(() => { ...@@ -539,7 +553,7 @@ onUnmounted(() => {
<style scoped> <style scoped>
.message-chart { .message-chart {
margin: 16px 0; margin: 24px 0 16px;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -554,16 +568,15 @@ onUnmounted(() => { ...@@ -554,16 +568,15 @@ onUnmounted(() => {
} }
.chart-container { .chart-container {
border: 1px solid #e8e8e8; border: none;
border-radius: 4px; border-radius: 0;
aspect-ratio: 3 / 2; aspect-ratio: 3 / 1.5;
min-height: 200px; min-height: 200px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow: visible !important; /* 确保tooltip可以正常显示 */ overflow: visible !important;
position: relative; position: relative;
z-index: 1; z-index: 1;
/* 确保tooltip可以正常显示 */
isolation: isolate; isolation: isolate;
} }
......
src/views/components/PieChart.vue 0 → 100644
View file @ 6c6b90e5
<template>
<div class="pie-chart-container">
<div class="chart-title">{{ title }}</div>
<div v-if="isEmpty" class="chart-empty">
<div class="empty-icon">📊</div>
<div class="empty-text">暂无数据</div>
<div class="empty-desc">当前查询条件下没有找到相关数据</div>
</div>
<div v-else ref="chartContainer" class="chart-container"></div>
<div v-if="error" class="chart-error">{{ error }}</div>
</div>
</template>
<script setup lang="ts">
import { ref, shallowRef, watch, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
// 定义组件属性 - 与ChartComponent保持一致
interface Props {
chartData: any;
title?: string;
width?: number | string;
height?: number | string;
}
const props = withDefaults(defineProps<Props>(), {
title: '饼图',
width: '100%',
height: 'auto'
});
const chartContainer = ref<HTMLElement>();
// 使用shallowRef避免Vue 3 Proxy代理与ECharts的兼容性问题
const chartInstance = shallowRef<echarts.ECharts | null>(null);
const error = ref<string>('');
const isEmpty = ref<boolean>(false);
// ========== 工具函数抽离 ==========
/**
* 检查数据是否为空
*/
const checkDataEmpty = (data: any): boolean => {
if (!data) return true;
if (!data.rows || !Array.isArray(data.rows)) return true;
if (data.rows.length === 0) return true;
// 检查所有行是否都是空数据
const hasValidData = data.rows.some((row: any) => {
if (data.indexFields && Array.isArray(data.indexFields)) {
return data.indexFields.some((field: string) => {
const value = row[field];
return value !== null && value !== undefined && value !== '' && !isNaN(Number(value));
});
}
return false;
});
return !hasValidData;
};
/**
* 数字格式化工具
*/
const formatNumber = (value: any): string => {
if (value === null || value === undefined || isNaN(value) || value === '') {
return '0';
}
const numValue = Number(value);
if (isNaN(numValue)) return '0';
if (numValue === 0) return '0';
const roundedValue = Math.ceil(numValue * 100) / 100;
if (Math.abs(roundedValue) >= 100000000) {
return `${(roundedValue / 100000000).toFixed(2)}亿`;
} else if (Math.abs(roundedValue) >= 10000) {
return `${(roundedValue / 10000).toFixed(2)}万`;
} else {
return roundedValue.toFixed(2);
}
};
/**
* 获取颜色方案 - 使用ECharts内置颜色方案
*/
const getColors = () => {
return [
'#5B90F9', '#73DEB3', '#8074FF', '#00CDFE', '#FDDD60', '#FF8B45', '#F478D1', '#FF6F77', '#8D48E4',
'#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2',
'#fa541c', '#eb2f96', '#a0d911', '#2f54eb', '#fa8c16', '#52c41a',
'#13c2c2', '#1890ff', '#722ed1', '#faad14', '#f5222d', '#eb2f96',
'#a0d911', '#2f54eb', '#fa8c16', '#52c41a', '#13c2c2', '#1890ff'
];
};
/**
* 数据格式化工具
*/
const formatData = (data: any) => {
if (data && data.rows && Array.isArray(data.rows) && data.dimFields && data.indexFields) {
const { rows, dimFields, indexFields } = data;
if (rows.length === 0) {
return { isEmpty: true, data: [], chartType: 'pie' };
}
const chartConfig: any = { data: rows, chartType: 'pie' };
// 饼图只需要第一个维度字段
if (dimFields.length >= 1) {
chartConfig.dimField = dimFields[0];
}
// 饼图只需要第一个指标字段
if (indexFields.length >= 1) {
chartConfig.indexField = indexFields[0];
}
return chartConfig;
} else {
throw new Error('不支持的数据格式，请使用新的结构化数据格式');
}
};
// ========== 图表配置生成器 ==========
/**
* 基础图表配置
*/
const getBaseChartConfig = () => ({
responsive: true,
animation: true,
animationDuration: 500,
animationEasing: 'cubicOut' as const
});
/**
* 基础tooltip配置 - 简化版本，确保兼容性
*/
const getBaseTooltipConfig = () => ({
trigger: 'item',
backgroundColor: 'rgba(255, 255, 255, 0.95)',
borderColor: '#e8e8e8',
borderWidth: 1,
textStyle: {
color: '#333',
fontSize: 14
},
formatter: function(params: any) {
if (!params) return '';
const { name, value, percent } = params;
const formattedValue = formatNumber(value);
return `<b>${name}</b><br/>${formattedValue} (${percent}%)`;
}
});
/**
* 创建饼图配置
*/
const createPieOption = (chartConfig: any) => {
const colors = getColors();
const { data, dimField, indexField } = chartConfig;
// 数据聚合：按维度字段分组，对指标字段求和
const aggregatedData: { [key: string]: number } = {};
data.forEach((item: any) => {
const category = item[dimField] || '未知';
const value = Number(item[indexField]) || 0;
if (value > 0) {
if (!aggregatedData[category]) {
aggregatedData[category] = 0;
}
aggregatedData[category] += value;
}
});
// 转换为饼图数据格式
const pieData = Object.entries(aggregatedData).map(([name, value]) => ({
name,
value
}));
// 按值从大到小排序，确保大块在前
pieData.sort((a, b) => b.value - a.value);
// 如果数据项太多，只显示前10个，其他合并为"其他"
if (pieData.length > 10) {
const top10 = pieData.slice(0, 10);
const othersValue = pieData.slice(10).reduce((sum, item) => sum + item.value, 0);
if (othersValue > 0) {
top10.push({
name: '其他',
value: othersValue
});
}
return createPieChartOption(top10);
}
return createPieChartOption(pieData);
};
/**
* 创建实际的饼图配置
*/
const createPieChartOption = (pieData: any[]) => {
const colors = getColors();
if (pieData.length === 0) {
return {
...getBaseChartConfig(),
series: []
};
}
// 默认选中第一个数据项
const selectedData = pieData.length > 0 ? { [pieData[0].name]: true } : {};
// 根据数据项数量调整标签布局
const isManyItems = pieData.length > 6;
// 获取响应式布局配置
const responsiveLayout = getResponsiveLayout(isManyItems);
return {
...getBaseChartConfig(),
tooltip: getBaseTooltipConfig(),
legend: {
orient: 'horizontal',
top: 0,
left: 'center',
type: 'scroll',
textStyle: {
fontSize: 12
},
selected: selectedData,
// 数据项多时调整图例位置
...(isManyItems && {
orient: 'vertical',
right: 5,
top: 'middle',
height: '80%'
})
},
series: [{
name: props.title,
type: 'pie',
radius: responsiveLayout.radius, // 使用响应式半径
center: ['50%', '50%'], // 始终居中
avoidLabelOverlap: true,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
fontSize: 14,
color: '#333',
fontWeight: 'normal',
// 优化标签位置
position: isManyItems ? 'outside' : 'outside',
alignTo: 'edge',
margin: 10,
formatter: (params: any) => {
const { percent } = params;
return `${percent}%`;
}
},
labelLine: {
show: true,
length: isManyItems ? 5 : 8, // 缩短标签线第一段长度
length2: isManyItems ? 5 : 8, // 缩短标签线第二段长度
smooth: true,
lineStyle: {
color: '#999',
width: 0.5, // 减小线宽
type: 'solid'
},
// 优化标签线角度
minTurnAngle: 10,
maxSurfaceAngle: 20
},
emphasis: {
label: {
show: true,
fontSize: isManyItems ? 12 : 14,
fontWeight: 'bold',
color: '#000'
},
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: pieData,
color: colors,
selectedMode: 'single',
selectedOffset: 5, // 减小选中偏移量，避免庙边效果
// 使用响应式布局
top: '10%',
bottom: '5%',
left: responsiveLayout.left,
right: responsiveLayout.right
}]
};
};
// ========== 响应式处理逻辑 ==========
// 响应式定时器引用
let resizeTimer: NodeJS.Timeout | null = null;
/**
* 创建响应式处理函数
*/
const createResizeHandler = () => {
return () => {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(() => {
if (chartInstance.value && chartContainer.value) {
chartInstance.value.resize();
}
}, 100);
};
};
/**
* 初始化图表大小监听
*/
const initChartResizeListener = () => {
const handleResize = createResizeHandler();
// 窗口大小变化监听
window.addEventListener('resize', handleResize);
// ResizeObserver监听
if (typeof ResizeObserver !== 'undefined' && chartContainer.value) {
const resizeObserver = new ResizeObserver(handleResize);
resizeObserver.observe(chartContainer.value);
onUnmounted(() => {
resizeObserver.disconnect();
});
}
// 清理函数
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
// 清理定时器
if (resizeTimer) {
clearTimeout(resizeTimer);
resizeTimer = null;
}
});
};
// ========== 响应式布局函数 ==========
/**
* 根据屏幕宽度获取布局配置
*/
const getResponsiveLayout = (isManyItems: boolean) => {
const screenWidth = window.innerWidth;
if (screenWidth < 768) { // 小屏幕
return {
left: '5%',
right: '5%',
radius: isManyItems ? ['25%', '50%'] : ['35%', '60%']
};
} else if (screenWidth < 1200) { // 中等屏幕
return {
left: '25%',
right: '25%',
radius: isManyItems ? ['30%', '55%'] : ['40%', '65%']
};
} else { // 大屏幕
return {
left: '30%',
right: '30%',
radius: isManyItems ? ['35%', '60%'] : ['45%', '70%']
};
}
};
// ========== 主图表创建函数 ==========
/**
* 创建ECharts图表
*/
const createChart = () => {
if (!chartContainer.value) return;
// 检查数据是否为空
isEmpty.value = checkDataEmpty(props.chartData);
if (isEmpty.value) {
// 清理之前的图表实例
if (chartInstance.value) {
chartInstance.value.dispose();
chartInstance.value = null;
}
error.value = '';
return;
}
// 清理之前的图表实例
if (chartInstance.value) {
chartInstance.value.dispose();
chartInstance.value = null;
}
const chartConfig = formatData(props.chartData);
// 创建ECharts实例
chartInstance.value = echarts.init(chartContainer.value);
// 生成图表配置
const option = createPieOption(chartConfig);
// 设置图表选项
chartInstance.value.setOption(option);
error.value = '';
// 初始化响应式监听
initChartResizeListener();
};
// ========== 生命周期和响应式 ==========
// 监听数据变化
watch(() => props.chartData, createChart);
onMounted(() => {
nextTick(createChart);
});
// 组件卸载时清理
onUnmounted(() => {
if (chartInstance.value) {
chartInstance.value.dispose();
}
});
</script>
<style scoped>
.pie-chart-container {
margin: 16px 0;
box-sizing: border-box;
width: 100% !important;
max-width: 100% !important;
display: flex;
flex-direction: column;
flex: 1;
}
.chart-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
width: 100%;
box-sizing: border-box;
text-align: center; /* 标题居中 */
}
.chart-container {
aspect-ratio: 3 / 1; /* 饼图保持正方形比例 */
min-height: 350px;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
overflow: visible !important; /* 确保tooltip可以正常显示 */
position: relative;
z-index: 1;
/* 确保tooltip可以正常显示 */
isolation: isolate;
flex: 1;
}
/* 空状态样式 */
.chart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 350px;
border: 1px solid #e8e8e8;
border-radius: 4px;
background-color: #fafafa;
color: #999;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.empty-icon {
font-size: 48px;
margin-bottom: 16px;
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #e8e8e8;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.empty-text {
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
color: #666;
text-align: center;
max-width: 100%;
}
.empty-desc {
font-size: 14px;
color: #999;
text-align: center;
max-width: 100%;
}
.chart-error {
padding: 10px;
text-align: center;
color: #f5222d;
background-color: #fff2f0;
border: 1px solid #ffccc7;
border-radius: 4px;
margin-top: 10px;
}
</style>
\ No newline at end of file
src/views/components/style.less
View file @ 6c6b90e5
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
@gray-4: #cccccc; @gray-4: #cccccc;
@gray-5: #999999; @gray-5: #999999;
@gray-6: #666666; @gray-6: #666666;
@gray-7: #333333; @gray-7: #323232;
@success-color: #52c41a; @success-color: #52c41a;
@error-color: #f5222d; @error-color: #f5222d;
@warning-color: #faad14; @warning-color: #faad14;
...@@ -70,6 +70,8 @@ li { ...@@ -70,6 +70,8 @@ li {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
max-width: 1000px;
margin: 0 auto;
// 居中介绍页面样式 // 居中介绍页面样式
.chat-intro-center { .chat-intro-center {
...@@ -451,15 +453,14 @@ li { ...@@ -451,15 +453,14 @@ li {
:deep(.message-table) { :deep(.message-table) {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
margin: 8px 0; margin: 4px 0;
// 表格容器 // 表格容器
.table-container { .table-container {
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
border-radius: 8px; border-bottom: 1px solid #f0f0f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
// 滚动条样式 // 滚动条样式
&::-webkit-scrollbar { &::-webkit-scrollbar {
...@@ -488,7 +489,7 @@ li { ...@@ -488,7 +489,7 @@ li {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
min-width: 80px; min-width: 80px;
height: 40px; height: 35px;
vertical-align: middle; vertical-align: middle;
} }
...@@ -520,8 +521,6 @@ li { ...@@ -520,8 +521,6 @@ li {
text-align: right; text-align: right;
padding-left: 8px; padding-left: 8px;
padding-right: 12px; padding-right: 12px;
font-family: 'Courier New', monospace;
font-weight: 500;
} }
.trend-cell { .trend-cell {
...@@ -533,11 +532,11 @@ li { ...@@ -533,11 +532,11 @@ li {
th { th {
background: linear-gradient(135deg, @primary-color 0%, @primary-hover 100%); background: linear-gradient(135deg, @primary-color 0%, @primary-hover 100%);
color: @white; color: @white;
font-weight: 600; font-weight: 400;
padding: 12px 8px; padding: 6px 8px;
font-size: 14px; font-size: 14px;
border-right: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.2);
height: 40px; height: 35px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -595,6 +594,8 @@ li { ...@@ -595,6 +594,8 @@ li {
.table-footer { .table-footer {
margin-top: 12px; margin-top: 12px;
font-size: 14px; font-size: 14px;
text-align: right;
margin-right: 8px;
span { span {
color:@primary-color; color:@primary-color;
......
src/views/components/utils/contentTemplateService.ts
View file @ 6c6b90e5
...@@ -292,22 +292,22 @@ export class ContentTemplateService { ...@@ -292,22 +292,22 @@ export class ContentTemplateService {
switch (contentType) { switch (contentType) {
case 2: // 表格数据 case 2: // 表格数据
const { rows } = messageContent; const { rows } = messageContent;
// 表格数据处理 // // 表格数据处理
updatedResponse.contentBlocks.push({ // updatedResponse.contentBlocks.push({
content: templateTools?.tableTemplate ? templateTools.tableTemplate(rows) : this.templates.table(rows), // content: templateTools?.tableTemplate ? templateTools.tableTemplate(rows) : this.templates.table(rows),
hasThinkBox: false, // hasThinkBox: false,
thinkContent: '', // thinkContent: '',
thinkBoxExpanded: false, // thinkBoxExpanded: false,
}); // });
// 图表数据处理 // // 图表数据处理
updatedResponse.contentBlocks.push({ // updatedResponse.contentBlocks.push({
content: '', // content: '',
hasThinkBox: false, // hasThinkBox: false,
thinkContent: '', // thinkContent: '',
thinkBoxExpanded: false, // thinkBoxExpanded: false,
chartData: messageContent, // chartData: messageContent,
chartType: CHART_TYPES.COLUMN, // chartType: CHART_TYPES.COLUMN,
}); // });
// 图表数据处理 // 图表数据处理
updatedResponse.contentBlocks.push({ updatedResponse.contentBlocks.push({
content: '', content: '',
......
src/views/components/utils/sseService.ts
View file @ 6c6b90e5
...@@ -47,7 +47,7 @@ export class SSEService { ...@@ -47,7 +47,7 @@ export class SSEService {
// 初始化SSE连接 // 初始化SSE连接
public initSSE(dialogSessionId: string): void { public initSSE(dialogSessionId: string): void {
try { try {
const url = `${this.config.apiBaseUrl}/aiService/sse/join/${this.config.params?.stage || ''}?app-id=${this.config.params?.appId || ''}&dialog-session-id=${dialogSessionId || ''}`; const url = `${this.config.apiBaseUrl}${import.meta.env.VITE_SSE_PATH}/sse/join/${this.config.params?.stage || ''}?app-id=${this.config.params?.appId || ''}&dialog-session-id=${dialogSessionId || ''}`;
this.eventSource = new EventSourcePolyfill(url, { this.eventSource = new EventSourcePolyfill(url, {
headers: { headers: {
Token: this.config.token || '', Token: this.config.token || '',
......
vite.config.js
View file @ 6c6b90e5
...@@ -10,6 +10,7 @@ export default defineConfig(({ mode }) => { ...@@ -10,6 +10,7 @@ export default defineConfig(({ mode }) => {
// 清理API基础URL，移除末尾的斜杠 // 清理API基础URL，移除末尾的斜杠
const apiBaseUrl = (env.VITE_API_BASE_URL).replace(/\/+$/, ''); const apiBaseUrl = (env.VITE_API_BASE_URL).replace(/\/+$/, '');
const basePath = env.VITE_BASE_PATH; const basePath = env.VITE_BASE_PATH;
const agentPath = env.VITE_SSE_PATH;
return { return {
base: basePath, base: basePath,
...@@ -28,21 +29,21 @@ export default defineConfig(({ mode }) => { ...@@ -28,21 +29,21 @@ export default defineConfig(({ mode }) => {
] ]
}, },
proxy: { proxy: {
// 同时配置两种路径的代理 // // 同时配置两种路径的代理
'/pedapi': { // '/pedapi': {
target: apiBaseUrl, // target: apiBaseUrl,
changeOrigin: true, // changeOrigin: true,
secure: false, // secure: false,
configure: (proxy, options) => { // configure: (proxy, options) => {
proxy.on('error', (err, req, res) => { // proxy.on('error', (err, req, res) => {
console.log('代理错误:', err); // console.log('代理错误:', err);
}); // });
proxy.on('proxyReq', (proxyReq, req, res) => { // proxy.on('proxyReq', (proxyReq, req, res) => {
console.log('发送请求到:', options.target); // console.log('发送请求到:', options.target);
}); // });
} // }
}, // },
'/aiService': { [agentPath]: {
target: apiBaseUrl, target: apiBaseUrl,
changeOrigin: true, changeOrigin: true,
secure: false, secure: false,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment