vue 中画echarts 箱线图代码，并修改横坐标为自己的数据（多系列箱线图 和单组数据的箱线图，两张图的代码）

置顶 已于 2022-07-25 09:20:38 修改
阅读量2k 收藏 7
点赞数 1
文章标签： 内容运营 django python
于 2021-11-17 21:29:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51192038/article/details/121388314
版权

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>


</template>

<script>

    import * as echarts from "echarts";
    import dataTool from "echarts/extension/dataTool";


export default {
  name: "hometu",
  mounted() {

    var data1 = [];
    var data2 = [];
    var redBoxData = [
        // 红色盒子第1组  这里可以放很多数据，代码后面会自动帮忙计算并取值
        [850, 740, 900, 1070, 930],
        // 红色盒子第2组
        [960, 940, 960, 940, 880],
        // 红色盒子第3组
        [890, 810, 810, 820, 800],
        // 红色盒子第4组
        [850, 840, 780, 810, 760]
    ];
    var redBoxData1 = [
        //
      
        [0.283827805,0.353264777,0.440737863,0.566862608,0.595958517],
        //
        
        [0.283827805,0.353264777,0.440737863,0.566862608,0.595958517],
      // 
      
        [0.283827805,0.353264777,0.440737863,0.566862608,0.595958517],
        // 
        [0.283827805,0.353264777,0.440737863,0.566862608,0.595958517],
        
    ];
    data1.push(echarts.dataTool.prepareBoxplotData(redBoxData));
    data2.push(echarts.dataTool.prepareBoxplotData(redBoxData1));
    console.log('data2',data2)

    //黑色盒子的数据
    var blockBoxData = [
        //黑色盒子第1组
        [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
        //黑色盒子第2组
        [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
        //黑色盒子第3组
        [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
        //黑色盒子第4组
        [850, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
    ];
    //以此类推,想画几个盒子就直接加数据和118行所说的画下去就好了
    data1.push(echarts.dataTool.prepareBoxplotData(blockBoxData));
    console.log('data',data1)
    let myChart = echarts.init(document.getElementById('container'));
    let option = {
        title: {
            text: '多组数据比较盒须图',
            left: 10,//标题显示的位置
        },
        legend: {
            y: '10%',
            data: [ '红色盒子', '黑色盒子']
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '10%',
            top: '20%',
            right: '10%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: ['第1组','第2组','第3组','第4组'],
            boundaryGap: true,
            nameGap: 30,
            splitArea: {
                show: true
            },
            axisLabel: {
                formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            /*min:-400,//可自定义y轴的最大和最小值
            max:600,*/
            type: 'value',
            name: 'Value',
            splitArea: {
                show: false
            }
        },
        dataZoom: [
            {
                // type: 'inside',
                // start: 0,
                // end: 20
              type: 'slider',
              show: true,
              height: 14,
              bottom: 10,
              borderColor: 'transparent',
              backgroundColor: '#e2e2e2',
              // 拖拽手柄样式 svg 路径
              handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
              handleColor: '#aab6c6',
              handleSize: 20,
              handleStyle: {
                borderColor: '#aab6c6',
                shadowBlur: 4,
                shadowOffsetX: 1,
                shadowOffsetY: 1,
                shadowColor: '#e5e5e5'
              },
              start: 0,
              end: 30

            },
            // {
            //     show: true,
            //     height: 20,
            //     type: 'slider',
            //     top: '90%',
            //     xAxisIndex: [0],
            //     start: 0,
            //     end: 20
            // }
        ],
        series: [
            {
                name: '红色盒子',
                type: 'boxplot',
                data: data1[0].boxData,//data[0].boxData代表的是data中红色盒子的数据
                tooltip: {formatter: formatter}
            },
            {
                name: '黑色盒子',
                type: 'boxplot',
                data: data1[1].boxData,//data[0].boxData代表的是data中黑色盒子的数据
                tooltip: {formatter: formatter}
            }
            /*以此类推想画几个盒子,就在后面加,
            {
                name: $.i18n.prop('计划时间'),
                type: '黑色盒子',
                data: data[1].boxData,//data[0].boxData代表的是data中黑色盒子的数据
                tooltip: {formatter: formatter}
            }*/
        ]
    };

    let bar = echarts.init(document.getElementById('main'));
    let option_2 ={
       title: {
            text: '单组数据盒须图',
            left: 10,//标题显示的位置
        },
        legend: {
            y: '10%',
            data: [ '红色盒子']
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '10%',
            top: '20%',
            right: '10%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: ['te','e','2','3'],
            boundaryGap: true,
            nameGap: 30,
            splitArea: {
                show: true
            },
            axisLabel: {
                formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            /*min:-400,//可自定义y轴的最大和最小值
            max:600,*/
            type: 'value',
            name: 'Value',
            splitArea: {
                show: false
            }
        },
      // dataZoom 为横轴数据多时，给横轴加一个可以拖动的功能
        dataZoom: [
            {
                // type: 'inside',
                // start: 0,
                // end: 20,
              type: 'slider',
              show: true,
              height: 14,
              bottom: 10,
              borderColor: 'transparent',
              backgroundColor: '#e2e2e2',
              // 拖拽手柄样式 svg 路径
              handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 	192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
              handleColor: '#aab6c6',
              handleSize: 20,
              handleStyle: {
                borderColor: '#aab6c6',
                shadowBlur: 4,
                shadowOffsetX: 1,
                shadowOffsetY: 1,
                shadowColor: '#e5e5e5'
              },
              start: 0,   // 拖动从0，最开始开始
              end: 20  // 拖动在横轴所有数据的20%处停止
            },
            // {
            //     show: true,
            //     height: 20,
            //     type: 'slider',
            //     top: '90%',
            //     xAxisIndex: [0],
            //     start: 0,
            //     end: 20
            // }
        ],
        series: [
            {
                name: '红色盒子',
                type: 'boxplot',
                data: data2[0].boxData,//data[0].boxData代表的是data中红色盒子的数据
                tooltip: {formatter: formatter}
            },
            // {
            //     name: '黑色盒子',
            //     type: 'boxplot',
            //     data: data2[0].boxData,//data[0].boxData代表的是data中黑色盒子的数据
            //     tooltip: {formatter: formatter}
            // }
            /*以此类推想画几个盒子,就在后面加,
            {
                name: $.i18n.prop('计划时间'),
                type: '黑色盒子',
                data: data[1].boxData,//data[0].boxData代表的是data中黑色盒子的数据
                tooltip: {formatter: formatter}
            }*/
        ]
    };


    function formatter(param) {
        return [
            '类别名称: ' + param.name,
            // '上边界: ' + param.data[0],
            '下四分位数: ' + param.data[1],
            '中位数: ' + param.data[2],
            '上四分位数: ' + param.data[3],
            '下边界: ' + param.data[4]
        ].join('<br/>')
    }
    myChart.setOption(option);
    bar.setOption(option_2);
  },

}
</script>

<style scoped>

</style>

多系列数据比较箱线图
在这里插入图片描述
在这里插入图片描述

佛系盼毕业
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
通过Echarts在Vue项目中绘制一个箱线图
郭宝的博客
08-16 2429
背景： 已知下边缘，下四分位数，中位数，上四分位数，上边缘数据，通过Ecahrts进行绘制 具体步骤： 1、安装Echarts npm install echarts --save 2、在组建中局部引入Echarts import echarts from 'echarts'; 3、使用 <template> ...
vue在使用ECharts时的异步更新和数据加载详解
08-28
Vue 在使用 ECharts 时的异步更新和数据加载详解 Vue.js 是一款流行的前端框架，而 ECharts 则是一款功能强大的数据可视化库。当我们将 ECharts集成到 Vue 项目中时，需要处理的异步更新和数据加载问题。本文将详细...
vue使用echarts实现箱线图
weixin_51406830的博客
05-19 1974
<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
【Streamlit学习笔记】Streamlit-ECharts箱型图添加均值和最值label
最新发布
鲁棒最小二乘支持向量机
06-22 350
Streamlit-ECharts箱型图添加均值和最值label
vue 前端使用最新版eachrts画箱线图，并修改横坐标为自己需要的内容（附代码）
weixin_51192038的博客
07-25 1006
vue画箱线图
vue echarts 合须图/箱线图 配置项 后端返回大数据处理结果的情况
小白成长记
04-30 2418
『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』，数据源数据量很大，交给后台做处理，返回给前端处理结果。显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。...
可使用各种显示选项绘制方框的箱线图
02-13
可使用各种显示选项绘制方框的箱线图 Alternative box plot.zip
114Echarts - 盒须图（Multiple Categories）
阿甘兄
05-05 2674
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
基于Vue和ECharts的数据大屏设计源码
04-07
Vue和ECharts数据大屏：基于JavaScript构建，包含151个文件，包括88个JSON配置文件、18个JavaScript文件...该项目实现了数据大屏展示，并支持多个客户端的数据同步，为用户提供了一个直观、易用的数据展示和交互平台。
基于Vue和Echarts的大屏数据可视化设计源码
03-28
这是一个基于Vue和Echarts的大屏数据可视化设计，使用Javascript语言开发，包含104个文件。主要文件类型包括51个JSON文件、21个JavaScript文件、14个Vue文件、3个PNG图片文件、2个HTML文件、2个CSS文件、1个...
在vue中实现清除echarts上次保留的数据(亲测有效)
10-14
在Vue.js应用中，使用ECharts进行数据可视化时，可能会遇到一个问题：当用户多次请求数据并更新图表时，ECharts可能会保留之前的数据显示，导致新数据无法正常渲染。为了解决这个问题，我们需要找到一种方法来清除...
基于Vue3与ECharts的数据大屏可视化展示完整源码
03-25
项目简介：本项目采用Vue3和ECharts技术栈，构建了一个数据大屏可视化展示的完整案例。项目包含共计73个文件，其中主要包含JSON配置文件（47个），JavaScript脚本（11个），Vue组件（8个），以及其他辅助配置和资源...
echarts使用（4）k线图/箱线图
qq_41281545的博客
06-06 916
在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:{
113Echarts - 盒须图（Boxplot Light Velocity）
阿甘兄
05-05 4175
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
Echarts盒须图另外添加上公差(上限)，下公差(下限)，中间线
一念执着
07-08 1734
简单在网页上实践: 此案例根据echar(https://echarts.apache.org/examples/zh/editor.html?c=cycle-plot)案例修改而来，如有错误还请多多指教! 第一步: 首先咱们进入echars盒须图案例 https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity 第二部: 赋值我修改的代码，替换他的 var data = echarts.dataTool.
echart自定义图分享之自定百分比的(箱线图/盒须图)
fjxtgdx的博客
05-10 1705
echarts自定义图之自定百分比的(箱线图/盒须图)： 分享一些自己在工作中遇到的非常规图 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因
ECharts绘制盒须图
2301_79568779的博客
03-19 879
反应一组数据的分布情况，通过四分位数以图形的方式展示数值数据的局限性、分布和偏度组的方法。2.（25%-75%中间一半的数据分布情况）箱子越长，数据越分散，箱子越短，数据越集中。3.箱子的偏向性，箱子靠下，正态分布峰值越靠左，箱子靠上偏高，正态分布值越靠右。4.中位数：中位数的水平，不受极大值极小值影响的平均水平。偏上：中位数>均值，负偏分布（左偏态）左侧长尾较长的分布。1.整体越长，数据分布越广，整体越短，数据分布越密集。IQR：四分位距，Q3-Q1，盒子的宽度。黑线在箱子的位置：中间，偏上，偏下。
echarts盒须图颜色填充
whk2018321的博客
12-16 2282
echarts 盒须图使用时线条颜色和填充颜色设置
盒须图组件封装
凌霄的博客
11-09 296
<!-- 盒须图 --> <template> <div style="height: 100%;width: 100%;"> <span v-if="data.length == 0" style="font-size: 20px;color: rgb(65, 179, 242);position: absolute; top: 50%; transform: translateY(-50%); left: 50%; transform: trans
vue2中echarts单文件引入代码
03-27
在项目中创建一个.vue文件，例如Echarts.vue，并在其中编写echarts代码，例如： ``` <div id="chart"></div> import echarts from 'echarts' export default { mounted () { const myChart = echarts.init...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值