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 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
jQuery html()等方法介绍
Nov 18 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
vue中data里面的数据相互使用方式
Jun 05 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
常用的php ADODB使用方法集锦
2008/03/25 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
php异常处理使用示例
2014/02/25 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
Python线程详解
2015/06/24 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
python+requests接口自动化框架的实现
2020/08/31 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
经典c++面试题二
2015/08/14 面试题
建议书怎么写
2014/03/12 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
村安全生产责任书
2014/08/25 职场文书
学习nginx基础知识
2021/09/04 Servers