| { |
| "type": { |
| "desc": "<p>Used to determine that it is a continuous 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" |
| }, |
| "min": { |
| "desc": "<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>Notice that <code class=\"codespan\">min</code> and <code class=\"codespan\">max</code> 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": "<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>Notice that <code class=\"codespan\">min</code> and <code class=\"codespan\">max</code> 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" |
| } |
| }, |
| "range": { |
| "desc": "<p>Specify selected range, that is, the dataValue corresponding to the two handles. For example:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n visualMap: {\n min: 0,\n max: 100,\n // dataValue corresponding to the two handles.\n range: [4, 15],\n ...\n }\n});\n</code></pre>\n<p><strong>auto-adaption when min or max is modified by setOption</strong></p>\n<ul>\n<li>If <code class=\"codespan\">range</code> is not set (or set to null or undefined)</li>\n</ul>\n<pre><code class=\"lang-javascript\">For instance:\nchart.setOption({visualMap: {min: 10, max: 300}}); // range is not set, then range is [min, max] by default, that is, [10, 300].\n\nchart.setOption({visualMap: {min: 0, max: 400}}); // Modify min and max using setOption again.\n// Then range will be auto-modified to the new [min, max], that is, [0, 400].\n</code></pre>\n<ul>\n<li>If <code class=\"codespan\">range</code> is set explicitly, such as [10, 300]</li>\n</ul>\n<pre><code class=\"lang-javascript\">For instance:\nchart.setOption({visualMap: {min: 10, max: 300, range: [20, 80]}}); // range is set to [20, 80].\n\nchart.setOption({visualMap: {min: 0, max: 400}}); // min and max are modifies using setOption.\n// Then range keep the original value ([20, 80]) but will not do auto-adaption.\n\nchart.setOption({visualMap: {range: null}}); // Set range to null then.\n// Then auto-adaption of range turns on and range is auto modified to [min, max], that is, [0, 400].\n\n</code></pre>\n<p><code class=\"codespan\">range</code> gotten by <code class=\"codespan\">getOption</code> is always an <code class=\"codespan\">Array</code>, but not <code class=\"codespan\">null</code> or <code class=\"codespan\">undefined</code>.</p>\n" |
| }, |
| "calculable": { |
| "desc": "<p>Whether show handles, which can be dragged to adjust "selected range".</p>\n<p>Notes: In order to be compatible with ECharts2, the rule, which seems to be a little odd, is retained: when <a href=\"#visualMap.type\">visualMap.type</a> is not set, and <a href=\"#visualMap-continuous.calculable\">visualMap.calculable</a> was set to be <code class=\"codespan\">true</code>, <a href=\"#visualMap.type\">visualMap.type</a> will be automatically set as <code class=\"codespan\">'continuous'</code>, regardless of some settings such as <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a>. Therefore, it is recommended to set <a href=\"#visualMap.type\">visualMap.type</a> explicitly, which avoids ambiguity.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "realtime": { |
| "desc": "<p>Whether to update view in real time when dragging a handle.</p>\n<ul>\n<li><p>If <code class=\"codespan\">ture</code>, the chart view will be updated in real time when dragging.</p>\n</li>\n<li><p>If <code class=\"codespan\">false</code>, the chart view will be updated at the end of the handle dragging.</p>\n</li>\n</ul>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "inverse": { |
| "desc": "<p>Whether to inverse the layout of visualMap component.</p>\n<p>As <code class=\"codespan\">inverse</code> is <code class=\"codespan\">false</code>, the layout direction is the same as <a href=\"#grid\">cartesian coordinate</a>. That is:</p>\n<ul>\n<li>As <a href=\"#visualMap.orient\">visualMap.orient</a> is <code class=\"codespan\">'vertical'</code>, large data are placed at the top while small at the bottom.</li>\n<li>As <a href=\"#visualMap.orient\">visualMap.orient</a> is <code class=\"codespan\">'horizontal'</code>, large data are placed on the right while small on the left.</li>\n</ul>\n<p>As <code class=\"codespan\">inverse</code> is <code class=\"codespan\">true</code>, the result is opposite.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "precision": { |
| "desc": "<p>The decimal precision of label, defaults to be 0 (no decimals).</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1" |
| } |
| }, |
| "itemWidth": { |
| "desc": "<p>The width of the main bar of visualMap component.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "20", |
| "min": "0" |
| } |
| }, |
| "itemHeight": { |
| "desc": "<p>The height of the main bar of visualMap component.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "140", |
| "min": "0" |
| } |
| }, |
| "align": { |
| "desc": "<p>Specify the position of handles and labels, against the main bar. The possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'auto'</code> Decide automatically.</li>\n<li><code class=\"codespan\">'left'</code> The handles and labels are on the right, which is valid when <code class=\"codespan\">orient</code> is set as <code class=\"codespan\">'horizontal'</code>.</li>\n<li><code class=\"codespan\">'right'</code> The handles and labels are on the left, which is valid when <code class=\"codespan\">orient</code> is set as <code class=\"codespan\">'horizontal'</code>.</li>\n<li><code class=\"codespan\">'top'</code> the handles and labels are at the bottom, which is valid when <code class=\"codespan\">orient</code> is set as <code class=\"codespan\">'vertical'</code>.</li>\n<li><code class=\"codespan\">'bottom'</code> the handles and labels are at the top, which is valid when <code class=\"codespan\">orient</code> is set as <code class=\"codespan\">'vertical'</code>.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "auto,left,right,top,bottom" |
| } |
| }, |
| "text": { |
| "desc": "<p>The label text on both ends, such as <code class=\"codespan\">['High', 'Low']</code>. <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/map-visualMap-continuous-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" |
| }, |
| "textGap": { |
| "desc": "<p>The distance between the ends of the main bar and the label, with unit px. See <a href=\"#visualMap-continuous.text\">visualMap-continuous.text</a></p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "10", |
| "step": "0.5" |
| } |
| }, |
| "show": { |
| "desc": "<p>Whether to show visualMap-continuous component. If set as <code class=\"codespan\">false</code>, visualMap-continuous 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<p>Possiable visual channels includes:</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<hr>\n<p><code class=\"codespan\">inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code class=\"codespan\">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-continuous</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-continuous</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-continuous 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-continuous 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-continuous 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-continuous 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-continuous 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 \n<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/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<hr>\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>Possiable visual channels includes:</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\">outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code class=\"codespan\">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-continuous</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-continuous</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-continuous component itself:\n outOfRange: {\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-continuous 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 outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n }\n },\n // Define visual channels only for visualMap-continuous component.\n controller: {\n outOfRange: {\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-continuous component.\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n },\n // Define visual channels only for visualMap-continuous 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 outOfRange: {\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 outOfRange 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 \n<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 outOfRange: {\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/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<hr>\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" |
| }, |
| "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>Possiable visual channels includes:</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<hr>\n<p><code class=\"codespan\">inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code class=\"codespan\">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-continuous</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-continuous</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-continuous 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-continuous 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-continuous 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-continuous 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-continuous 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 \n<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/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<hr>\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" |
| }, |
| "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>Possiable visual channels includes:</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\">outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code class=\"codespan\">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class=\"codespan\">visualMap-continuous</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-continuous</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-continuous component itself:\n outOfRange: {\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-continuous 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 outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n }\n },\n // Define visual channels only for visualMap-continuous component.\n controller: {\n outOfRange: {\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-continuous component.\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n },\n // Define visual channels only for visualMap-continuous 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 outOfRange: {\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 outOfRange 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 \n<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 outOfRange: {\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/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<hr>\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" |
| }, |
| "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": "<p>visualMap-continuous 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-continuous.inRange\">visualMap-continuous.inRange</a>, or <a href=\"#visualMap-continuous.outOfRange\">visualMap-continuous.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-continuous.inRange\">visualMap-continuous.inRange</a> or <a href=\"#visualMap-continuous.outOfRange\">visualMap-continuous.outOfRange</a> is from <code class=\"codespan\">small</code> to <code class=\"codespan\">large</code>.</p>\n" |
| }, |
| "textStyle.color": { |
| "desc": "<p>visualMap text color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#333" |
| } |
| }, |
| "textStyle.fontStyle": { |
| "desc": "<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": "<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": "<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": "<p>visualMap font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "textStyle.lineHeight": { |
| "desc": "<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": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "textStyle.height": { |
| "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "textStyle.textBorderColor": { |
| "desc": "<p>Storke color of the text.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "textStyle.textBorderWidth": { |
| "desc": "<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "textStyle.textShadowColor": { |
| "desc": "<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "textStyle.textShadowBlur": { |
| "desc": "<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "textStyle.textShadowOffsetX": { |
| "desc": "<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "textStyle.textShadowOffsetY": { |
| "desc": "<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "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</code>, where <code class=\"codespan\">{value}</code> represents the value of the edge of the seleted range.</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) {\n return 'aaaa' + value + 'bbbb';\n}\n</code></pre>\n" |
| } |
| } |
