| { |
| "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": "\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>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": "\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>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": "\n\n<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": "\n\n<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": "\n\n<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": "\n\n<p>The decimal precision of label, defaults to be 0 (no decimals).</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1" |
| } |
| }, |
| "itemWidth": { |
| "desc": "\n\n<p>The width of the main bar of visualMap component.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "20", |
| "min": "0" |
| } |
| }, |
| "itemHeight": { |
| "desc": "\n\n<p>The height of the main bar of visualMap component.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "140", |
| "min": "0" |
| } |
| }, |
| "align": { |
| "desc": "\n\n<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/next/examples/en/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": "\n\n<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<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-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</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-continuous.inRange\">visualMap-continuous.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-continuous.inRange\">visualMap-continuous.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-continuous.inRange\">visualMap-continuous.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-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": "\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</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" |
| }, |
| "handleIcon": { |
| "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>Icon of drag handle.</p>\n<pre><code class=\"lang-js\">'M-11.39,9.77h0a3.5,3.5,0,0,1-3.5,3.5h-22a3.5,3.5,0,0,1-3.5-3.5h0a3.5,3.5,0,0,1,3.5-3.5h22A3.5,3.5,0,0,1-11.39,9.77Z'\n</code></pre>\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>", |
| "uiControl": { |
| "type": "icon" |
| } |
| }, |
| "handleSize": { |
| "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>Size of drag handle. It can be a percent string.</p>\n" |
| }, |
| "handleStyle": { |
| "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>Style of drag handle.</p>\n" |
| }, |
| "handleStyle.color": { |
| "desc": "\n\n<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "handleStyle.borderColor": { |
| "desc": "\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "handleStyle.borderWidth": { |
| "desc": "\n\n<p> border width. No border when it is set to be 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "handleStyle.borderType": { |
| "desc": "\n\n<p>Border type, which can be <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, or <code class=\"codespan\">'dotted'</code>. <code class=\"codespan\">'solid'</code> by default.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "handleStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "handleStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "handleStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "handleStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "handleStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "indicatorIcon": { |
| "desc": "<p>Icon of indicator.</p>\n<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n", |
| "uiControl": { |
| "type": "icon" |
| } |
| }, |
| "indicatorSize": { |
| "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>Size of indicator. It can be a percent string.</p>\n" |
| }, |
| "indicatorStyle": { |
| "desc": "<p>Style of indicator.</p>\n" |
| }, |
| "indicatorStyle.color": { |
| "desc": "\n\n<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "indicatorStyle.borderColor": { |
| "desc": "\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "indicatorStyle.borderWidth": { |
| "desc": "\n\n<p> border width. No border when it is set to be 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "2", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "indicatorStyle.borderType": { |
| "desc": "\n\n<p>Border type, which can be <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, or <code class=\"codespan\">'dotted'</code>. <code class=\"codespan\">'solid'</code> by default.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "indicatorStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "2", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "indicatorStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "rgba(0,0,0,0.2)" |
| } |
| }, |
| "indicatorStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "step": "0.5" |
| } |
| }, |
| "indicatorStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "step": "0.5" |
| } |
| }, |
| "indicatorStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| } |
| } |
