前端框架ECharts dataset对数据可视化的高级管理


Posted in Javascript onDecember 24, 2022

dataset 管理数据

 

前端框架ECharts 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)指定数据到视觉的映射,从而形成图表。 数据和其他配置可以分开。数据始终在变化,其他配置始终不变。分离易于单独管理。 数据可以被多个系列或组件重用。对于具有大量数据的场景,不必为每个系列创建一个数据。 支持更常见的数据格式,如二维数组、对象数组等,在一定程度上避免用户转换为数据格式。

前端框架ECharts dataset对数据可视化的高级管理

用 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]
    }
}]

前端框架ECharts dataset对数据可视化的高级管理

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

以上就是前端框架ECharts dataset对数据可视化的高级管理的详细内容,更多关于ECharts dataset数据可视化管理的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
jquery实现聊天机器人
Feb 08 jQuery
Vue router配置与使用分析讲解
Dec 24 #Vue.js
React更新渲染原理深入分析
Dec 24 #Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 #Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 #Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 #Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 #Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 #Javascript
You might like
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
Python科学画图代码分享
2017/11/29 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
pytorch打印网络结构的实例
2019/08/19 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
学python需要去培训机构吗
2020/07/01 Python
Python执行时间的几种计算方法
2020/07/31 Python
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
什么是GWT的Module
2013/01/20 面试题
办公室主任岗位职责
2013/11/08 职场文书
理货员的岗位职责
2013/11/23 职场文书
给物业的表扬信
2014/01/21 职场文书
测试工程师职业规划书
2014/02/06 职场文书
实习生岗位职责
2014/04/12 职场文书
媒体宣传策划方案
2014/05/25 职场文书
校庆活动策划方案
2014/06/05 职场文书
销售团队口号大全
2014/06/06 职场文书
电工实训报告总结
2014/11/05 职场文书
2014年信用社工作总结
2014/11/25 职场文书
考研复习计划
2015/01/19 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
运动会主持词大全
2015/07/02 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS