ECharts transform数据转换和dataZoom在项目中使用


Posted in Javascript onDecember 24, 2022

transform 进行数据转换

ECharts transform数据转换和dataZoom在项目中使用

数据转换是这样一个公式:outData=f(inputData)。F是转换方法,例如filter、sort、region、boxplot、cluster、aggregate(todo)等。有了数据转换功能,我们至少可以做到以下几点: 将数据分成多个部分,并在不同的饼图中显示它们。 执行一些数据统计操作并显示结果。 使用一些数据可视化算法来处理数据并显示结果。 数据排序。 删除或直接选择数据项。

series: [{
        type: 'pie', radius: 50, center: ['25%', '50%'],
        // 这个饼图系列,引用了 index 为 `1` 的 dataset 。也就是,引用了上述
        // 2011 年那个 "filter" transform 的结果。
        datasetIndex: 1
    }, {
        type: 'pie', radius: 50, center: ['50%', '50%'],
        datasetIndex: 2
    }, {
        type: 'pie', radius: 50, center: ['75%', '50%'],
        datasetIndex: 3
    }]
};

在大多数情况下,转换只需要输出一个数据。然而,也有一些场景需要输出多个数据,每个数据可以由不同的系列或数据集使用。 例如,在内置的“boxplot”转换中,除了boxplot系列所需的数据外,还将生成异常值,并可以使用散点图系列进行显示。例如 我们提供配置数据集FromTransformResult,例如:

option: {
    dataset: [{
        source: [ ... ] // 原始数据
    }, {
        // 几个 transform 被声明成 array ,他们构成了一个链,
        // 前一个 transform 的输出是后一个 transform 的输入。
        transform: [{
            type: 'filter',
            config: { dimension: 'Product', value: 'Tofu' }
        }, {
            type: 'sort',
            config: { dimension: 'Year', order: 'desc' }
        }]
    }],
    series: {
        type: 'pie',
        // 这个系列引用上述 transform 的结果。
        datasetIndex: 1
    }
}

当使用转换时,有时我们将无法显示结果,而且我们不知道哪里出了问题。因此,这里提供了一个配置项转换。打印方便调试。此配置项仅在开发环境中生效。

option = {
    dataset: [{
        source: [ ... ]
    }, {
        transform: {
            type: 'filter',
            config: { ... }
            print: true
        }
    }],
    ...
}

配置为 true 后, transform 的结果,会被 console.log 打印出来。

ECharts transform数据转换和dataZoom在项目中使用

数据转换器“排序”还具有一些附加功能: 可以将多个维度一起排序。请参见下面的示例。 整理如下: 默认值是按数值排序。其中,“可转换为数值的字符串”也被转换为数值,并与其他数值一起按大小排序。 其他“无法转换为数值的字符串”也可以按字符串排序。此功能在这种情况下很有用:具有相同标记的数据项被分组在一起,特别是当多个维度被排序在一起时。

option = {
    dataset: [{
        dimensions: ['name', 'age', 'profession', 'score', 'date'],
        source: [
            [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
            ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
            [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
            ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
            [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
            [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
            ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
            [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
            ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'],
        ]
    }, {
        transform: {
            type: 'sort',
            config: [
                // 对两个维度按声明的优先级分别排序。
                { dimension: 'profession', order: 'desc' },
                { dimension: 'score', order: 'desc' }
            ]
        }
    }],
    series: {
        type: 'bar',
        datasetIndex: 1
    },
    ...
};

当对“数值和可以转换为数值的字符串”和“不能转换为数值”进行排序时,或者当它们与“其他类型的值”进行比较时,它们不知道如何比较自己。然后我们将“后者”称为“不可比”,并可以设置不可比:'min'|'max',以指定“不可比较”在该比较中是最大还是最小,以便它们可以产生比较结果。例如,此设置的目的是确定空值(如null、undefined、NaN、“”、“-”)是否位于排序的开始或结束。

type SortTransform = {
    type: 'filter';
    config: OrderExpression | OrderExpression[];
};
type OrderExpression = {
    dimension: DimensionName | DimensionIndex;
    order: 'asc' | 'desc';
    incomparable?: 'min' | 'max';
    parser?: 'time' | 'trim' | 'number';
};
type DimensionName = string;
type DimensionIndex = number;

filter:可以使用'time'|'trim'|'number',就像在数据转换器“filter”中一样。 如果要对时间进行排序(例如,值是JSDate实例或时间字符串,如“2012-03-12 11:13:54”),我们需要声明解析器:“time”。 如果我们需要对后缀值进行排序(例如“33%”、“16px”),我们需要声明parser:'number'。

dataZoom

ECharts transform数据转换和dataZoom在项目中使用

dataZoom组件用于在轴上执行“数据窗口缩放”和“数据窗口平移”操作。 可以使用dataZoom xAxisIndex或dataZoom YAxisIndex指定dataZoom控件的一个或多个数字轴。 同时可以有多个dataZoom组件,这些组件起到共同控制的作用。控制相同编号轴的组件将自动链接。下面的示例将详细解释。 dataZoom的工作原理是通过“数据过滤”来达到“数据窗口缩放”的效果。 数据过滤模式的不同设置具有不同的效果。dataZoom。过滤器模式。 目前,dataZoom支持两种类型的数据窗口范围设置: 百分比形式:dataZoomStart和dataZoom.end。 绝对数字形式:dataZoomStartValue和dataZoom.endValue。

option = {
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    dataZoom: [
        {   // 这个dataZoom组件,默认控制x轴。
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
        }
    ],
    series: [
        {
            type: 'scatter', // 这是个『散点图』
            itemStyle: {
                opacity: 0.8
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
        }
    ]
}

除了图表之外,ApacheEChartsTM还提供了许多交互式组件。例如: 图例组件图例、标题组件、可视化映射组件visualMap、数据区域缩放组件dataZoom、时间轴组件。 除了图表之外,ApacheEChartsTM还提供了许多交互式组件。例如: 图例组件图例、标题组件、可视化映射组件visualMap、数据区域缩放组件dataZoom、时间轴组件。

以上就是ECharts transform数据转换和dataZoom在项目中使用的详细内容,更多关于ECharts transform数据转换的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery属性过滤选择器使用示例
Jun 18 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
js实现表格筛选功能
Jan 18 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
Vue数据绑定简析小结
May 07 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 #Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 #Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 #Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 #Javascript
Moment的feature导致线上bug解决分析
Sep 23 #Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 #Javascript
js 实现验证码输入框示例详解
Sep 23 #Javascript
You might like
php 发送带附件邮件示例
2014/01/23 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
vue+element实现批量删除功能的示例
2018/02/28 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
总经理职责范文
2013/11/08 职场文书
普通话演讲稿
2014/09/03 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
小学同学聚会感言
2015/07/30 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
使用Django框架创建项目
2022/06/10 Python