VUE3+echart+箱型图

已于 2024-07-12 13:07:58 修改
阅读量381 收藏 4
点赞数 6
文章标签： 前端 javascript 开发语言
于 2024-07-12 11:41:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28323573/article/details/140374899
版权

接口文档，给出已经算好的，上限、上四分位线、中位数、下线、下四分位线

{
                "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中的例子：一开始用的

Examples - Apache ECharts

后来后端说，不需要显示离散数据，只需要把计算出来的五个数据，显示在箱型图上就行

于是去找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>
土耳其的猫
关注
通过Echarts在Vue项目中绘制一个箱线图
郭宝的博客
08-16 2478
背景： 已知下边缘，下四分位数，中位数，上四分位数，上边缘数据，通过Ecahrts进行绘制 具体步骤： 1、安装Echarts npm install echarts --save 2、在组建中局部引入Echarts import echarts from 'echarts'; 3、使用 <template> ...
echarts vue element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应（二）
总结前端开发中遇到的问题，分享前端知识
06-16 4234
实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应
vue使用echarts实现箱线图
weixin_51406830的博客
05-19 2105
<template> <div> <div id="main" style="height:500px;width:600px"></div> </div> </template> <script> import * as echarts from "echarts"; import dataTool from "echarts/extension/dataTool"; export de
vue echarts 合须图/箱线图 配置项 后端返回大数据处理结果的情况
小白成长记
04-30 2580
『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』，数据源数据量很大，交给后台做处理，返回给前端处理结果。显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。...
vue 中画echarts 箱线图代码，并修改横坐标为自己的数据（多系列箱线图 和单组数据的箱线图，两张图的代码）
weixin_51192038的博客
11-17 2228
vue 中画echarts 箱线图代码 在vue中引入 echarts，并画echarts中的箱线图 <template> <span> <div id="container" style="height:500px;width:600px"></div> <div id="main" style="height:500px;width:600px"></div> </span> </tem
可使用各种显示选项绘制方框的箱线图
02-13
可使用各种显示选项绘制方框的箱线图 Alternative box plot.zip
使用vue3（el+）绘制简单机柜图
最新发布
扬雨于今
07-18 399
在项目中，需要绘制一个简单的机柜图，初始版代码如下，持续更新。
极致呈现系列之：Vue3中使用Echarts图表初体验
九仞山的专栏
06-13 1485
介绍了如何在Vue3中使用Echarts图表库。探讨了如何安装和引用Echarts库、如何使用Echarts库创建基本图表、如何自定义图表、如何将数据传递给Echarts库以及如何处理Echarts库中的事件。
echarts vue element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应（一）
总结前端开发中遇到的问题，分享前端知识
04-12 4651
element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应
echarts-箱线图(盒须图)
heyNewbie的博客
12-29 8444
搞了一套和官网不同的option，也能渲染出效果来，虽然我不知道这个箱线图有啥意义啊哈哈哈~ 需求：填充背景色(中间的横线我是真的无能为力了，有搞出来的小伙伴欢迎留言) 剩下的一些自定义轴刻度显示、tooltip的自定义就很常规了。。。 option: { color: ["#007FFF", "#F5A623", "#B620E0", "#F11455"], tooltip: { trigger: "item", },
echarts学习笔记之箱线图的分析与绘制详解
11-30
一、箱线图 Box-plot 箱线图（Boxplot）也称箱须图（Box-whisker Plot），它是用一组数据中的最小值、第一四分位数、中位数、第三四分位数和最大值来反映数据分布的中心位置和散布范围，可以粗略地看出数据是否具有对称性。通过将多组数据的箱线图画在同一坐标上，则可以清晰地显示各组数据的分布差异，为发现问题、改进流程提供线索。 什么是四分位数 箱线图需要用到统计学的四分位数（Quartile）的概念，所谓四分位数，就是把组中所有数据由小到大排列并分成四等份，处于三个分割点位置的数字就是四分位数。 第一四分位数（Q1），又称“较小四分位数”或“下四分位数”，等于该样本中所有数
vue3中markRaw详解
Br不二
04-01 2837
在 Vue 3 中，`markRaw` 是一个用于告诉 Vue 的响应性系统不要对某个对象进行转换或追踪其响应性的函数。当你有一个对象，并且你确定你不需要它成为响应性对象时，你可以使用 `markRaw` 来标记它
vue3 echarts报错
qq_40885646的博客
07-21 718
vue3 echarts报错
Vue3 封装ECharts 组件 抽离复用 包含图表随着窗口宽高变化而变化 - 附完整示例
m0_48968874的博客
03-25 1333
避免重复的代码造成冗余，抽离封装提高复用性代码逻辑更加清晰，方便后期维护Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
Vue 3 中集成 ECharts(附一些案例)
热门推荐
jieyucx的博客
07-05 1万+
在现代Web开发中，Vue 3以其卓越的性能和灵活的Composition API赢得了广泛的关注。而ECharts，作为开源的一个使用JavaScript实现的强大可视化库，以其丰富的图表类型和高度可定制性成为了数据可视化的首选工具之一。今天，我们将结合Vue 3的语法糖和ECharts，来详细探讨如何在Vue 3项目中集成ECharts，并不仅仅局限于折线图，而是展示一个通用的集成方法。
echarts使用（4）k线图/箱线图
qq_41281545的博客
06-06 957
在vue框架中，下面将展示如何使用echarts画k线图 假如我们有数据， x=[1,2,3,4,5,6] y=[1,2,3,4,5,6] z=[1,2,3,4,5,6] a=[1,2,3,4,5,6] 我们需要实现它们对应的k线图 var chartDom = document.getElementById("echarts_xyza_k"); var myChart = echarts.init(chartDom); var option; option = { legend:{
boxplot函数绘制箱型线
qq_44331100的博客
10-27 2481
箱线图是一种常用的图，它可以把很多信息都体现在一张图上，而且使用想先图可以比较容易地比较出数据中不同分组之间的差异。绘制箱线图使用的话函数为 boxplot，其基本用法为： boxplot(formula, data, range = 1.5, width = NULL, varwidth = FALSE,notch = FALSE, outline = TRUE, names, horizontal = FALSE,…) 参数表示： 1.formula 表示的是一个式子，这个式子用来表示对哪些变量来绘制箱
echarts箱型图数据
weixin_57011137的博客
03-01 1009
// 箱型图数据 let optionss = { title: [ { text: "Michelson-Morley Experiment", left: "center", }, { text: "upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR", borderColor: "#999", borderWidth: 1, textStyle: {
更改echarts中盒须图横坐标
sweet_cake的博客
04-21 2649
echarts的盒须图研究了一下，不知道有啥方便的方法，使用了一个笨办法解决更改x坐标,使用switch echarts中原始盒须图： var text = ['1年以上', '2年以上', '3年以上', '4年以上', '5~10年', '应届毕业生'] option = { title: [ { text: 'Michelson-Morley Experiment', left: 'center' }, { text: 'upper
vue3+echart+java数据报表统计管理系统源码
07-20
### 回答1： Vue3+Echarts+Java数据报表统计管理系统源码是一个基于Vue3和Echarts的前端框架以及Java后端开发的一套数据报表统计管理系统的源代码。 该系统的主要功能包括数据可视化、数据报表生成与展示、数据统计与分析等。通过使用Vue3作为前端框架，可以实现页面的快速渲染和交互效果的优化。而Echarts作为数据可视化的工具，可以将数据以图表的形式展示出来，提供更直观、易懂的数据分析结果。 在后端方面，系统使用Java作为编程语言进行开发。Java是一种通用的、面向对象的编程语言，具有跨平台性和稳定性，非常适合用于开发后端服务。通过Java，可以实现数据的存储、查询和处理，并将处理结果返回给前端进行展示。 系统的源码将涵盖前后端的代码，其中前端部分将包括Vue3的组件和路由配置，以及与后端进行通信的功能代码。后端部分将包括用Java编写的接口和数据处理逻辑代码，以及与数据库进行交互的代码。 总之，Vue3+Echarts+Java数据报表统计管理系统源码将提供一个完整的数据报表统计管理系统的开发框架，可以帮助开发者快速搭建和定制自己的数据可视化和统计分析系统。 ### 回答2： Vue3 echart java数据报表统计管理系统源码是一个基于Vue3和Java开发的一个数据报表统计管理系统。该系统主要用于对数据进行统计分析和报表生成。 系统使用了Vue3作为前端框架，提供了丰富的UI组件和数据绑定功能，可以方便地开发出用户友好的界面。同时，系统还使用了echart作为数据可视化工具，可以将统计结果以图表的形式直观地呈现给用户。 在后端开发方面，系统使用了Java作为主要开发语言，使用了Spring Boot框架进行开发。Spring Boot提供了丰富的功能和组件，使得开发人员可以更加高效地进行开发。系统还使用了MyBatis作为持久层框架，可以方便地与数据库进行交互。 系统的主要功能包括数据的录入，数据的处理和报表的生成。用户可以在系统中录入需要进行统计的数据，然后系统会对数据进行处理，并生成相应的报表。报表可以以各种图表的形式展示出来，如柱状图、饼状图、折线图等，用户可以根据需要选择合适的图表进行查看。 此外，系统还提供了一些辅助功能，如数据导出和导入、权限管理、用户管理等。用户可以根据需要对系统进行相应的设置和管理。 总之，Vue3 echart java数据报表统计管理系统源码是一个功能丰富、界面友好的数据报表统计管理系统，可以帮助用户轻松地进行数据统计分析和报表生成。 ### 回答3： vue3 echart java数据报表统计管理系统源码是一个基于Vue3和Echart的数据报表统计管理系统的源代码。 该系统的开发语言为Java，采用了Vue3作为前端框架，并通过Echart实现数据可视化和报表功能。它具有以下特点和功能： 1. 界面美观：使用Vue3作为前端框架，可以提供丰富的UI组件和交互效果，使系统具有良好的用户体验和界面美观。 2. 数据可视化：利用Echart作为数据可视化工具，可以将数据以图表的形式直观地展示出来，帮助用户更好地理解数据和分析统计结果。 3. 数据报表：系统提供了丰富的报表功能，可以根据用户的需求生成各种类型的报表，包括柱状图、折线图、饼图等，帮助用户更好地进行数据分析和决策。 4. 数据统计：系统可以对输入的数据进行统计分析，包括求和、平均值、最大值、最小值等统计指标的计算，帮助用户深入了解数据的特征和趋势。 5. 权限管理：系统具备权限管理功能，可以根据用户的角色和权限对系统的访问进行限制，保证数据的安全性和机密性。 6. 操作便捷：系统提供了用户友好的操作界面和交互方式，方便用户对数据进行查询、筛选、导出等操作，提高工作效率。 总之，该系统源码结合了Vue3、Echart和Java的优势，提供了一个功能完善、界面美观的数据报表统计管理系统，可广泛应用于各种数据分析和决策场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值