echart4.0使用dataset绘制散点图

背景

散点图多维Series如何通过dataset组件传参完成散点图绘制呢?如果是多个序列的散点图,则需要单独对每个序列设置encode指定对应的y轴的取值列。

应用实例

以demo中的气泡图为例,结合dataset教程最后一个散点图的例子,完成数据配置过程。定义二维dataset数据:

var data = [    
["Income","Life Expectancy","Population","Country","Year"], 
[28604,77,17096869,'Australia',1990],   
[31163,77.4,27662440,'Canada',1990],   
[1516,68,1154605773,'China',1990],   
[13670,74.7,10582082,'Cuba',1990],    
[28599,75,4986705,'Finland',1990],   
[29476,77.1,56943299,'France',1990],    
[31476,75.4,78958237,'Germany',1990],    
[28666,78.1,254830,'Iceland',1990],  
[1777,57.7,870601776,'India',1990],  
[29550,79.1,122249285,'Japan',1990],  
[2076,67.9,20194354,'North Korea',1990],
[12087,72,42972254,'South Korea',1990],
[24021,75.4,3397534,'New Zealand',1990] ];

设置图形配置,只使用dataset的头两列数据,展示国家的收入和寿命长度的散点图:

option = {legend : {},tooltip : {},dataset : {source : data},xAxis : {type : 'category',splitLine : {lineStyle : {type : 'dashed'}}},yAxis : {splitLine : {lineStyle : {type : 'dashed'}},scale : true},// Declare several bar series, each will be mapped// to a column of dataset.source by default.series : [ {type : 'scatter',encode : {// 将 "Country" 列映射到 X 轴。x : 'Country',// 将 "Income" 列映射到 Y 轴。y : 'Income'},symbolSize : function(data) {return Math.sqrt(data[2]) / 5e2;},label : {emphasis : {show : true,formatter : function(param) {return param.data[3];},position : 'top'}},itemStyle : {normal : {shadowBlur : 10,shadowColor : 'rgba(120, 36, 50, 0.5)',shadowOffsetY : 5,color : new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ {offset : 0,color : 'rgb(251, 118, 123)'}, {offset : 1,color : 'rgb(204, 46, 72)'} ])}}}, {type : 'scatter',encode : {// 将 "Country" 列映射到 X 轴。x : 'Country',// 将 "Life Expectancy" 列映射到 Y 轴。y : 'Life Expectancy'},symbolSize : function(data) {return Math.sqrt(data[2]) / 5e2;},label : {emphasis : {show : true,formatter : function(param) {return param.data[3];},position : 'top'}},itemStyle : {normal : {shadowBlur : 10,shadowColor : 'rgba(25, 100, 150, 0.5)',shadowOffsetY : 5,color : new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ {offset : 0,color : 'rgb(129, 227, 238)'}, {offset : 1,color : 'rgb(25, 183, 207)'} ])}}} ]
};

运行结果:
在这里插入图片描述
默认情况下,如果不对每个series指定encode属性,那么它将第一列映射到x轴,第二三列的值作为Series的数据,去掉series中的encode,验证得到的图形为:
在这里插入图片描述
结论:如果默认不指定任何配置的情况下,必须保证提供的Dataset至少有series.length+1列数据:第一列映射为X轴,其他几列对应Series的数据。
且这些列必须都是数值类型。

如果把Country列作为第一列数据:

["Country","Income","Life Expectancy","Population","Year"],['Australia',28604,77,17096869,1990],['Canada',31163,77.4,27662440,1990],['China',1516,68,1154605773,1990],['Cuba',13670,74.7,10582082,1990]

这种数据配置下默认配置无法出现正确的散点图,此时即使配置了series的encode映射y轴的数据,也没有数据,所以推测散点图的映射规则为:
第一,至少需要提供3列的数值的数据,可以通过制定Series的定制x和y轴。
第二,全局的encode配置无效。即我想通过全局配置x为Country列、y轴展示Income和LifeExpectancy’是无法成功。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/65491.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浅析ChatGPT技术

一、浅析ChatGPT技术 简单来说,ChatGPT是一个大模型,对应大数据、强算力、好算法。 1、大数据 ChatGPT具有“场景通用性强、泛化能力好、能够自主学习”等功能,而这一切都是以海量数据为基石,算法模型通过从海量数据中获得先验知…

免费的大数据分析可视化网站-司南智图

司南智图: 一站式大数据分析可视化平台 先来个地址: http://gde.geo-compass.com 司南智图遵从“开放、融合、创新、共赢”的建设理念,紧密结合“大数据、互联网”技术,提供“空间数据非空间数据”的全平台解决方案,解决一份数…

计算机视觉特征图可视化与注意力图可视化(持续更新)

