1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template>
<BasicModal
width="80%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<template #footer>
<a-button type="primary" @click="handleSubmit">关闭</a-button>
</template>
<div class="flex">
<BasicForm @register="registerForm" class="w-1/5 xl:w-1/5">
<template #formFooter>
<a-button type="primary" @click="handleFormSubmit" style="margin-left: 100px"
>提交</a-button
>
</template>
</BasicForm>
<div class="w-4/5 xl:w-4/5">
<div class="charts-container1">
<div class="chart" id="chart"></div>
</div>
<a-button type="primary" @click="handleDownload" style="margin-left: 100px"
>下载图表</a-button
>
</div>
</div>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicForm, useForm } from '@/components/Form';
import { resultViewSchema } from '@/views/scriptDevelopment/sqlDevelopment/data';
import * as echarts from 'echarts';
import { chartData } from '@/views/scriptDevelopment/sqlDevelopment/sqlDevelopmentData';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { resetFields }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: resultViewSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
initCharts();
await resetFields();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
function initCharts() {
// 获取图表容器
const chartContainer = document.getElementById('chart');
console.log('1111111', chartContainer);
// 初始化图表实例
const chartInstance = echarts.init(chartContainer);
chartInstance.setOption({
title: {
text: '柱状图',
},
tooltip: {},
xAxis: {
type: 'category',
data: chartData.map((item) => item.name),
axisLabel: {
interval: 0, // 强制显示所有标签
rotate: 30, // 旋转标签防止重叠
},
},
legend: {
orient: 'horizontal', // 图例项水平排列
left: 'left', // 图例放置于底部中心位置
top: 'center', // 图例放置于图表的底部
},
yAxis: {
type: 'value',
min: 0, // 设置 Y 轴的最小值
max: 8,
splitNumber: 0.5,
},
series: [
{
color: '#87b078',
name: 'id',
type: 'bar',
data: chartData.map((item) => item.id),
},
],
});
}
async function handleSubmit() {
closeModal();
}
async function handleFormSubmit() {
createMessage.success('提交成功');
}
async function handleDownload() {
createMessage.success('下载成功');
}
</script>
<style lang="scss" scoped>
.charts-container1 {
display: flex;
justify-content: space-between;
gap: 20px;
}
.chart {
width: 100%;
height: 350px;
background-color: white;
}
</style>