ECharts3 实现四象限图

Echarts数据可视化 【象限图】 【代码】Echarts数据可视化 【象限图】 阅读详情

可在ECharts3实例中的代码框中粘贴直接查看效果

option = {
    title : {
        text: '男性女性身高体重分布',
        subtext: '抽样调查来自: Heinz  2003'
    },
    grid: {
        left: '3%',
        right: '7%',
        bottom: '3%',
        containLabel: true
    },
    tooltip : {
        trigger: 'axis',
        showDelay : 0,
        formatter : function (params) {
            if (params.value.length > 1) {
                return params.seriesName + ' :<br/>'
                   + params.value[0] + 'cm '
                   + params.value[1] + 'kg ';
            }
            else {
                return params.seriesName + ' :<br/>'
                   + params.name + ' : '
                   + params.value + 'kg ';
            }
        },
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },
    toolbox: {
        feature: {
            dataZoom: {},
            brush: {
                type: ['rect', 'polygon', 'clear']
            }
        }
    },
    brush: {
    },
    legend: {
        data: ['男性'],
        left: 'center'
    },
    xAxis : [
        {
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value} cm'
            },
            splitLine: {
                show: false
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value} kg'
            },
            splitLine: {
                show: false
            }
        }
    ],
    series : [


        {
            name:'男性',
            type:'scatter',
            data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
                [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
                [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
                [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
                [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
                [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
                [183.5, 74.8], [175.5, 70.0]
            ],
            markArea: {
                silent: true,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderWidth: 0.5,
                        borderType: 'dashed',
                        borderColor: 'grey'
                    }
                },
                data: [[{
                    name: '男性分布区间',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'},
                    {type : 'max', name: '最大值', valueDim:'x'},
                    {type : 'min', name: '最小值', valueDim:'x'},
                    {type : 'max', name: '最大值', valueDim:'y'},
                    {type : 'min', name: '最小值', valueDim:'y'}
                ]
            },
            markLine : {
                lineStyle: {
                    normal: {
                        color: 'blue',
                        type: 'solid'
                    }
                },
                data : [
                    {type : 'average', name: '平均值'},
                    {type : 'average', valueDim:'x' }
                ]
            }
        }
    ]
};

这里写图片描述

Echarts四象限散点图 四象限散点图,利用MarkLine绘制坐标轴。 阅读详情

相关推荐

echarts入门教程(含小案例)

ECharts 入门教程 简介: ECharts,缩写来自Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具。 特点: 1、开源软件,并且我们提供了非常炫酷的图形界面,特色是地图,另外还提供了柱状图、折线图、饼图、气泡图及四象限图等; 2,使用简单,在官网中为我们封装了js,只要会引用就会得到完美的展示效果; 3,种类多,echarts实现简单,...

lgcxd1234的博客 2万+

Echarts系列之如何实现让坐标固定交叉显示四个象限

实现像如下图散点图固定显示四个象限图一般想要实现这个效果并不然,但是思路一定要正确。在使用echarts进行数据配置时都是echarts自己取x,y轴的值,那么这就会让图形的象限是随数据变化而变化,要让圆心固定显示在图中心就要对x和y轴上的数据进行处理。从图中可以很容易发现就是取x和y轴的数据为一半正值一半为负值,但是具体怎么做呢?知道echarts里面的xAxis和yAxias的max和min属...

头名字W的博客 6154

可视化-echarts流向图制作及recharts

前段时间用echarts做了流程图,在此记录下制作步骤。 一、Echarts是什么 Echarts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript  的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的...

symoriaty的博客 9589

Echarts散点象限图

Echarts散点象限图

ZionHH的博客 4205

使用echarts实现四象限散点图

1、文件夹下载下来后直接双击html文件即可看到效果; 2、项目中多次使用,保证稳定; 3、代码中有详细的介绍说明; 4、可以单独拿出来作为插件使用; 5、有问题欢迎留言,看到会解答;

1. 基于STM32的1.28寸圆形IPS屏(GC9A01)驱动移植实战:软件SPI与硬件SPI双方案详解

本文详细介绍了如何在STM32平台上为1.28寸圆形IPS屏(GC9A01驱动芯片)移植驱动程序,涵盖软件SPI与硬件SPI两种实现方案。内容从引脚定义、工程搭建、GPIO配置到SPI外设初始化逐步详解,并提供了完整的测试代码,帮助开发者根据项目需求(灵活性或性能)选择合适的通信方式,快速点亮屏幕并集成到智能手表等嵌入式项目中。

weixin_42300144的博客 203

echarts 绘制四象限图

本文介绍了如何使用ECharts绘制四象限分析图,适用于学业稳定性诊断等统计场景。通过散点图实现四象限功能,包含以下核心内容: 数据准备:以学生两次考试成绩为例,计算X轴(上次成绩)和Y轴(本次成绩)的平均值作为象限分界线 可视化实现:使用ECharts散点图配置: 设置坐标轴范围(0-100分)和标题 添加四个象限的标题标注(高位稳定区、进步显著区等) 实现交互式提示框显示学生具体成绩 界面设计:包含响应式布局、卡片式容器和居中标题等UI优化 效果图展示了一个完整的四象限分析案例,可用于直观对比学生成绩

a985018505的博客 915

从零开始之stm32之CAN通信

CAN通信极简教程(小白友好版),从小白的视角了解并实现简单的STM32F103的CAN通信,直接上手。

qq_30993593的博客 1306

echarts四象限图实现自定义均值

var sourceData = [{//均值线参数 name: '王小虎', sales: 142.56, services: 64.5 }] var seriesData = sourceData.map(function(item, index, array) { return { name: item['name'],//实际点...

lotte 2349

基于自适应小波阈值算法的图像去噪

自适应小波阈值算法是一种基于小波变换的方法,它相对于传统的小波阈值去噪方法具有更好的性能和鲁棒性。该算法首先对图像进行小波变换,然后根据小波系数的大小确定一个自适应的阈值,将小波系数与阈值进行比较,大于阈值的系数被保留,小于阈值的系数被置零。在上述代码中,首先选取了小波函数sym4进行小波分解,然后根据标准差计算出阈值,使用wthresh函数进行阈值处理,最后进行反变换得到处理后的图像。该GUI界面与前面的自适应小波阈值算法代码结合,实现了图像的去噪,并提供了可视化的效果。

与其临渊羡鱼,不如退而结网 558

FortiWeb 相对路径遍历漏洞复现(CVE-2025-64446)

FortiWeb是Fortinet公司推出的企业级Web应用防火墙(WAF),专为保护Web应用和API抵御高级威胁设计。它集成人工智能与机器学习技术,通过双层检测引擎(HMM模型与SVM向量机)精准识别异常流量,可防御OWASP Top 10攻击、SQL 注入、XSS、DDoS及恶意机器人。其核心功能包括API自动化保护、虚拟补丁集成(兼容Acunetix等第三方扫描工具)及智能流量分析,支持HTTP/2、WebSocket等现代协议。(CVE-2025-64446)

iSee857的博客 467

Echart 四象限图

公司今日要求四象限图,经过研究修改,样式如下: const option = { title: [ { text: '性格群体分析', subtext: '分析对象:XX区域', left: 'center', textStyle: { f...

Beth__hui的博客 4586

【Claude】Disabled organization 错误:组织被禁用的原因与 API Key 绕过方法

如果环境变量存在,下一步是找出它在哪里被设置的。"Disabled organization" 错误的本质不是账户被封,而是认证优先级冲突。环境变量优先级最高始终覆盖 OAuth 订阅认证报错信息具有误导性:"组织被禁用"指的通常是 API Key 所属的组织,而不是你的个人账户旧 Key 是隐形炸弹:即使你已经不再使用某个组织的 API,只要环境变量中残留该 Key,它就会持续覆盖你的订阅认证非交互模式更敏感claude -p模式下,只要有环境变量,就会强制使用它,完全忽略/login。

博客 8858

echarts实现四象限图

echarts实现四象限图效果

CPP_Q的博客 1854

20、自定义用户窗体:从创建到使用

本文详细介绍了在Excel VBA中创建和使用自定义用户窗体的完整过程,涵盖从窗体设计、控件添加与属性设置,到事件处理程序编写及宏调用的各个环节。通过实际示例讲解了如何实现文本大小写转换和员工信息录入等功能,并深入解析了常用控件的属性与事件机制。同时提供了控件命名规范、快捷键使用、布局技巧等实用建议,帮助读者构建高效、交互性强的VBA用户界面。

h0i1j2k3l的博客 131

Microsemi Libero系列教程(四)——PLL的使用

文章目录PLL是什么Libero中PLL的使用官方文档 系列教程:Microsemi Libero系列教程 PLL是什么 PLL(Phase Locked Loop): 为锁相回路或锁相环,用来统一整合时钟信号,使高频器件正常工作,如内存的存取资料等。PLL用于振荡器中的反馈技术。 许多电子设备要正常工作,通常需要外部的输入信号与内部的振荡信号同步。一般的晶振由于工艺与成本原因,做不到很高的频率...

whik1194的博客 7212

echarts四象限图加图例

基于社区内图表的改动,以下是原图: 下边是改动后,添加了图例,区域缩放功能可以根据个人需求修改。 代码如下: var xiaoLv2_color = ['#CC9999','#8BBA00','#FF8E46','#90CECE','#DB5D5D','#AFD8F8','#FDC689','#6DCFF6','#C0B73F','#CC99FF'] var xiaoLv2_name ...

前端搬运工的博客 2368

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

echarts:markLine-分段四象限图

ECharts图表集,EChartsDemo集,echarts gallery,Make A Pie,分享你的可视化作品isqqw.com。这是散点图中的图表标线,利用该属性对坐标系进行分区。2.本次图表使用的markLine.data格式如下。echarts图表集。

weixin_44132840的博客 1109

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

echarts散点四象限图

拿每个值减去平均数当作每个值的新坐标。,防止坐标轴不在最中间。

m0_46074266的博客 827

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

ECharts入门

文章目录ECharts简介Echarts特性Echarts五分钟入门获取 ECharts引入 EChartsECharts详细学习 ECharts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观...

赈川 1019

使用echarts实现四象限散点图:轻松掌握数据分析新工具

使用echarts实现四象限散点图:轻松掌握数据分析新工具 【下载地址】使用echarts实现四象限散点图 该项目基于ECharts实现了一个功能强大的四象限散点图,适用于数据可视化与分析。下载后可直接运行HTML文件,快速查看效果。代码结构清晰,配有详细说明,便于理解与二次开发。该组件稳定可靠,可作为独立插件轻松集成到...

gitblog_06780的博客 955

Echarts使用详解

Echarts学习文档 官网链接:http://echarts.baidu.com/echarts2/doc/example/themeDesigner.html 1.Echarts介绍 ECharts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器...

qq_42191775的博客 1899

Echarts简介

原来做项目的过程中,无法避免的要用到图表服务,但实现出来的效果大都不是很美观。这次在国网开发,我们用到了一个新的开源图表设计工具-Echarts。

劝学 1万+

ECharts和Bootstrap框架

ECharts: 1.认识echarts? ECharts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的 Canvas 库 ZRender,EChar...

Pand_1的博客 5173
上一篇: 《Modern Python Cookbook》(Python经典实例)笔记1.2 命名
下一篇: ECharts3 实现动态数据累积图
mighty13
博客等级 码龄23年 728粉丝 438原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值