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 日期处理之时区问题
Oct 08 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
PHP语法速查表
2006/12/06 PHP
PHP 数组遍历顺序理解
2009/09/09 PHP
PHP 柱状图实现代码
2009/12/04 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
2011/04/28 Javascript
jquery easyui使用心得
2014/07/07 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python中的tuple元组详细介绍
2015/02/02 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python爬取网页信息的示例
2020/09/24 Python
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
文秘档案管理岗位职责
2014/03/06 职场文书
新教师岗前培训方案
2014/06/05 职场文书
工资收入证明
2014/10/07 职场文书
2016继续教育研修日志
2015/11/13 职场文书