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判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
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
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
JQuery下拉框应用示例介绍
2014/04/23 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
Python 深入理解yield
2008/09/06 Python
python 获取文件列表(或是目录例表)
2009/03/25 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
python 文件查找及内容匹配方法
2018/10/25 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
村干部四风问题整改措施
2014/09/30 职场文书
购房个人委托书范本
2014/10/11 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
撤诉申请怎么写
2015/05/19 职场文书
党员转正大会主持词
2015/07/02 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
导游词之扬州大明寺
2019/10/09 职场文书