前端框架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 相关文章推荐
图片完美缩放
Sep 07 Javascript
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 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
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
js编写简易的计算器
2020/07/29 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
django 模型中的计算字段实例
2020/05/19 Python
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
Shell如何接收变量输入
2016/08/06 面试题
应聘护士自荐信
2013/10/21 职场文书
小车司机岗位职责
2013/11/25 职场文书
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
产品质量承诺书
2014/03/27 职场文书
经理任命书模板
2014/06/06 职场文书
跑操口号
2014/06/12 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
个人投资合作协议书
2014/10/12 职场文书
放假通知
2015/04/14 职场文书
消费者投诉书范文
2015/07/02 职场文书
主婚人致辞精选
2015/07/28 职场文书
MySQL触发器的使用
2021/05/24 MySQL