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

ECharts transform数据转换和dataZoom在项目中使用是数据可视化中非常重要的一部分,本文将会从以下几个方面来进行讲解:

  1. transform数据转换的基本概念及使用方法
  2. 示例说明transform数据转换的用法
  3. dataZoom使用方法及示例

1. transform数据转换的基本概念及使用方法

在ECharts中,数据转换是一种通过对数据进行计算、过滤和补全等操作,从而得到需要展示的数据形式的技术手段。而使用transform进行数据转换的方法,可以帮助我们完成更加复杂的数据展示效果。

option = {
    xAxis: {},
    yAxis: {},
    series: {
        type: 'line',
        encode: {
            x: 'date',
            y: 'open',
            tooltip: ['open', 'close', 'lowest', 'highest']
        },
        dataset: {
        source: [
                {date: '2022/1/1', open: 100, close: 130, lowest: 80, highest: 134},
                {date: '2022/1/2', open: 120, close: 150, lowest: 90, highest: 154},
                {date: '2022/1/3', open: 140, close: 170, lowest: 110, highest: 173},
                {date: '2022/1/4', open: 110, close: 140, lowest: 70, highest: 148},
                {date: '2022/1/5', open: 130, close: 165, lowest: 105, highest: 170},
                {date: '2022/1/6', open: 150, close: 190, lowest: 110, highest: 195}
            ]
        },
        transform: {
            type: 'filter',
            config: {
                and: [
                    {dimension: 'date', '>=': '2022/1/2'},
                    {dimension: 'date', '<=': '2022/1/5'}
                ]
            }
        }
    }
};

以上是ECharts官网提供的基本数据转换代码示例,使用transform进行数据转换,过滤掉不需要的数据。

transform具体参数含义:

  • type:表示数据转换的类型,如:filter、sort、aggregate等。
  • config:表示数据转换所需的配置信息。

2. 示例说明transform数据转换的用法

我们可以通过下面的示例演示数据转换的几种用法。

option = {
    xAxis: {},
    yAxis: {},
    series: {
        type: 'line',
        encode: {
            x: 'date',
            y: 'price'
        },
        dataset: {
            source: [
                {date: '1月1日', price: 128},
                {date: '1月2日', price: 132},
                {date: '1月3日', price: 151},
                {date: '1月4日', price: 122},
                {date: '1月5日', price: 152},
                {date: '1月6日', price: 163},
                {date: '1月7日', price: 159},
                {date: '1月8日', price: 128},
                {date: '1月9日', price: 114},
                {date: '1月10日', price: 139},
                {date: '1月11日', price: 178},
                {date: '1月12日', price: 162},
                {date: '1月13日', price: 145},
                {date: '1月14日', price: 123},
                {date: '1月15日', price: 137},
                {date: '1月16日', price: 142},
                {date: '1月17日', price: 128},
                {date: '1月18日', price: 157},
                {date: '1月19日', price: 168},
                {date: '1月20日', price: 155}
            ]
        },
        transform: {
            type: 'filter',
            config: {
                dimension: 'price',
                '>': 140
            }
        }
    }
};

以上示例使用了filter(过滤)的transform数据转换方法,在数据集中过滤出价格大于140的数据进行展示。

下面再给出一个transform数据转换的操作示例:

option = {
    xAxis: {},
    yAxis: {},
    series: {
        type: 'line',
        encode: {
            x: 'date',
            y: 'price'
        },
        dataset: {
            source: [
                {date: '1月1日', price: {value: 128, label: '偏高'}},
                {date: '1月2日', price: {value: 132, label: '正常'}},
                {date: '1月3日', price: {value: 151, label: '正常'}},
                {date: '1月4日', price: {value: 122, label: '偏低'}},
                {date: '1月5日', price: {value: 152, label: '正常'}},
                {date: '1月6日', price: {value: 163, label: '偏高'}},
                {date: '1月7日', price: {value: 159, label: '偏高'}},
                {date: '1月8日', price: {value: 128, label: '偏高'}},
                {date: '1月9日', price: {value: 114, label: '偏低'}},
                {date: '1月10日', price: {value: 139, label: '正常'}},
                {date: '1月11日', price: {value: 178, label: '偏高'}},
                {date: '1月12日', price: {value: 162, label: '正常'}},
                {date: '1月13日', price: {value: 145, label: '正常'}},
                {date: '1月14日', price: {value: 123, label: '偏低'}},
                {date: '1月15日', price: {value: 137, label: '正常'}},
                {date: '1月16日', price: {value: 142, label: '正常'}},
                {date: '1月17日', price: {value: 128, label: '偏高'}},
                {date: '1月18日', price: {value: 157, label: '正常'}},
                {date: '1月19日', price: {value: 168, label: '偏高'}},
                {date: '1月20日', price: {value: 155, label: '正常'}}
            ]
        },
        transform: {
            type: 'map',
            config: {
                from: 'price',
                to: 'price.value'
            }
        }
    }
};

