【中级ECharts技术】前端框架ECharts的dataset 管理数据对数据可视化的高级dataset 管理

简介: 【中级ECharts技术】前端框架ECharts的dataset 管理数据对数据可视化的高级dataset 管理

dataset 管理数据

在这里插入图片描述

提供一份数据。 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。

option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    //dataset 第一列。
    xAxis: {type: 'category'},
    // 声明一个 Y 轴,数值轴。
    yAxis: {},
    // 
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
}

Apache EChartsTM 4开始支持数据集组件进行单独的数据集声明,以便数据可以单独管理,由多个组件重用,并且可以基于数据指定数据到可视化的映射。这可以在许多场景中带来方便。
在ECharts 4之前,数据只能以“series”形式声明,

option = {
    xAxis: {
        type: 'category',
        data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
    },
    yAxis: {},
    series: [
        {
            type: 'bar',
            name: '2015',
            data: [89.3, 92.1, 94.4, 85.4]
        },
        {
            type: 'bar',
            name: '2016',
            data: [95.8, 89.4, 91.2, 76.9]
        },
        {
            type: 'bar',
            name: '2017',
            data: [97.7, 83.1, 92.5, 78.1]
        }
    ]
}

该方法的优点是直观、易于理解,适用于某些特殊图表类型的特定数据类型定制。然而,缺点是为了匹配这种数据输入形式,通常需要有一个数据处理过程,并将数据分割设置为每个系列(和类别轴)。此外,这不利于多个系列共享一个数据,也不利于基于原始数据的图表类型和系列的映射排列。
因此,ECharts 4提供了一个单独声明数据的数据集组件,这带来了以下效果:
它可以接近数据可视化的常见思维模式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。
数据和其他配置可以分开。数据始终在变化,其他配置始终不变。分离易于单独管理。
数据可以被多个系列或组件重用。对于具有大量数据的场景,不必为每个系列创建一个数据。
支持更常见的数据格式,如二维数组、对象数组等,在一定程度上避免用户转换为数据格式。
在这里插入图片描述 用 dimensions 指定了维度的顺序。直角坐标系中, 默认把第一个维度映射到 X 轴上,第二个维度映射到 Y 轴上。如果不指定 dimensions,也可以通过指定 series.encode,完成映射。

