1. Python技术站首页
  2. 其他
  3. JavaScript

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

• JavaScript
yizhihongxing

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)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript工具库MyTools详解

    JavaScript工具库MyTools详解 什么是MyTools MyTools是一个JavaScript工具库，提供了常见的JavaScript操作方法，使得开发者在开发过程中能够快速、便捷地实现一些功能，提高开发效率。 如何使用MyTools 使用MyTools需要在项目中引入MyTools的js文件。 以下是一个使用的例子： <script t…

    JavaScript 2023年6月10日
    00

  • 文件上传插件SWFUpload的使用指南

    文件上传插件SWFUpload的使用指南 SWFUpload是一款基于Flash技术的文件上传插件，具备多文件同时上传、文件类型限制、进度条显示等功能。下面将为你详细介绍SWFUpload的使用指南。 步骤一：下载SWFUpload文件 SWFUpload的下载地址为：https://github.com/jacksbox/SWFUpload/release…

    JavaScript 2023年6月10日
    00

  • JS简单判断字符在另一个字符串中出现次数的2种常用方法

    让我来介绍一下JS简单判断字符串在另一个字符串中出现次数的2种常用方法。下面将结合代码给出具体的示例： 1. 方法一：for循环遍历字符串 // 定义待匹配字符和被匹配字符 const targetStr = "hello"; const sourceStr = "hello world, hello everyone&quot…

    JavaScript 2023年5月28日
    00

  • js针对图片加载失败的处理方法分析

    “js针对图片加载失败的处理方法分析”是前端开发中常见的问题之一。下面我会为大家详细讲解一下如何处理图片加载失败的情况。具体攻略分为以下几步： 1. 在HTML中添加图像元素 我们可以在HTML中通过添加<img>元素来加载图片，通常的写法为： <img src="图片地址" alt="图片描述"&g…

    JavaScript 2023年5月28日
    00

  • javascript 闭包详解及简单实例应用

    JavaScript 闭包详解及简单实例应用 在 JavaScript 中，闭包是一个重要的概念，也是一个令人困惑的概念。理解闭包的概念和用法，可以大幅提高你的 JavaScript 编程水平。在这篇文章中，我们将介绍什么是闭包，为什么需要它们，并且演示几个具体的使用场景。 什么是闭包？ 闭包是指在函数内部定义的函数，该函数可以访问在外部函数作用域中声明的变…

    JavaScript 2023年6月11日
    00

  • 原生JavaScript来实现对dom元素class的操作方法(推荐)

    为了实现对DOM元素class的操作，原生JavaScript提供了一些方法，以下是完整攻略： 一、查找DOM 首先，我们需要使用document.querySelector()或document.querySelectorAll()方法获取要操作的元素。 document.querySelector()方法返回文档中第一个匹配指定选择器的元素。示例如下： …

    JavaScript 2023年6月10日
    00

  • 常用的9个JavaScript图表库详解

    常用的9个JavaScript图表库详解 1. Chart.js Chart.js 是一个使用 HTML5 canvas 元素创建图表的 JavaScript 库。它可以绘制多种类型的图表，例如线性图、柱状图、饼图等等。 Chart.js 具有良好的文档和易于使用的 API。它适合初学者和有经验的开发者。 以下是一个简单的例子： <canvas id=…

    JavaScript 2023年5月27日
    00

  • JS正则表达式比较常见用法

    接下来我来为大家详细讲解JS正则表达式比较常见用法的完整攻略。 什么是正则表达式？ 正则表达式是一种在字符串中匹配模式的方式。在JS编程中，我们可以使用正则表达式来实现字符串的搜索、替换以及分隔等操作。JS中的正则表达式都是一个对象，我们可以通过RegExp类来创建。 如何创建正则表达式 有两种方式创建正则表达式，分别为使用字面量和使用构造函数： 使用字面量…

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