\n'}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/046162615fcf1ace21da.js b/docs/_nuxt/js/046162615fcf1ace21da.js
new file mode 100644
index 000000000..24a25d76d
--- /dev/null
+++ b/docs/_nuxt/js/046162615fcf1ace21da.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{336:function(e,n,t){"use strict";t.r(n),n.default="# Data Transform\n\n`Data transform` has been supported since Apache EChartsTM 5. In echarts, the term `data transform` means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common \"transform functions\" to make that kind of tasks \"out-of-the-box\". (For consistency in the context, the noun form of the word we keep using the \"transform\" rather than \"transformation\").\n\nThe abstract formula of data transform is: `outData = f(inputData)`, where the transform function `f` can be like `filter`, `sort`, `regression`, `boxplot`, `cluster`, `aggregate`(todo) ...\nWith the help of those transform methods, users can be implements the features like:\n\n- Partition data into multiple series.\n- Make some statistics and visualize the result.\n- Adapt some visualization algorithms to data and display the result.\n- Sort data.\n- Remove or choose some kind of empty or special datums.\n- ...\n\n## Get Started to Data Transform\n\nIn echarts, data transform is implemented based on the concept of [dataset](~${optionPath}#dataset). A [dataset.transform](${optionPath}#dataset.transform) can be configured in a dataset instance to indicate that this dataset is to be generated from this `transform`. For example:\n\n```js live\nvar option = {\n dataset: [\n {\n // This dataset is on `datasetIndex: 0`.\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Cereal', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Dumpling', 341, 25, 2011],\n ['Biscuit', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Cereal', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Dumpling', 241, 27, 2012],\n ['Biscuit', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Cereal', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Dumpling', 281, 31, 2013],\n ['Biscuit', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Cereal', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Dumpling', 211, 35, 2014],\n ['Biscuit', 72, 24, 2014]\n ]\n // id: 'a'\n },\n {\n // This dataset is on `datasetIndex: 1`.\n // A `transform` is configured to indicate that the\n // final data of this dataset is transformed via this\n // transform function.\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2011 }\n }\n // There can be optional properties `fromDatasetIndex` or `fromDatasetId`\n // to indicate that where is the input data of the transform from.\n // For example, `fromDatasetIndex: 0` specify the input data is from\n // the dataset on `datasetIndex: 0`, or `fromDatasetId: 'a'` specify the\n // input data is from the dataset having `id: 'a'`.\n // [DEFAULT_RULE]\n // If both `fromDatasetIndex` and `fromDatasetId` are omitted,\n // `fromDatasetIndex: 0` are used by default.\n },\n {\n // This dataset is on `datasetIndex: 2`.\n // Similarly, if neither `fromDatasetIndex` nor `fromDatasetId` is\n // specified, `fromDatasetIndex: 0` is used by default\n transform: {\n // The \"filter\" transform filters and gets data items only match\n // the given condition in property `config`.\n type: 'filter',\n // Transforms has a property `config`. In this \"filter\" transform,\n // the `config` specify the condition that each result data item\n // should be satisfied. In this case, this transform get all of\n // the data items that the value on dimension \"Year\" equals to 2012.\n config: { dimension: 'Year', value: 2012 }\n }\n },\n {\n // This dataset is on `datasetIndex: 3`\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2013 }\n }\n }\n ],\n series: [\n {\n type: 'pie',\n radius: 50,\n center: ['25%', '50%'],\n // In this case, each \"pie\" series reference to a dataset that has\n // the result of its \"filter\" transform.\n datasetIndex: 1\n },\n {\n type: 'pie',\n radius: 50,\n center: ['50%', '50%'],\n datasetIndex: 2\n },\n {\n type: 'pie',\n radius: 50,\n center: ['75%', '50%'],\n datasetIndex: 3\n }\n ]\n};\n```\n\nLet's summarize the key points of using data transform:\n\n- Generate new data from existing declared data via the declaration of `transform`, `fromDatasetIndex`/`fromDatasetId` in some blank dataset.\n- Series references these datasets to show the result.\n\n## Advanced Usage\n\n#### Piped Transform\n\nThere is a syntactic sugar that pipe transforms like:\n\n```js\noption = {\n dataset: [\n {\n source: [] // The original data\n },\n {\n // Declare transforms in an array to pipe multiple transforms,\n // which makes them execute one by one and take the output of\n // the previous transform as the input of the next transform.\n transform: [\n {\n type: 'filter',\n config: { dimension: 'Product', value: 'Tofu' }\n },\n {\n type: 'sort',\n config: { dimension: 'Year', order: 'desc' }\n }\n ]\n }\n ],\n series: {\n type: 'pie',\n // Display the result of the piped transform.\n datasetIndex: 1\n }\n};\n```\n\n> Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe).\n\n#### Output Multiple Data\n\nIn most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series.\n\nFor example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the [example](${exampleEditorPath}boxplot-light-velocity).\n\nWe use prop [dataset.fromTransformResult](${optionPath}#dataset.fromTransformResult) to satisfy this requirement. For example:\n\n```js\noption = {\n dataset: [\n {\n // Original source data.\n source: []\n },\n {\n transform: {\n type: 'boxplot'\n }\n // After this \"boxplot transform\" two result data generated:\n // result[0]: The boxplot data\n // result[1]: The outlier data\n // By default, when series or other dataset reference this dataset,\n // only result[0] can be visited.\n // If we need to visit result[1], we have to use another dataset\n // as follows:\n },\n {\n // This extra dataset references the dataset above, and retrieves\n // the result[1] as its own data. Thus series or other dataset can\n // reference this dataset to get the data from result[1].\n fromDatasetIndex: 1,\n fromTransformResult: 1\n }\n ],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n name: 'boxplot',\n type: 'boxplot',\n // Reference the data from result[0].\n datasetIndex: 1\n },\n {\n name: 'outlier',\n type: 'scatter',\n // Reference the data from result[1].\n datasetIndex: 2\n }\n ]\n};\n```\n\nWhat more, [dataset.fromTransformResult](${optionPath}#dataset.fromTransformResult) and [dataset.transform](${optionPath}#dataset.transform) can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by `fromTransformResult`. For example:\n\n```js\n{\n fromDatasetIndex: 1,\n fromTransformResult: 1,\n transform: {\n type: 'sort',\n config: { dimension: 2, order: 'desc' }\n }\n}\n```\n\n#### Debug in Develop Environment\n\nWhen using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property `transform.print` might help in such case. (`transform.print` is only available in dev environment).\n\n```js\noption = {\n dataset: [\n {\n source: []\n },\n {\n transform: {\n type: 'filter',\n config: {},\n // The result of this transform will be printed\n // in dev tool via `console.log`.\n print: true\n }\n }\n ]\n};\n```\n\n## Filter Transform\n\nTransform type \"filter\" is a built-in transform that provide data filter according to specified conditions. The basic option is like:\n\n```js live\noption = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Latte', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Milk Tee', 341, 25, 2011],\n ['Porridge', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Latte', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Milk Tee', 241, 27, 2012],\n ['Porridge', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Latte', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Milk Tee', 281, 31, 2013],\n ['Porridge', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Latte', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Milk Tee', 211, 35, 2014],\n ['Porridge', 72, 24, 2014]\n ]\n },\n {\n transform: {\n type: 'filter',\n config: { dimension: 'Year', '=': 2011 }\n // The config is the \"condition\" of this filter.\n // This transform traverse the source data and\n // and retrieve all the items that the \"Year\"\n // is `2011`.\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n```\n\nThis is another example of filter transform:\n\nGet Apache ECharts
Apache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project.
- Install From npm
- Use From CDN
- Download From GitHub
- Online Customization
We'll go over each of these installation methods and the directory structure after download.
Installation
Install From npm
npm install echartsSee Import ECharts for details on usage.
Use From CDN
ECharts is available on the following free CDNs:
Download From GitHub
You can find links to each version on the releases page of the apache/echarts project. Click on the Source code under Assets at the bottom of the desired release version. After downloading, unzip the file and locate echarts.js file in the dist folder to include the full ECharts functionality.
Online Customization
If you want to introduce only some modules to reduce package size, you can use the ECharts online customization function to create a customized download of ECharts.
