echarts 盒须图配置理解

在这里插入图片描述

盒须图,Boxplot 中文可以称为『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』,是一种用作显示一组数据分散情况资料的统计图。它能显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。

其中比较重要的地方是 盒须图的数据格式及数据值,

数据格式:二维数组
数据值: [min,Q1,median(Q2),Q3,max] 翻译过来就是 [ 最小值, 下四分位数, 中位数,上四分位数, 最大值]

注意点:

如何没有采用 dataset 数据集的方式时, 返回的二维数组必须按照
[ 最小值, 下四分位数, 中位数,上四分位数, 最大值] 这种格式

数据返回的方式就多样化了,后端直接数据处理好返回,前端拿到数据自己进行处理

在这里插入图片描述
例子:

// 格式:[ 最小值, 下四分位数, 中位数,上四分位数, 最大值]
series: [
            {
              name: '盒须图',
              type: 'boxplot',
              data:[
                [100,200,300,400,500],
                [100,200,300,400,500],
                [100,200,300,400,500],
                [100,200,300,400,500],
                [100,200,300,400,500],
                [100,200,300,400,500],
                [100,200,300,400,500]
              ]
            }
]

在这里插入图片描述

官方盒须图链接: https://echarts.apache.org/zh/option.html#series-boxplot.data

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用echarts柱状时,可以通过配置tooltip来设置其显示内容。在引入echarts包后,需要在调用myChart.setOption(option)注册表之后,调用tools.loopShowTooltip方法来显示tooltip。其中,myChart为echarts实例,option为该表的配置。需要注意的是,配置中必须要有tooltip的配置才能生效。 对于柱状的tooltip配置,可以将其设置在option的tooltip字段中。具体配置方式可以参考下面的示例代码: ```javascript option = { // 其他配置项... tooltip: { trigger: 'axis', // 设置触发类型为轴 axisPointer: { // 设置轴指示器样式 type: 'shadow' // 设置为阴影指示器 } }, // 其他配置项... }; ``` 在上述示例中,我们设置了tooltip的触发类型为轴,表示鼠标悬停在柱状上时触发显示tooltip。同时,通过axisPointer字段设置了轴指示器的样式为阴影指示器,可以在鼠标悬停时显示柱状阴影部分的详细信息。 除了以上的配置方式,echarts还提供了丰富的配置选项,可以根据实际需求进行自定义。具体的配置项可以参考echarts官方文档。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [echarts表柱状折线动态轮播tooltip窗](https://download.csdn.net/download/Dyc_SE/86399277)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [echarts-柱状配置详解](https://blog.csdn.net/benlalagang/article/details/126886719)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值