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 相关文章推荐
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 Javascript
JavaScript前端面试组合函数
Jun 21 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 静态页面中显示动态内容
2009/08/14 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python如何快速实现分布式任务
2017/07/06 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
几个MySql的面试题
2013/04/22 面试题
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
医德医风学习心得体会
2016/01/25 职场文书
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS