| (window.webpackJsonp=window.webpackJsonp||[]).push([[62],{356:function(e,n,t){"use strict";t.r(n),n.default="# Visual Map of Data\n\nData visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual channels.\n\nEvery type of charts in Apache ECharts<sup>TM</sup> has this built-in mapping procedure. For example, line chart map data into _lines_, bar chart map data into _height_. Some more complicated charts, like `graph`, `themeRiver`, and `treemap` have their own built-in mapping.\n\nBesides, ECharts provides [visualMap component](${optionPath}visualMap) for general visual mapping. Visual elements allowed in `visualMap` component are:\n\n- `symbol`, `symbolSize`\n- `color`, `opacity`, `colorAlpha`,\n- `colorLightness`, `colorSaturation`, `colorHue`\n\nNext, we are going to introduce how to use `visualMap` component.\n\n## Data and Dimension\n\nData are usually stored in [series.data](${optionPath}series.data) in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).\n\nFor example, [series.data](${optionPath}series.data) is the most common form, which is a `list`, a common array:\n\n```js\nseries: {\n data: [\n {\n // every item here is a dataItem\n value: 2323, // this is data value\n itemStyle: {}\n },\n 1212, // it can also be a value of dataItem, which is a more common case\n 2323, // every data value here is one dimension\n 4343,\n 3434\n ];\n}\n```\n\n```js\nseries: {\n data: [\n {\n // every item here is a dataItem\n value: [3434, 129, 'San Marino'], // this is data value\n itemStyle: {}\n },\n [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case\n [2323, 3223, 'Nauru'], // every data value here is three dimension\n [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,\n // the second dimension to y axis,\n // and the third dimension to symbolSize\n ];\n}\n```\n\nUsually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, `visualMap` is what you need. Most likely, [scatter charts](${optionPath}series-scatter) use radius to represent the third dimension.\n\n## The visualMap Component\n\nvisualMap component defines the mapping from _which dimension of data_ to _what visual elements_.\n\nThe following two types of visualMap components are supported, identified with [visualMap.type](${optionPath}visualMap.type).\n\nIts structure is defined as:\n\n```js\noption = {\n visualMap: [\n // can define multiple visualMap components at the same time\n {\n // the first visualMap component\n type: 'continuous' // defined as continuous visualMap\n // ...\n },\n {\n // the second visualMap component\n type: 'piecewise' // defined as discrete visualMap\n // ...\n }\n ]\n // ...\n};\n```\n\n## Continuous and Piecewise Visual Mapping Components\n\nThe visual mapping component of ECharts is divided into continuous ([visualMapContinuous](${optionPath}visualMap-continuous)) and piecewise ([visualMapPiecewise](${optionPath}visualMap-piecewise)).\n\nContinuous means that the data dimension for visual mapping is a continuous value, while piecewise means that the data is divided into multiple segments or discrete data.\n\n### Continuous Visual Mapping\n\nContinuous type visual mapping can determine the range of visual mapping by specifying the maximum and minimum values.\n\n```js\noption = {\n visualMap: [\n {\n type: 'piecewise',\n min: 0,\n max: 5000,\n dimension: 3, // the fourth dimension of series.data (i.e. value[3]) is mapped\n seriesIndex: 4, // The fourth series is mapped.\n inRange: {\n // The visual configuration in the selected range\n color: ['blue', '#121122', 'red'], // A list of colors that defines the graph color mapping\n // the minimum value of the data is mapped to 'blue', and\n // the maximum value is mapped to 'red', // the maximum value is mapped to 'red', // the maximum value is mapped to 'red'.\n // The rest is automatically calculated linearly.\n symbolSize: [30, 100] // Defines the mapping range for the graphic size.\n // The minimum value of the data is mapped to 30, // and the maximum value is mapped to 100.\n // The maximum value is mapped to 100.\n // The rest is calculated linearly automatically.\n },\n outOfRange: {\n // Check the out of range visual configuration\n symbolSize: [30, 100]\n }\n }\n // ...\n ]\n};\n```\n\nwhere [visualMap.inRange](${optionPath}visualMap.inRange) indicates the style used for data within the data mapping range; while [visualMap.outOfRange](${optionPath}visualMap.outOfRange) specifies the style for data outside the mapping range.\n\n[visualMap.dimension](~visualMap.dimension) specifies which dimension of the data will be visually mapped.\n\n### Piecewise Visual Mapping\n\nThe piecewise visual mapping component has three modes.\n\n- Continuous data average segmentation: based on [visualMap-piecewise.splitNumber](${optionPath}visualMap-piecewise.splitNumber) to automatically split the data into pieces equally.\n- Continuous data custom segmentation: define the range of each piece based on [visualMap-piecewise.pieces](${optionPath}visualMap-piecewise.pieces).\n- Discrete data (categorical data): categories are defined in [visualMap-piecewise.categories](${optionPath}visualMap-piecewise.categories).\n\nTo use segmented visual map, you need to set `type` to `'piecewise'` and choose one of the above three configuration items.\n"}}]); |