前端框架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 相关文章推荐
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
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安装全攻略:APACHE
2006/10/09 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP count()函数讲解
2019/02/03 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
js 操作符实例代码
2009/10/24 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
js简单抽奖代码
2015/01/16 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
营销与策划个人求职信
2013/09/22 职场文书
高二政治教学反思
2014/02/01 职场文书
周年庆促销方案
2014/03/15 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
导师推荐信范文
2014/05/09 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
文明家庭事迹材料
2014/12/20 职场文书
导师对论文的学术评语
2015/01/04 职场文书
国庆节慰问信
2015/02/15 职场文书