以上示例使用了map(映射)方法,将二级结构体中的数据映射到一级结构体中的一个新属性中,方便后续的数据使用和展示。

3. dataZoom使用方法及示例

dataZoom是ECharts中展示和处理大量数据时非常有用的一种功能,可以通过缩放来展示某个区间内的数据,这对于大量数据展示非常有用。

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
            '1月1日', '1月2日', '1月3日', '1月4日', '1月5日',
            '1月6日', '1月7日', '1月8日', '1月9日', '1月10日',
            '1月11日', '1月12日', '1月13日', '1月14日', '1月15日',
            '1月16日', '1月17日', '1月18日', '1月19日', '1月20日'
        ]
    },
    yAxis: {},
    series: {
        type: 'line',
        encode: {
            x: 'date',
            y: 'price'
        },
        dataset: {
            source: [
                {date: '1月1日', price: {value: 128, label: '偏高'}},
                {date: '1月2日', price: {value: 132, label: '正常'}},
                {date: '1月3日', price: {value: 151, label: '正常'}},
                {date: '1月4日', price: {value: 122, label: '偏低'}},
                {date: '1月5日', price: {value: 152, label: '正常'}},
                {date: '1月6日', price: {value: 163, label: '偏高'}},
                {date: '1月7日', price: {value: 159, label: '偏高'}},
                {date: '1月8日', price: {value: 128, label: '偏高'}},
                {date: '1月9日', price: {value: 114, label: '偏低'}},
                {date: '1月10日', price: {value: 139, label: '正常'}},
                {date: '1月11日', price: {value: 178, label: '偏高'}},
                {date: '1月12日', price: {value: 162, label: '正常'}},
                {date: '1月13日', price: {value: 145, label: '正常'}},
                {date: '1月14日', price: {value: 123, label: '偏低'}},
                {date: '1月15日', price: {value: 137, label: '正常'}},
                {date: '1月16日', price: {value: 142, label: '正常'}},
                {date: '1月17日', price: {value: 128, label: '偏高'}},
                {date: '1月18日', price: {value: 157, label: '正常'}},
                {date: '1月19日', price: {value: 168, label: '偏高'}},
                {date: '1月20日', price: {value: 155, label: '正常'}}
            ]
        },
        dataZoom: {
            type: 'slider',
            orient: 'vertical',
            start: 0,
            end: 100
        }
    }
};

以上代码示例,使用dataZoom中的slider类型,展示了下方图表区间内的所有数据,并提供了缩放功能,可以通过拖动滑块来缩放展示区间。

另一个dataZoom示例:

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
            '1月1日', '1月2日', '1月3日', '1月4日', '1月5日',
            '1月6日', '1月7日', '1月8日', '1月9日', '1月10日',
            '1月11日', '1月12日', '1月13日', '1月14日', '1月15日',
            '1月16日', '1月17日', '1月18日', '1月19日', '1月20日'
        ]
    },
    yAxis: {},
    series: {
        type: 'line',
        encode: {
            x: 'date',
            y: 'price'
        },
        dataset: {
            source: [
                {date: '1月1日', price: 128},
                {date: '1月2日', price: 132},
                {date: '1月3日', price: 151},
                {date: '1月4日', price: 122},
                {date: '1月5日', price: 152},
                {date: '1月6日', price: 163},
                {date: '1月7日', price: 159},
                {date: '1月8日', price: 128},
                {date: '1月9日', price: 114},
                {date: '1月10日', price: 139},
                {date: '1月11日', price: 178},
                {date: '1月12日', price: 162},
                {date: '1月13日', price: 145},
                {date: '1月14日', price: 123},
                {date: '1月15日', price: 137},
                {date: '1月16日', price: 142},
                {date: '1月17日', price: 128},
                {date: '1月18日', price: 157},
                {date: '1月19日', price: 168},
                {date: '1月20日', price: 155}
            ]
        },
        dataZoom: [{
            type: 'inside',
            start: 0,
            end: 100
        }, {
            start: 0,
            end: 100,
            top: '90%',
            type: 'slider',
            labelFormatter: '{value}%'
        }]
    }
};

