| window.__EC_DOC_option_visualMap_piecewise = { |
| "type": { |
| "desc": "<p>Used to determine it is a piecewise visualMap component.</p>\n" |
| }, |
| "id": { |
| "desc": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n" |
| }, |
| "splitNumber": { |
| "desc": "\n\n<p>Continuous data can be divide into pieces averagely according to splitNumber, that is, if splitNumber is 5, data will be sliced into 5 pieces.</p>\n<p>The range of continuous data should be defined by <a href=\"#visualMap-piecewise.max\">max</a> and <a href=\"#visualMap-piecewise.min\">min</a>.</p>\n<p>If <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> or <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set up, the <code class=\"codespan\">splitNumber</code> will not be used any more.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "pieces": { |
| "desc": "<p>Used to customize how to slice continuous data, and some specific view style for some pieces. For instance:</p>\n<pre><code class=\"lang-javascript\">pieces: [\n // Range of a piece can be specified by property min and max,\n // where min will be set as -Infinity if ignored,\n // and max will be set as Infinity if ignored.\n {min: 1500},\n {min: 900, max: 1500},\n {min: 310, max: 1000},\n {min: 200, max: 300},\n // Label of the piece can be specified.\n {min: 10, max: 200, label: '10 to 200 (custom label) '},\n // Color of the piece can be specified.\n {value: 123, label: '123 (custom special color) ', color: 'grey'},\n {max: 5}\n]\n</code></pre>\n<p>These visual channel can be customized in each piece:</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=doc-example/map-visualMap-pieces&edit=1&reset=1\" target=\"_blank\">Sample</a></p>\n<p> (Notes: In ECharts2, <code class=\"codespan\">pieces</code> is called <code class=\"codespan\">splitList</code>, which is retained in ECharts3 for compatibility. But <code class=\"codespan\">pieces</code> is recommended.)</p>\n<p>You would realize the sequence in <code class=\"codespan\">pieces</code> by a simple trial. See more detailed rules in <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n" |
| }, |
| "categories": { |
| "desc": "<p>When dataValues in series.data (specified by <a href=\"#visualMap-piecewise.dimension\">visualMap-piecewise.dimension</a>) are discrete (or also known as category data or enumerable data), and we intend to perform <strong>Table Mapping</strong> from dataValue to visual channels, <code class=\"codespan\">categories</code> is used to describe the entire enumeration of data. For instance:</p>\n<pre><code class=\"lang-javascript\">categories: [\n 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n],\n</code></pre>\n<p><a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Sample</a></p>\n<p>You would realize the sequence in <code class=\"codespan\">categories</code> by a simple trial. See more detailed rules in <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n" |
| }, |
| "min": { |
| "desc": "\n\n<p>Specify the min dataValue for the visualMap component. <code class=\"codespan\">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), <code class=\"codespan\">max</code> and <code class=\"codespan\">min</code> doesn't need to be specified.</p>\n<p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), they should be specified explicitly, and be <code class=\"codespan\">[0, 200]</code> by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n", |
| "uiControl": { |
| "type": "number" |
| } |
| }, |
| "max": { |
| "desc": "\n\n<p>Specify the max dataValue for the visualMap component. <code class=\"codespan\">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), <code class=\"codespan\">max</code> and <code class=\"codespan\">min</code> doesn't need to be specified.</p>\n<p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), they should be specified explicitly, and be <code class=\"codespan\">[0, 200]</code> by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n", |
| "uiControl": { |
| "type": "number" |
| } |
| }, |
| "minOpen": { |
| "desc": "\n\n<p>This option works when <code class=\"codespan\">type</code> is <code class=\"codespan\">piecewise</code> and <code class=\"codespan\">min</code>/<code class=\"codespan\">max</code>/<code class=\"codespan\">splitNumber</code> are set.</p>\n<p>If it is set as <code class=\"codespan\">true</code>, an extra piece labeled with "< min" will show.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "maxOpen": { |
| "desc": "\n\n<p>This option works when <code class=\"codespan\">type</code> is <code class=\"codespan\">piecewise</code> and <code class=\"codespan\">min</code>/<code class=\"codespan\">max</code>/<code class=\"codespan\">splitNumber</code> are set.</p>\n<p>If it is set as <code class=\"codespan\">true</code>, an extra piece labeled with "> max" will show.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "selectedMode": { |
| "desc": "\n\n<p>Selected Mode could be:</p>\n<ul>\n<li><code class=\"codespan\">'multiple'</code> (multiple selection).</li>\n<li><code class=\"codespan\">'single'</code> (single selection).</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "single,multiple" |
| } |
| }, |
| "inverse": { |
| "desc": "\n\n<p>Whether to inverse the layout of visualMap component.</p>\n<ul>\n<li><p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), the rule of data layout is the same as <a href=\"#visualMap-continuous.inverse\">visualMap-continuous.inverse</a>.</p>\n</li>\n<li><p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), the layout of each piece is determined by the their order in the definition of <code class=\"codespan\">pieces</code> or <code class=\"codespan\">categories</code>, namely:</p>\n<ul>\n<li><p>When <code class=\"codespan\">inverse</code> is <code class=\"codespan\">false</code>:</p>\n<ul>\n<li><p>When <a href=\"#visualMap.orient\">visualMap.orient</a> is <code class=\"codespan\">'vertical'</code>, pieces[0] or categories[0] correspond to upward side.</p>\n</li>\n<li><p>When <a href=\"#visualMap.orient\">visualMap.orient</a> is <code class=\"codespan\">'horizontal'</code>, pieces[0] or categories[0] correspond to left side.</p>\n</li>\n</ul>\n</li>\n<li><p>When <code class=\"codespan\">inverse</code> is <code class=\"codespan\">true</code>, the results are opposite to above.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>If you just have a try, you'll know it is not so complicated.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "precision": { |
| "desc": "\n\n<p>The decimal precision of label, defaults to be 0 (no decimals).</p>\n<ul>\n<li><p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), the rule of data layout is the same as <a href=\"#visualMap-continuous.inverse\">visualMap-continuous.inverse</a>, decimal percision auto adapts to series.data.</p>\n</li>\n<li><p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), decimal percision defaults to be 0 (no decimals):</p>\n</li>\n</ul>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1" |
| } |
| }, |
| "itemWidth": { |
| "desc": "\n\n<p>The width of each graphical element that represents a piece.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "20", |
| "min": "0" |
| } |
| }, |
| "itemHeight": { |
| "desc": "\n\n<p>The height of each graphical element that represents a piece.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "14", |
| "min": "0" |
| } |
| }, |
| "align": { |
| "desc": "\n\n<p>The layout relationship between the graphical elements for pieces and their labels. Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'auto'</code> Decide automatically.</li>\n<li><code class=\"codespan\">'left'</code> The graphical elements for pieces are on the left and their labels are on the right.</li>\n<li><code class=\"codespan\">'right'</code> The graphical elements for pieces are on the right and their labels are on the left.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "auto,left,right" |
| } |
| }, |
| "text": { |
| "desc": "<p>The label text on both ends, such as <code class=\"codespan\">['High', 'Low']</code>. <a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=doc-example/map-visualMap-piecewise-text&edit=1&reset=1\" target=\"_blank\">Sample</a>.</p>\n<p>You can understand the order of items in <code class=\"codespan\">text</code> array just by a simple trial. See <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n<p>The rule, that labels will not show when <code class=\"codespan\">text</code> is use, is retained for compatibility with ECharts2.</p>\n" |
| }, |
| "textGap": { |
| "desc": "\n\n<p>The distance between the ends of the graphical elements for pieces and the labels, with unit px. See <a href=\"#visualMap-piecewise.text\">visualMap-piecewise.text</a></p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "10" |
| } |
| }, |
| "showLabel": { |
| "desc": "\n\n<p>Whether to show label of each item. By default, label will not be shown when <a href=\"#visualMap-piecewise.text\">visualMap-piecewise.text</a> used, otherwise label will be shown.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "itemGap": { |
| "desc": "\n\n<p>Its the distance between each two graphical elements for pieces. The unit is px.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "10" |
| } |
| }, |
| "itemSymbol": { |
| "desc": "<p>Default symbol (the shape of graphical element). Possible values are:</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>The setting of visual channel <code class=\"codespan\">symbol</code> can refer to <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a> and <a href=\"#visualMap-piecewise.outOfRange\">visualMap-piecewise.outOfRange</a>.</p>\n<p>When they are not specified, <code class=\"codespan\">itemSymbol</code> is adopted as the default value (but just used in visualMap component itself, not in chart).</p>\n" |
| }, |
| "show": { |
| "desc": "<p>Whether to show visualMap-piecewise component. If set as <code class=\"codespan\">false</code>, visualMap-piecewise component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.</p>\n" |
| }, |
| "dimension": { |
| "desc": "<p>Specify which dimension should be used to fetch dataValue from <a href=\"#series.data\">series.data</a>, and then map them to visual channel.</p>\n<p><a href=\"#series.data\">series.data</a> can be regarded as a two-dimensional array, for instance:</p>\n<pre><code class=\"lang-javascript\">[\n [12, 23, 43],\n [12, 23, 43],\n [43, 545, 65],\n [92, 23, 33]\n]\n</code></pre>\n<p>Each column of the above array is regarded as a <code class=\"codespan\">dimension</code>. For example, when property <code class=\"codespan\">dimension</code> is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.</p>\n<p>Use the last dimension of <code class=\"codespan\">data</code> by default.</p>\n" |
| }, |
| "seriesIndex": { |
| "desc": "<p>Specify visual mapping should be performed on which series, from which\n<a href=\"#series.data\">series.data</a> is fetched.</p>\n<p>All series are used by default.</p>\n" |
| }, |
| "hoverLink": { |
| "desc": "<p><code class=\"codespan\">hoverLink</code> enable highlight certain graphical elements of chart when mouse hovers on some place of <code class=\"codespan\">visualMap</code> component that is coresponding to those graphical elements by visual mapping.</p>\n<p>Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in <code class=\"codespan\">visualMap</code>.</p>\n" |
| }, |
| "inRange": { |
| "desc": "<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. User can interact with visualMap component and make a seleced range by mouse or touch.</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: Type of symbol.</li>\n<li><code class=\"codespan\">symbolSize</code>: Symbol size.</li>\n<li><code class=\"codespan\">color</code>: Symbol color.</li>\n<li><code class=\"codespan\">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class=\"codespan\">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class=\"codespan\">colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code class=\"codespan\">colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code class=\"codespan\">inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code class=\"codespan\">visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code class=\"codespan\">color</code> (or <code class=\"codespan\">symbol</code>, <code class=\"codespan\">size</code>, ...) can be both customized in the scatter chart and <code class=\"codespan\">visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels both in target series and visualMap-piecewise component itself:\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [30, 100]\n }\n }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels only for target series.\n target: {\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n }\n },\n // Define visual channels only for visualMap-piecewise component.\n controller: {\n inRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels for both target series and visualMap-piecewise component.\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n },\n // Define visual channels only for visualMap-piecewise component, which\n // will overlap the properties with the same name in the above common\n // definition. (symbolSize is overlapped by [30, 100] while color\n // keeps the original value)\n controller: {\n inRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class=\"codespan\">color</code>、<code class=\"codespan\">symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class=\"codespan\">opacity</code> is recommended, rather than <code class=\"codespan\">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class=\"codespan\">[visaulMap.min, visualMap.max]</code> to a given range of <code class=\"codespan\">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class=\"codespan\">[visualMap.min, visualMap.max]</code> is set to be <code class=\"codespan\">[0, 100]</code>, and there is series.data: <code class=\"codespan\">[50, 10, 100]</code>. We intend to map them to an <code class=\"codespan\">opacity</code> range <code class=\"codespan\">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class=\"codespan\">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class=\"codespan\">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class=\"codespan\">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class=\"codespan\">dataMin</code> and <code class=\"codespan\">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class=\"codespan\">Array</code> is used to express the range of visual value, e.g., <code class=\"codespan\">color: ['#333', '#777']</code>.</p>\n</li>\n<li><p>Single <code class=\"codespan\">number</code> or single <code class=\"codespan\">string</code> can also be used, which will be converted to an <code class=\"codespan\">Array</code> by visualMap component. e.g.: <code class=\"codespan\">opacity: 0.4</code> will be converted to <code class=\"codespan\">opacity: [0.4, 0.4]</code>, <code class=\"codespan\">color: '#333'</code> will be converted to <code class=\"codespan\">color: ['#333', '#333']</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbolSize</code>, <code class=\"codespan\">opacity</code>, <code class=\"codespan\">colorAlpha</code>, <code class=\"codespan\">colorLightness</code>, <code class=\"codespan\">colorSaturation</code>, <code class=\"codespan\">colorHue</code>, the range of visual value is always in the form of: <code class=\"codespan\">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class=\"codespan\">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class=\"codespan\">visualMap.min</code> (if any) will be mapped to lightness <code class=\"codespan\">0.8</code>, and the dataValue that equals to <code class=\"codespan\">visualMap.max</code> (if any) will be mapped to lightness <code class=\"codespan\">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class=\"codespan\">[visualMap.min, visualMap.max]</code> and the range of <code class=\"codespan\">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">color</code>, array is used, like: <code class=\"codespan\">['#333', '#78ab23', 'blue']</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">'#333'</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">'blue'</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class=\"codespan\">symbol</code>, array is used, like: <code class=\"codespan\">['circle', 'rect', 'diamond']</code>, where the dataValue that equals to <code class=\"codespan\">visualMap.min</code> will be mapped onto <code class=\"codespan\">'circle'</code>, the dataValue that equals to <code class=\"codespan\">visualMap.max</code> will be mapped onto <code class=\"codespan\">'diamond'</code>, and other dataValues will be caculated based on the numerical distance to <code class=\"codespan\">visualMax.min</code> and to <code class=\"codespan\">visualMap.max</code>, and mapped onto one of <code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'diamond'</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class=\"codespan\">opacity</code>、<code class=\"codespan\">colorAlpha</code>、<code class=\"codespan\">colorLightness</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">visual value</code></p>\n<p> possible value range is <code class=\"codespan\">[0, 1]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">colorHue</code>：</p>\n<p> possible value range is <code class=\"codespan\">[0, 360]</code>.</p>\n</li>\n<li><p><code class=\"codespan\">color</code>：</p>\n<p> color can use RGB expression, like <code class=\"codespan\">'rgb(128, 128, 128)'</code>, or RGBA expression, like <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>, or Hex expression, like '#ccc'.</p>\n</li>\n<li><p><code class=\"codespan\">symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">'path://'</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class=\"codespan\">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code class=\"codespan\">['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']</code>. And there is series.data: <code class=\"codespan\">['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']</code>. Then we can establish the lookup rule for color: <code class=\"codespan\">color: {'Warden': 'red', 'Demon Hunter': 'black'}</code>, by which the <code class=\"codespan\">visualMap</code> component will map <code class=\"codespan\">dataValue</code> to <code class=\"codespan\">color</code>.</p>\n<p>How to configure <code class=\"codespan\">visualMap</code> component to do <code class=\"codespan\">Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class=\"codespan\">Object</code> or <code class=\"codespan\">Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n type: 'piecewise',\n // categories defines the items that to be displayed in visualMap-piecewise component.\n categories: [\n 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n ],\n inRange: {\n // visual value can be an Object：\n color: {\n 'Warden': 'red',\n 'Demon Hunter': 'black',\n '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',\n // all other dataValues should be mapped to 'green'.\n }\n // visual value can also be a single value,\n // means that all dataValues should be mapped to the value.\n color: 'green',\n // visual value can also be a array, with the same length\n // as the array of categories and one-one mapping onto it.\n color: ['red', 'black', 'green', 'yellow', 'white']\n }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/next/examples/en/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class=\"codespan\">setOption</code> to set the initial <code class=\"codespan\">option</code>), <code class=\"codespan\">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n visualMap: {\n inRange: {color: ['red', 'blue']}\n }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class=\"codespan\">inRange</code>, <code class=\"codespan\">outOfRange</code>, <code class=\"codespan\">target</code>, <code class=\"codespan\">controller</code>) do not support "merge", that is, anyone among them is modified when use <code class=\"codespan\">setOption</code> again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to <code class=\"codespan\">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class=\"codespan\">getOption() -> modify the gotten option -> setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = ['red', 'blue'];\noption.visualMap.controller.inRange.color = ['red', 'blue'];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code class=\"codespan\">['#f6efa6', '#d88273', '#bf444c']</code> in <code class=\"codespan\">inRange</code> if you not set <code class=\"codespan\">inRange</code>. If you dont want it, set <code class=\"codespan\">inRange: {color: null}</code> to disable it.</p>\n" |
| }, |
| "outOfRange": { |
| "desc": "<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. User can interact with visualMap component and make a seleced range by mouse or touch.</p>\n<p>See available configurations in <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a></p>\n" |
| }, |
| "controller": { |
| "desc": "<p>Property <code class=\"codespan\">inRange</code> and <code class=\"codespan\">outOfRange</code> can be set within property <code class=\"codespan\">controller</code>, which means those <code class=\"codespan\">inRange</code> and <code class=\"codespan\">outOfRange</code> are only used on the controller (<code class=\"codespan\">visualMap</code> component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.</p>\n" |
| }, |
| "controller.inRange": { |
| "desc": "<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. User can interact with visualMap component and make a seleced range by mouse or touch.</p>\n<p>See available configurations in <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a></p>\n" |
| }, |
| "controller.outOfRange": { |
| "desc": "<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. User can interact with visualMap component and make a seleced range by mouse or touch.</p>\n<p>See available configurations in <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a></p>\n" |
| }, |
| "zlevel": { |
| "desc": "<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n" |
| }, |
| "z": { |
| "desc": "<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n" |
| }, |
| "left": { |
| "desc": "<p>Distance between visualMap component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>, then the component will be aligned automatically based on position.</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0%" |
| } |
| }, |
| "top": { |
| "desc": "<p>Distance between visualMap component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>, then the component will be aligned automatically based on position.</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0%" |
| } |
| }, |
| "right": { |
| "desc": "<p>Distance between visualMap component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0%" |
| } |
| }, |
| "bottom": { |
| "desc": "<p>Distance between visualMap component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0%" |
| } |
| }, |
| "orient": { |
| "desc": "<p>How to layout the visualMap component, <code class=\"codespan\">'horizontal'</code> or <code class=\"codespan\">'vertical'</code>.</p>\n" |
| }, |
| "padding": { |
| "desc": "\n\n<p>visualMap-piecewise space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "backgroundColor": { |
| "desc": "<p>background color of visualMap component.</p>\n" |
| }, |
| "borderColor": { |
| "desc": "<p>border color of visualMap component.</p>\n" |
| }, |
| "borderWidth": { |
| "desc": "<p>border width of visualMap component, with unit: px.</p>\n" |
| }, |
| "color": { |
| "desc": "<p>This property remains only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a>, or <a href=\"#visualMap-piecewise.outOfRange\">visualMap-piecewise.outOfRange</a> if needed.</p>\n<p>If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property <code class=\"codespan\">color</code> is from <code class=\"codespan\">large</code> to <code class=\"codespan\">small</code>, whereas that in <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a> or <a href=\"#visualMap-piecewise.outOfRange\">visualMap-piecewise.outOfRange</a> is from <code class=\"codespan\">small</code> to <code class=\"codespan\">large</code>.</p>\n" |
| }, |
| "textStyle.color": { |
| "desc": "\n\n<p>visualMap text color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#333" |
| } |
| }, |
| "textStyle.fontStyle": { |
| "desc": "\n\n<p>visualMap font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "textStyle.fontWeight": { |
| "desc": "\n\n<p>visualMap font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "textStyle.fontFamily": { |
| "desc": "\n\n<p>visualMap font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "textStyle.fontSize": { |
| "desc": "\n\n<p>visualMap font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "textStyle.lineHeight": { |
| "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "textStyle.width": { |
| "desc": "\n\n<p>Width of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "200", |
| "step": "1" |
| } |
| }, |
| "textStyle.height": { |
| "desc": "\n\n<p>Height of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "200", |
| "step": "1" |
| } |
| }, |
| "textStyle.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "textStyle.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "textStyle.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "textStyle.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "textStyle.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "textStyle.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "textStyle.overflow": { |
| "desc": "\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "textStyle.ellipsis": { |
| "desc": "<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n" |
| }, |
| "textStyle.lineOverflow": { |
| "desc": "<p>Determine how to display the text when it's overflow on height.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n" |
| }, |
| "formatter": { |
| "desc": "<p>the formatter tool for label.</p>\n<ul>\n<li><p>If it was set as a <code class=\"codespan\">string</code>, it refers to a template, for instance: <code class=\"codespan\">aaaa{value}bbbb{value2}</code>, where <code class=\"codespan\">{value}</code> and <code class=\"codespan\">{value2}</code> represents the current selected range of dataValues.</p>\n</li>\n<li><p>If it was set as a <code class=\"codespan\">Function</code>, it refers to a callback function, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">formatter: function (value, value2) {\n return 'aaaa' + value + 'bbbb' + value2;\n}\n</code></pre>\n" |
| } |
| } |