1.YOLOv5 特征图可视化 可视化代码: def feature_visualization(x, module_type, stage, n2, save_dirPath(runs/detect/exp)):"""x: Features to be visualizedmodule_type: Module typestage: Module stage within mod…

可视化图形开发工具

你看银行,那么牛逼,有使用先进技术了吗?还都是使用20年前的技术。 所以, 1,技术应该服务实际场景,别去学习那些先进的技术,先进的那些用不上。 2,编程语言和框架,就应…

整理可视化大屏设计教程与相关资源,大屏设计,可视化

GIT地址: https://gitee.com/AiShiYuShiJiePingXing/bigscreen 点击前往GIT查看 一、基础概念 1.1 什么是数据可视化 把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数…

可视化系统不止炫酷!带你领略强大的交互操控功能

大数据产业创新服务媒体 ——聚焦数据 改变商业 01 高视觉效果与强大交互功能并重 数据可视化是利用视觉的方式将那些海量的、复杂的、潜逻辑的数据展现出来,改变了传统业务系统数据呈现复杂枯燥、难以理解的困境,实现了信息的有效传达。 人机交互是指人…

04 可视化开发工具

04 可视化开发工具 点击这个按钮切换到可视化编辑器 来到我们的可视化编辑页面 我们来看一下每个部分的功能 先格式化一下页面 具体代码如下 <template><view class"page"></view> </template> <script> export default {data()…

22 款设计和可视化神经网络的工具

点击上方“算法猿的成长“&#xff0c;关注公众号&#xff0c;选择加“星标“或“置顶” 总第 143 篇文章&#xff0c;本文大约 3000 字&#xff0c;阅读大约需要 10 分钟 前言 深度学习领域&#xff0c;最常见的就是各种网络模型&#xff0c;那么在写论文或者文章&#xff0c;…

GUI可视化利器,让实时数据可视化so easy

PyQtGraph主要使用领域为:数学/科学/工程应用等; PyQtGraph为PyQt5/PyQt6/PySide2等图形用户界面 (GUI) 开发框架的一款强大可视化工具,底层为NumPy (快速科学计算)、Qt的GraphicsView框架 (2D图形可视化)、OpenGL (3D图形可视化); 相比于之前的工具,PyQtGraph在以下方面…

一款可视化在线图表工具

大家好&#xff0c;我是小z 发现一个宝藏数据网站&#xff0c;可以让我们告别代码绘制出精美的数据可视化作品(一些不想写代码的小伙伴们有福了哈)。PlotDB-你的资料数据化服务平台。是一个由宝岛台湾的数据公司制作而成&#xff0c;官网&#xff1a;https://plotdb.com/。下面…

让数据变得更直观:10款常用的可视化工具(解决99%的可视化大屏需求)

不管是跟上司汇报工作&#xff0c;还是向客户介绍项目&#xff0c;在工作中各种与【汇报】有关的事情&#xff0c;都离不开图表。漂亮而有视觉冲击力的图表可以给你的工作大大加分&#xff0c;让对方直观理解你想表达的内容&#xff0c;而大屏能将图表和数据展现到极致。 这篇…

数据可视化:大屏可视化设计全流程教程

什么是数据可视化 数据可视化是利用各类图表及图形化的设计手段将复杂不直观的数据有逻辑的呈现出来&#xff0c;而数据可视化工具就是生成这种呈现的软件。数据可视化为用户提供了交互式探索和分析数据的直观手段&#xff0c;使他们能够有效地识别有趣的模式、推断相关性和因…

数据可视化之数据可视化展示平台

一.前言 数据可视化展示平台&#xff0c;是指使用多种表格和图表类型来展示多维分析结果的数据分析展示方式&#xff0c;借助于图形化手段&#xff0c;清晰有效地传达与沟通信息。通过可视化分析&#xff0c;您可以美学形式与分析功能并进&#xff0c;直观地传达关键的方面与特…

值得推荐的13款可视化软件,快收藏!

数据可视化力求用图表结合的方式把所有的数据整合在某一图像上&#xff0c;这样呈现在观众眼前的画面不仅仅是美观&#xff0c;且比以往长篇大论或是密密麻麻的数据表格更直观易懂&#xff0c;更便于观察分析。到今年上半年为止&#xff0c;国内外已经有了很多发展的较好的数据…

B端大屏可视化设计参考网站分享、大数据可视化设计

B端大屏可视化设计参考网站分享、大数据可视化设计 大屏可视化参考网站&#xff1a; 1. 易知微 https://easyv.cloud/market 浅色风格的大屏可视化可以参考此网站的设计 2. 数字像素&#xff08;原Tob design&#xff09; https://www.shuzixs.com/#/works 有丰富的可视化界…

可视化:这十个数据可视化工具软件平台你必须知道

工欲善其事&#xff0c;必先利其器&#xff01;选择一款好的数据可视化工具&#xff0c;除了能提高数据可视化的工作效率&#xff0c;还能让你的数据以酷炫的图表形式展示出来&#xff0c;从而方便后续的数据分析工作。随着可视化技术的发展&#xff0c;国内国外出现了很多数据…

数据可视化UI设计素材资源文件sketch大屏可视化数据展示

数据是企业的上帝之眼&#xff0c;数据可视化就发挥了很大的作用。很多从事B端产品设计的小伙伴在日常工作中遇到数据可视化的场景比较多&#xff0c;也得益于PSD素材较多&#xff0c;所以用的设计工具大多是Photoshop&#xff0c;但Photoshop用于UI设计太过臃肿&#xff0c;图…

可视化大屏设计工具平台

1、阿里云DataV 阿里云出品的专业大屏数据可视化服务&#xff0c; 旨在让更多的人看到数据可视化的魅力&#xff0c;帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用&#xff0c;满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。 h…

基于Yolov7图像识别的CF自瞄

提示&#xff1a;本文只做学习和交流使用&#xff0c;本人不推荐使用&#xff0c;还是老老实实靠技术上分吧。 文章目录 前言 一、yolov7环境配置 二、yolov7代码与预训练模型下载 三、采集CF图像数据集 四、CF图像数据集标注 1.Anconda环境使用pip安装labelimg 2、数据…

阿里国际站商品发布odoo插件

阿里国际站商品发布odoo插件&#xff0c;支持全新的阿里api接口&#xff0c;支持手动批量&#xff0c;预约发布&#xff0c;功能强大&#xff0c;可支持odoo13 14版本,自行开发&#xff0c;提供源码&#xff0c;售后支持服务。 可试用。