接口文档,给出已经算好的,上限、上四分位线、中位数、下线、下四分位线
{
"delays_low": 1206.5,
"delays_max": 2142,
"delays_med": 1429,
"delays_min": 1136,
"delays_num": 12,
"delays_pth": "/api/workflow/reqform/loadForm",
"delays_upp": 1710.75
},
echart中的例子:一开始用的
后来后端说,不需要显示离散数据,只需要把计算出来的五个数据,显示在箱型图上就行
于是去找echart的官方案例
Documentation - Apache ECharts
这里没有显示离散数据,数据是按照上限、上四分位线、中位数、下线、下四分位线这样的顺序排的,没有在前端做进一步计算
<template>
<div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15">
<div class="flex gap-4 mb-4">
<span style="margin-top: 5px;color: #606266;">加载最小时长:</span>
<el-input v-model="state.tableData.param.miat" size="default" placeholder="加载最小时长" style="max-width: 180px"> </el-input>
<span style="margin-left: 30px;margin-top: 5px;color: #606266;">加载最大时长:</span>
<el-input v-model="state.tableData.param.maat" size="default" placeholder="加载最大时长" style="max-width: 180px"> </el-input>
<el-button size="default" type="primary" class="ml10" @click="changeEchart">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
</div>
</div>
<div ref="EcharRef" style="width: 100%;height: 500px;">
</div>
<el-pagination
@size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
:pager-count="5"
:page-sizes="[5,10, 20, 30]"
v-model:current-page="state.tableData.param.pageNum"
background
v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
</el-pagination>
</div>
<!-- <RoleDialog ref="roleDialogRef" @refresh="getTableData()" />-->
</div>
</template>
<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive,Ref, onMounted, ref ,nextTick} from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { markRaw } from 'vue';
import * as echarts from 'echarts';
import {getDst, getGitee, getDHCC, getLocat} from '/@/api/cec/bdst';
// import request from '/@/utils/request';
// import dataTool from "echarts/extension/dataTool";
// echarts.dataTool=require('echarts/dist/extension/dataTool.js')
// 引入组件
// const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
// 定义变量内容
// const roleDialogRef = ref();
const echart=reactive({
data: [
[1206.5, 2142, 1429, 1136, 1710.75],
[1041, 2280, 1149, 1023, 1883],
[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
],
})
const state = reactive<any>({
tableData: {
data: [],
total: 0,
loading: false,
xAxisArr:[],
delaysPth:[],
dataSet:[],
param: {
search: '',
pageNum: 1,
pageSize: 5,
miat:null,
maat:null,
},
},
});
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
changeEchart();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
changeEchart();
};
const EcharRef=ref();
// const EchartObj = markRaw(echarts.init(EcharRef.value));
const option = ref(
{
title: [
{
text: '时延分布',
left: 'center'
},
{
//text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
borderColor: '#999',
borderWidth: 1,
textStyle: {
fontWeight: 'normal',
fontSize: 14,
lineHeight: 20
},
left: '10%',
top: '90%'
}
],
/*dataset: [
{
source: echart.data
},
{
transform: {
type: 'boxplot',
config: {
itemNameFormatter: function (params:any) {
//return 'expr ' + params.value;
return state.tableData.xAxisArr[params.value]
}
}
//config: { itemNameFormatter: 'expr {value}' }
}
},
{
fromDatasetIndex: 1,
fromTransformResult: 1
}
],*/
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
},
formatter: function (param:any,index:any) {
let i=index.replace("item_boxplot_","");
return [
' 延迟:' + state.tableData.xAxisArr[i] + ' 次 ',
'上限: ' + param.data[5]+' ms',
'上四分位数: ' + param.data[4]+' ms',
'中位数: ' + param.data[3]+' ms',
'下四分位数: ' + param.data[2]+' ms',
'下限: ' + param.data[1]+' ms',
'请求路径:'+state.tableData.delaysPth[i]
].join('<br/>');
}
},
grid: {
left: '10%',
right: '10%',
bottom: '5%'
},
xAxis: {
type: 'category',
name: '次',
//data: ['1月', '2月', '3月', '4月', '5月', '6月'],
boundaryGap: true,
nameGap: 30,
splitArea: {
show: false
},
axisLabel: {
formatter: function (value:any) {
return state.tableData.xAxisArr[value]
},//"expr {value}"
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
name: '毫秒 ms',
splitArea: {
show: true
}
},
series: [
{
name: 'boxplot',
type: 'boxplot',
datasetIndex: 1,
data: [
/*[655, 850, 940, 980, 1070],
[760, 800, 845, 885, 960],
[780, 840, 855, 880, 940],
[720, 767.5, 815, 865, 920],
[3, 3, 4, 4,6]*/
] as any[],
}/*,
{
name: 'outlier',
type: 'scatter',
datasetIndex: 2
}*/
]
}
);
let myChart:any = null;
//绘制 箱盒图
// const drawChart = () => {
//
// option.value && myChart.setOption(option.value);
// window.onresize = function () { // 自适应大小
// myChart.resize();
// }
// }
//获取数据 echart数据
const changeEchart = async() => {
state.tableData.param.miat=state.tableData.param.miat==''?null:state.tableData.param.miat;
state.tableData.param.maat=state.tableData.param.maat==''?null:state.tableData.param.maat;
//分页 + 查询条件
/* let result={
"code": 0,
"data": {
"info": [
{
"delays_low": 1206.5,
"delays_max": 2142,
"delays_med": 1429,
"delays_min": 1136,
"delays_num": 12,
"delays_pth": "/api/workflow/reqform/loadForm",
"delays_upp": 1710.75
},
{
"delays_low": 1041,
"delays_max": 2280,
"delays_med": 1149,
"delays_min": 1023,
"delays_num": 9,
"delays_pth": "/mobilemode/mobile/server.jsp",
"delays_upp": 1883
},
{
"delays_low": 3,
"delays_max": 6,
"delays_med": 4,
"delays_min": 3,
"delays_num": 96,
"delays_pth": "/mobilemode/mobile/server.jsp",
"delays_upp": 4
}
],
"page": 1,
"size": 2,
"tota": 17
},
"msgs": "ok"
}
;*/
//
let result= await getDst({size:state.tableData.param.pageSize,page:state.tableData.param.pageNum,miat:state.tableData.param.miat,maat:state.tableData.param.maat});
const {code,data,msgs}=result;
state.tableData.total=data.tota;
let bigArr:any[]=[];
let numArr:any[]=[];
let pathArr:any[]=[];
if(code==0){
data.info.forEach((item:any)=>{
let arrItem:any[]=[];
arrItem.push(item.delays_min);
arrItem.push(item.delays_low);
arrItem.push(item.delays_med);
arrItem.push(item.delays_upp);
arrItem.push(item.delays_max);
bigArr.push(arrItem)
numArr.push(item.delays_num);
pathArr.push(item.delays_pth);
})
state.tableData.xAxisArr=numArr;
state.tableData.delaysPth=pathArr;
}
// option.value.dataset[0].source=bigArr;
option.value.series[0].data=bigArr;
state.tableData.dataSet=bigArr;
myChart.setOption(option.value, true)
};
// 页面加载时
onMounted(() => {
// getDataList();
// //5.创建echarts初始化对象
// const myEcharts = echarts.init(EcharRef.value);
//6.校验表结构是否存在,存在就渲染
// EchartObj.setOption(option);
// 初始化ECharts实例
nextTick(() => {
myChart = echarts.init(EcharRef.value);
changeEchart()
window.onresize = function () { // 自适应大小
myChart.resize();
}
})
});
</script>
<style scoped lang="scss">
.system-role-container {
.system-role-padding {
padding: 15px;
.el-table {
flex: 1;
}
}
}
</style>