以上代码示例,使用了ECharts中的两个数据缩放工具,一个是内置的inside,另一个是slider,用于缩放展示区间,并显示缩放比例。其中slider工具的位置并不在上下边缘,而是独立在下方,并配以特定样式。

以上就是ECharts transform数据转换和dataZoom在项目中使用的完整攻略。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:ECharts transform数据转换和dataZoom在项目中使用 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析

    JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析 什么是函数式编程 函数式编程是一种编程范式,它的主要思想是把函数作为一等公民来看待,将它们作为值来操作和传递。在函数式编程中,函数具有不可变性,也就是说,它们不能修改传递给它们的参数,也不能修改全局变量或状态。 函数…

    JavaScript 2023年5月27日
    00
  • AngularJs expression详解及简单示例

    下面是详细的“AngularJs expression详解及简单示例”的攻略。 什么是AngularJS表达式 AngularJS表达式是一个AngularJS模板内的小片段,用于绑定到AngularJS编译器$compile的作用域属性。表达式以{{ expression }}的形式出现在双括号中,它们绑定到当前作用域上的JavaScript变量。通俗点说…

    JavaScript 2023年6月11日
    00
  • 基于JS代码实现实时显示系统时间

    创建一个HTML文件并添加一个div标签来展示时间信息。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>实时显示系统时间</title> </head> <body> …

    JavaScript 2023年5月27日
    00
  • JavaScript+html5 canvas制作的百花齐放效果完整实例

    下面我将为您详细讲解“JavaScript+html5 canvas制作的百花齐放效果完整实例”的完整攻略。 需求分析 首先我们需要明确需求,对于“JavaScript+html5 canvas制作的百花齐放效果完整实例”,我们需要实现什么样的效果呢? 具体而言,我们需要实现以下特点: 在canvas上绘制出多个不同颜色、不同形状的花朵 花朵应该随机飘落、旋…

    JavaScript 2023年6月10日
    00
  • javascript日期验证之输入日期大于等于当前日期

    针对“javascript日期验证之输入日期大于等于当前日期”这个问题,我们可以采用如下的步骤进行处理: 步骤一:获取用户输入的日期并与当前日期进行比较 我们可以使用Date对象来获取当前日期,然后将用户输入的日期与其进行比较,判断用户输入的日期是否大于等于当前日期。代码如下: // 获取当前日期 var currentDate = new Date(); …

    JavaScript 2023年6月10日
    00
  • JS开发自己的类库实例分析

    JS开发自己的类库需要经过以下步骤: 步骤一:确定类库的功能 在开发类库之前,需要确定我们想要实现的功能。这些功能需要与当前市场上主流的类库有一定的区别,也可以是现有类库中不足之处的补充。例如,可以考虑开发一个支持异步请求的类库,或者是在表单验证方面做出针对性的改进。 步骤二:编写代码 确定了功能之后,就可以开始编写代码了。在编写代码的过程中,需要注意以下几…

    JavaScript 2023年5月28日
    00
  • JavaScript Navigator对象(浏览器相关对象)

    JavaScript的Navigator对象代表浏览器的导航信息,即浏览器相关的信息,它包含了一些有关浏览器和系统的信息,例如浏览器的名称、版本、语言、操作系统等。可以通过访问一些属性和方法来获取这些信息。下面,将详细讲解Navigator对象并提供代码示例。 1. 属性 (1)appName 描述:返回当前浏览器的名称(不考虑版本号) 代码: consol…

    Web开发基础 2023年3月30日
    00
  • JS实现的简单表单验证功能完整实例

    下面是JS实现的简单表单验证功能完整实例的攻略。 标题 JS实现的简单表单验证功能完整实例 步骤说明 第一步:HTML部分 在HTML页面中,需要根据需求设置表单元素,包括表单元素的类型、属性以及相关样式。示例如下: <!DOCTYPE html> <html> <head> <title>表单验证</t…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部