option = {
    legend: {},
    tooltip: {},
    dataset: {

        dimensions: ['product', '2015', '2016', '2017'],
        source: [
            {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
            {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
            {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
            {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};

一目了然,可以进行以下映射:
指定数据集的列或行是否映射到一系列图形。您可以使用SeriesLayoutBy属性。默认值是按列映射。

series: {
    // 注意维度序号(dimensionIndex)从 0 开始计数,第三列是 dimensions[2]。
    encode: {x: 2, y: 4},
    ...
}

指定维度映射规则:如何将数据集维度(“维度”表示行/列)映射到坐标轴(如X和Y轴)、工具提示、标签、图形元素大小和颜色(visualMap)。您可以使用series配置encode属性和visualMap组件(如果需要映射颜色大小等视觉维度)。在上面的示例中,ECharts没有提供这种映射配置,因此ECharts将根据最常见的理解执行默认映射:X坐标轴声明为类别轴,默认情况下将自动对应于数据集源中的第一列;三列图表系列,逐一对应数据集源中的每个后续列。

series: {
    encode: {x: 2, y: 4},
    seriesLayoutBy: 'row',
    ...
}

在系列中设置的 dimensions 会更优先采纳。可以在 type 中指定维度类型。可以简写为 string,表示维度名。

var option1 = {
    dataset: {
        dimensions: [
            {name: 'score'},
            // 
            'amount',
            // 
            {name: 'product', type: 'ordinal'}
        ],
        source: [...]
    },
    ...
};

var option2 = {
    dataset: {
        source: [...]
    },
    series: {
        type: 'line',
        // 
        dimensions: [
            null, // 可以设置为 null 表示不想设置维度名
            'amount',
            {name: 'product', type: 'ordinal'}
        ]
    },
    ...
};

在大多数常见的图表中,数据可以以二维表格的形式描述。广泛使用的数据表软件(如MS Excel、Numbers)或关系数据数据库是二维表。它们的数据可以导出为JSON格式并输入到数据集。在源代码中,在许多情况下可以省略一些数据处理步骤。
如果数据导出到csv文件,则可以使用一些csv工具(如dsv或PapaParse)将csv转换为JSON。
在JavaScript的常见数据传输格式中,二维数组可以直观地存储二维表。前面的示例都由二维数组表示。
除了二维数组,数据集还支持以下键值数据格式,这些格式也非常常见。但是,seriesLayoutBy参数在此类格式中不受支持。
按行的 key-value 形式(对象数组),这是个比较常见的格式。 按列的 key-value 形式。

dataset: [{
    // 
    source: [
        {product: 'Matcha Latte', count: 823, score: 95.8},
        {product: 'Milk Tea', count: 235, score: 81.4},
        {product: 'Cheese Cocoa', count: 1042, score: 91.2},
        {product: 'Walnut Brownie', count: 988, score: 76.9}
    ]
}, {
    //
    source: {
        'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
        'count': [823, 235, 1042, 988],
        'score': [95.8, 81.4, 91.2, 76.9]
    }
}]

在这里插入图片描述
目前,并非所有图表都支持数据集。支持数据集的图表包括直线、条形图、饼图、扫描仪、效应扫描仪、平行线、烛台、地图、基金和自定义。未来将有更多图表可供支持。
最后,给出一个例子。多个图表共享具有链接交互的数据集。

相关文章
|
22天前
|
前端开发 JavaScript 开发者
震惊!Web 前端 href 与 src 竟有如此差异,快来一探究竟,掌握热门技术核心要点
【8月更文挑战第26天】在Web前端开发中,`href`与`src`是两个常用属性,但其差异常被忽视。`href`(超文本引用)用于创建文档间的链接关系,如链接至外部网页或引入CSS文件;`src`(来源)则用于在文档内嵌入资源,如图片或JavaScript文件。两者在使用场景及加载机制上有所不同:`href`支持并行下载且不阻塞渲染,适合非关键资源加载;而`src`加载时会暂停页面渲染直至资源加载完成,适用于如图片和脚本这类对页面显示至关重要的资源。因此,正确理解并运用这两个属性对于保障网页性能和用户体验至关重要。
38 3
|
22天前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
34 2
|
16天前
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
47 0
|
16天前
|
前端开发 API 开发者
JSF与RESTful服务的完美邂逅:如何打造符合现代Web潮流的数据交互新体验
【8月更文挑战第31天】随着互联网技术的发展,RESTful架构风格因其实现简便与无状态特性而在Web服务构建中日益流行。本文探讨如何结合JavaServer Faces (JSF) 和 JAX-RS 构建RESTful API,展示从前端到后端分离的完整解决方案。通过定义资源类、配置 `web.xml` 文件以及使用依赖注入等步骤,演示了在JSF项目中实现RESTful服务的具体过程,为Java开发者提供了实用指南。
28 0
|
16天前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
25 0
|
16天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
40 0
|
16天前
|
前端开发 开发者 Apache
揭秘Apache Wicket项目结构:如何打造Web应用的钢铁长城,告别混乱代码!
【8月更文挑战第31天】Apache Wicket凭借其组件化设计深受Java Web开发者青睐。本文详细解析了Wicket项目结构,帮助你构建可维护的大型Web应用。通过示例展示了如何使用Maven管理依赖,并组织页面、组件及业务逻辑,确保代码清晰易懂。Wicket提供的页面继承、组件重用等功能进一步增强了项目的可维护性和扩展性。掌握这些技巧,能够显著提升开发效率,构建更稳定的Web应用。
39 0
|
19天前
|
前端开发 JavaScript API
Web服务器与前端技术的集成
【8月更文第28天】随着Web开发技术的发展,现代前端框架如React、Vue.js等已经成为构建复杂Web应用的标准工具。为了提供更好的用户体验,这些前端应用通常需要与后端Web服务器进行紧密集成。本文将详细介绍如何将React和Vue.js与后端Web服务器无缝集成,以创建高性能且用户友好的Web应用。
18 0
|
21天前
|
机器学习/深度学习 分布式计算 前端开发
构建前端防腐策略问题之前端代码会随着技术引擎的迭代而腐烂的问题如何解决
构建前端防腐策略问题之前端代码会随着技术引擎的迭代而腐烂的问题如何解决
|
23天前
|
前端开发 JavaScript 测试技术
前端开发需要哪些技术
前端开发需要哪些技术【8月更文挑战第25天】
36 0

热门文章

最新文章