JSRUN 用代码说话

数据的视觉映射

编辑教程

ECharts数据的视觉映射

数据可视化


数据可视化指的是数据到视觉元素的映射过程。我们也可以将该过程称为视觉编码,把视觉元素当成视觉通道。

Echarts 帮助我们编程或者免编程实现丰富的大数据可视化,它的每种图表都内置了上述的映射过程,例如柱状图将数据映射到 长度,折线图把数据映射到 线。不止简单的图表,一些较为复杂的图表也会有内置的映射。

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: {
    data: [
        {                        // 这里每一个项就是数据项(dataItem)
            value: [3434, 129,  '圣马力诺'], // 这是数据项的数据值(value)
            itemStyle: {...}
        },
        [1212, 5454, '梵蒂冈'],   // 也可以直接是 dataItem 的 value,这更常见。
        [2323, 3223, '瑙鲁'],     // 每个 value 都是『三维』的,每列是一个维度。
        [4343, 23,   '图瓦卢']    // 假如是『气泡图』,常见第一维度映射到x轴,
                                 // 第二维度映射到y轴,
                                 // 第三维度映射到气泡半径(symbolSize)
    ]
}

在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到 x 轴,取第二个维度映射到 y 轴。

可以借助 visualMap 把更多的维度展现出来。最常见的情况,气泡图(scatter) 使用半径展现了第三个维度。

visualMap 组件


visualMap 组件的定义:把数据的哪个维度映射到什么视觉元素上。

现在提供如下两种类型的 visualMap 组件,通过 visualMap.type 来区分。

其定义结构例如:

option = {
    visualMap: [ // 可以同时定义多个 visualMap 组件。
        { // 第一个 visualMap 组件
            type: 'continuous', // 定义为连续型 viusalMap
            ...
        },
        { // 第二个 visualMap 组件
            type: 'piecewise', // 定义为分段型 visualMap
            ...
        }
    ],
    ...
};

连续型(visualMapContinuous):

Echarts 的连续型视觉映射组件实例

点击编辑实例

分段型(visualMapPiecewise):

Echarts 分段型视觉映射组件实例

点击编辑实例

以下是分段型视觉映射组件(visualMapPiecewise)的三种模式:

  • 连续型数据平均分段: 依据 visualMap-piecewise.splitNumber 来自动平均分割成若干块。
  • 连续型数据自定义分段: 依据 visualMap-piecewise.pieces 来定义每块范围。
  • 离散数据(类别性数据): 类别定义在 visualMap-piecewise.categories 中。

Echarts 视觉映射方式的配置

数据可视化是数据视觉元素的映射,visualMap 中可以指定数据的哪个维度映射到哪些视觉元素中。

实例一:

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。

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