Skip to content

B
bigDataSystem
Commit 7e295b4a authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改API监控

parent 38782e2c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 574 additions and 146 deletions
src/views/dataSharingAndExchange/ApiMonitor/RightContent4.vue
View file @ 7e295b4a
<template>
<Card :loading="loading">
4444
</Card>
<div class="charts-container">
<div class="header">
<span>API调用统计</span>
</div>
<div class="charts">
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Tag, Card,Select } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {} from "./ApiMonitor.data";
import {} from "./ApiMonitorData";
import Icon from '@/components/Icon/Icon.vue';
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import {
totalApiData,
totalApiFailedData,
totalApiSucessData,
totalGetApiData,
totalPostApiData,
} from '@/views/dataSharingAndExchange/ApiMonitor/ApiMonitorData';
onMounted(() => {
{
// 获取图表容器
const chart1Container = document.getElementById('chart1');
const chart2Container = document.getElementById('chart2');
// 初始化图表实例
const chart1Instance = echarts.init(chart1Container);
const chart2Instance = echarts.init(chart2Container);
// 设置图表选项
chart1Instance.setOption({
title: {
text: 'API调用统计', // 修改了标题文字
},
legend: {
data: ['总量', '成功', '失败'],
top: '8%', // 图例位置调整
left: '5%',
},
xAxis: {
type: 'category',
boundaryGap: false, // 坐标轴两边留白策略
data: totalApiData.map((item) => item.date), // 假设每个数据点有日期属性
axisLabel: {
rotate: 45, // 旋转x轴标签以避免重叠
},
},
yAxis: {
min: 0,
max: 5000,
splitNumber: 5,
nameTextStyle: {
padding: [0, 0, 10, 0], // 调整y轴名称与轴线的距离
},
},
series: [
{
name: '总量',
type: 'line',
color: '#67a6f1',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(173,204,236,0.8)', // 顶部颜色较深
},
{
offset: 1,
color: 'rgba(173,204,236,0)', // 底部颜色透明
},
],
global: false,
},
},
data: totalApiData.map((item) => item.value),
},
{
name: '成功',
type: 'line',
color: '#6fe3e3',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(153,236,233,0.8)', // 顶部颜色较深
},
{
offset: 1,
color: 'rgba(153,236,233,0)', // 底部颜色透明
},
],
global: false,
},
},
data: totalApiSucessData.map((item) => item.value),
},
{
name: '失败',
type: 'line',
color: '#90ed7d',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(144,237,125,0.8)', // 顶部颜色较深
},
{
offset: 1,
color: 'rgba(144,237,125,0)', // 底部颜色透明
},
],
global: false,
},
},
data: totalApiFailedData.map((item) => item.value),
},
],
});
chart2Instance.setOption({
title: {
text: '请求方式调用量', // 修改了标题文字
},
legend: {
data: ['Get', 'Post'],
top: '8%', // 图例位置调整
left: '5%',
},
xAxis: {
type: 'category',
boundaryGap: false, // 坐标轴两边留白策略
data: totalApiData.map((item) => item.date), // 假设每个数据点有日期属性
axisLabel: {
rotate: 45, // 旋转x轴标签以避免重叠
},
},
yAxis: {
min: 0,
max: 500,
splitNumber: 5,
nameTextStyle: {
padding: [0, 0, 10, 0], // 调整y轴名称与轴线的距离
},
},
series: [
{
name: 'Get',
type: 'line',
color: '#f3a770',
areaStyle: {
color: {
type: 'linear', // 渐变类型，可选 'linear' 或 'radial'
x: 0, // 渐变起始位置，x轴方向
y: 0, // 渐变起始位置，y轴方向
x2: 0, // 渐变结束位置，x轴方向
y2: 1, // 渐变结束位置，y轴方向
colorStops: [
// 颜色停止位
{
offset: 0,
color: 'rgba(246,208,170,0.5)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(246,208,170,0)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: totalGetApiData.map((item) => item.value),
},
{
name: 'Post',
type: 'line',
color: '#ce9be5',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(212,184,229,0.5)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(212,184,229,0)', // 100% 处的颜色
},
],
global: false,
},
},
data: totalPostApiData.map((item) => item.value),
},
],
});
}
});
</script>
<style lang="less" scoped>
.charts-container {
background-color: white; /* 设置容器背景为白色 */
padding: 20px; /* 给容器添加内边距 */
border-radius: 10px; /* 可选：给容器添加圆角 */
width: 100%; /* 确保容器宽度适应父级元素 */
}
.header {
font-size: 20px;
margin-bottom: 20px;
text-align: left;
color: #333;
}
.charts {
display: flex;
justify-content: space-between;
gap: 20px;
}
.chart {
width: calc(50% - 10px); /* 确保两个图表并排显示 */
height: 400px;
background-color: transparent; /* 使图表的背景透明 */
}
</style>
src/views/dataSharingAndExchange/ApiMonitor/RightContent5.vue
View file @ 7e295b4a
<template>
<Card :loading="loading">
5555
</Card>
<div class="charts-container">
<div class="header">
<span>API调用统计</span>
</div>
<div class="charts">
<div id="chart3" class="chart"></div>
<div id="chart4" class="chart"></div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Tag, Card,Select } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {} from "./ApiMonitor.data";
import {} from "./ApiMonitorData";
import Icon from '@/components/Icon/Icon.vue';
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import { fieldChangeData, tableChangeData } from '@/views/metadata/metadataData';
onMounted(() => {
{
// 获取图表容器
const chart3Container = document.getElementById('chart3');
const chart4Container = document.getElementById('chart4');
// 初始化图表实例
const chart3Instance = echarts.init(chart3Container);
const chart4Instance = echarts.init(chart4Container);
// 设置图表选项
chart3Instance.setOption({
title: {
text: '数据表变更趋势图',
},
tooltip: {},
xAxis: {
data: tableChangeData.map((item) => item.date),
boundaryGap: false, // 数据点与标签对齐
},
yAxis: {
min: 0, // 设置 Y 轴的最小值
max: 250,
splitNumber: 5,
},
series: [
{
name: '数据表变更',
type: 'line',
color: '#cacaec',
areaStyle: { color: '#dcd4ec' },
data: tableChangeData.map((item) => item.value),
},
],
});
chart4Instance.setOption({
title: {
text: '字段变更趋势图',
},
tooltip: {},
xAxis: {
// axisLabel: {
// interval: 0, // 强制显示所有标签
// },
data: fieldChangeData.map((item) => item.date),
boundaryGap: false, // 数据点与标签对齐
},
yAxis: {
min: 0, // 设置 Y 轴的最小值
// max: 1000,
splitNumber: 5,
},
series: [
{
name: '字段变更',
type: 'line',
color: '#f9e1c1',
areaStyle: { color: '#fbf0e0' },
data: fieldChangeData.map((item) => item.value),
},
],
});
}
});
</script>
<style lang="less" scoped>
.charts-container {
background-color: white; /* 设置容器背景为白色 */
padding: 20px; /* 给容器添加内边距 */
border-radius: 10px; /* 可选：给容器添加圆角 */
width: 100%; /* 确保容器宽度适应父级元素 */
}
.header {
font-size: 20px;
margin-bottom: 20px;
text-align: left;
color: #333;
}
.charts {
display: flex;
justify-content: space-between;
gap: 20px;
}
.chart {
width: calc(50% - 10px); /* 确保两个图表并排显示 */
height: 400px;
background-color: transparent; /* 使图表的背景透明 */
}
</style>
Markdown is supported
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