Echarts-数据的视觉映射
来源:官网,自己整理
数据可视化是 数据 到 视觉元素 的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。
ECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到『线』,柱状图把数据映射到『长度』。一些更复杂的图表,如 graph
、事件河流图
、treemap
也都会做出他们内置的映射。
此外,ECharts 还提供了 visualMap 组件 来提供通用的视觉映射。visualMap
组件中可以使用的视觉元素有:图形类别(symbol)
、图形大小(symbolSize)
颜色(color)
、透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
、色调(colorHue)
下面对 visualMap
组件的使用方式进行简要的介绍。
数据和维度
ECharts中的数据,一般存放于 series.data 中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是『线性表』、『树』、『图』等。但他们都有个共性:都是『数据项(dataItem)』的集合。每个数据项含有『数据值(value)』和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。
例如,series.data 最常见的形式,是『线性表』,即一个普通数组:
series: {
data: [
{ // 这里每一个项就是数据项(dataItem)
value: 2323, // 这是数据项的数据值(value)
itemStyle: {...}
},
1212, // 也可以直接是 dataItem 的 value,这更常见。
2323, // 每个 value 都是『一维』的。
4343,
3434
]
}
series: {
在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到x轴,取第二个维度映射到y轴。如果想要把更多的维度展现出来,可以借助
data: [
{ // 这里每一个项就是数据项(dataItem)
value: [3434, 129, '圣马力诺'], // 这是数据项的数据值(value)
itemStyle: {...}
},
[1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value,这更常见。
[2323, 3223, '瑙鲁'], // 每个 value 都是『三维』的,每列是一个维度。
[4343, 23, '图瓦卢'] // 假如是『气泡图』,常见第一维度映射到x轴,
// 第二维度映射到y轴,
// 第三维度映射到气泡半径(symbolSize)
]
}visualMap
。
visualMap 组件
visualMap 组件定义了把数据的『哪个维度』映射到『什么视觉元素上』。
现在提供如下两种类型的visualMap组件,通过 visualMap.type 来区分。
其定义结构例如:
option = {
visualMap: [ // 可以同时定义多个 visualMap 组件。
{ // 第一个 visualMap 组件
type: 'continuous', // 定义为连续型 viusalMap
...
},
{ // 第二个 visualMap 组件
type: 'piecewise', // 定义为分段型 visualMap
...
}
],
...
};
连续型(visualMapContinuous)
分段型(visualMapPiecewise)
分段型视觉映射组件(visualMapPiecewise),有三种模式:
- 连续型数据平均分段: 依据 visualMap-piecewise.splitNumber 来自动平均分割成若干块。
- 连续型数据自定义分段: 依据 visualMap-piecewise.pieces 来定义每块范围。
- 离散数据(类别性数据): 类别定义在 visualMap-piecewise.categories 中。
视觉映射方式的配置
既然是『数据』到『视觉元素』的映射,visualMap
中可以指定数据的『哪个维度』(参见visualMap.dimension)映射到哪些『视觉元素』(参见 visualMap.inRange 和 visualMap.outOfRange)中。
例一:
option = {
visualMap: [
{
type: 'piecewise'
min: 0,
max: 5000,
dimension: 3, // series.data 的第四个维度(即 value[3])被映射
seriesIndex: 4, // 对第四个系列进行映射。
inRange: { // 选中范围中的视觉配置
color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表,
// 数据最小值映射到'blue'上,
// 最大值映射到'red'上,
// 其余自动线性计算。
symbolSize: [30, 100] // 定义了图形尺寸的映射范围,
// 数据最小值映射到30上,
// 最大值映射到100上,
// 其余自动线性计算。
},
outOfRange: { // 选中范围外的视觉配置
symbolSize: [30, 100]
}
},
...
]
};
例二:
option = {
visualMap: [
{
...,
inRange: { // 选中范围中的视觉配置
colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。
// 本来的颜色可能是从全局色板中选取的颜色,visualMap组件并不关心。
symbolSize: [30, 100]
},
...
},
...
]
};
更多详情,参见 visualMap.inRange 和 visualMap.outOfRange。
Echarts-数据的视觉映射的更多相关文章
- Echarts数据可视化visualMap,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化全解注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-scatter散点图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-map地图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-effectscatter特效散点图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化地理坐标系geo,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- Echarts数据可视化series-radar雷达图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-pie饼图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
随机推荐
- js创建对象的6种方式总结
1.new 操作符 + Object 创建对象 var person = new Object(); person.name = "lisi"; person.age = 21; ...
- Docker安装Zookeeper并进行操作
Docker安装Zookeeper 下载Zookeeper镜像docker pull zookeeper1启动容器并添加映射docker run --privileged=true -d --name ...
- centos安装FTP脚本
一键安装脚本 只需要自己设置一下脚本开头的几个字符串参数即可 #!/bin/bash port=" user="code" pass=" dir="/ ...
- 验证TXT解析的正确性
需要用到TXT解析,不同于CNAME和A解析,可以用PING命令验证,要验证TXT解析需要用到如下命令 nslookup -q=TXT txtdemo.lei.cool 8.8.8.8 输出内容如下 ...
- jquery实现对象数组 筛选出每条记录中的特定属性字段 及根据某个属性值筛选出指定的元素
jquery实现对象数组 筛选出每条记录中的特定属性字段 直接上图: 源码: /** * 对后端返回的数据,筛选出符合报表的列项,多余的列项去除 */ function filterParams(da ...
- Git检出和提交至远程仓库
步骤一:首先需要一个Github账号,还没有的话先去注册:https://github.com/,我们使用Git需要先安装Git工具,这里给出下载地址:https://git-for-windows. ...
- Kotlin概述
Kotlin 是一个基于 JVM 的新的编程语言,由 JetBrains 开发. Kotlin可以编译成Java字节码,也可以编译成JavaScript,方便在没有JVM的设备上运行. JetBrai ...
- Selenium 2自动化测试实战12(获得验证信息)
一.获得验证信息 通常用的最多的几种验证信息分别是:title.URL和text 运行脚本之后,结果如下图所示: #coding:utf-8 from selenium import webdrive ...
- asp.net mvc 依赖注入Ninject
1.安装Ninject 2.使用Ninject 一 安装Ninject Nuget:Ninject 二 使用Ninject public interface IStudent { string Get ...
- linux进阶命令
1.输出重定向:一般命令的输出都会显示在终端中,有些时候需要将一些命令的执行结果想要保存到文件中进行后续的分析/统计,则这时候需要使用到的输出重定向技术. >:覆盖输出,会覆盖掉原先的文件内容 ...