| { |
| "Mouse events": { |
| "desc": "<p>Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like <code class=\"codespan\">percent</code>. Please refer to callback <code class=\"codespan\">params</code> of each chart's label formatter.</p>\n<pre><code class=\"lang-js\">{\n // type of the component to which the clicked glyph belongs\n // i.e., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (make sense when componentType is 'series')\n // i.e., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in incoming option.series (make sense when componentType is 'series')\n seriesIndex: number,\n // series name (make sense when componentType is 'series')\n seriesName: string,\n // data name, category name\n name: string,\n // data index in incoming data array\n dataIndex: number,\n // incoming rwa data item\n data: Object,\n // Some series, such as sankey or graph, maintains more than\n // one types of data (nodeData and edgeData), which can be\n // distinguished from each other by dataType with its value\n // 'node' and 'edge'.\n // On the other hand, most series has only one type of data,\n // where dataType is not needed.\n dataType: string,\n // incoming data value\n value: number|Array,\n // color of component (make sense when componentType is 'series')\n color: string,\n // User info (only available in graphic component\n // and custom series, if element option has info\n // property, e.g., {type: 'circle', info: {some: 123}})\n info: *\n}\n</code></pre>\n<p>Mouse events contain <code class=\"codespan\">'click'</code>, <code class=\"codespan\">'dblclick'</code>, <code class=\"codespan\">'mousedown'</code>, <code class=\"codespan\">'mousemove'</code>, <code class=\"codespan\">'mouseup'</code>, <code class=\"codespan\">'mouseover'</code>, <code class=\"codespan\">'mouseout'</code>, <code class=\"codespan\">'globalout'</code>, <code class=\"codespan\">'contextmenu'</code>.</p>\n<p>See <a href=\"tutorial.html#Events%20and%20actions%20in%20ECharts%0D\" target=\"_blank\">Events and actions in ECharts</a></p>\n" |
| }, |
| "highlight": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.highlight\">highlight</a></p>\n<p>Event of data highlight.</p>\n" |
| }, |
| "downplay": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.downplay\">downplay</a></p>\n<p>Event of data downplay.</p>\n" |
| }, |
| "selectchanged": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.toggleSelected\">toggleSelected</a>, <a href=\"#action.select\">select</a>, <a href=\"#action.unselect\">unselect</a></p>\n<p>Event emitted when data selection is changed.</p>\n<pre><code class=\"lang-js\">{\n type: 'selectchanged',\n fromAction: 'select' | 'toggleSelected' | 'unselect',\n // Grouped by series.\n selected: ({\n dataIndex: number[], seriesIndex: number\n })[]\n}\n</code></pre>\n" |
| }, |
| "legendselectchanged": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\nEvent emitted after legend selecting state changes.</p>\n<p><strong>Attention: </strong> This event will be emitted when users toggle legend button in legend component.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselectchanged',\n // change legend name\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n" |
| }, |
| "legendselected": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\nEvent emitted after legend is selected.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselected',\n // name of selected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from <code class=\"codespan\">legendselected</code> to <a href=\"#events.legendselectchanged\">legendselectchanged</a>.</p>\n" |
| }, |
| "legendunselected": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\nEvent emitted after unselecting legend.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendunselected',\n // name of unselected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n" |
| }, |
| "legendselectall": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendAllSelect\">legendAllSelect</a>\nEvent emitted after all legends are selected.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselectall',\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n" |
| }, |
| "legendinverseselect": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendInverseSelect\">legendInverseSelect</a>\nEvent emitted after inversing all legends.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendinverseselect',\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n" |
| }, |
| "legendscroll": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\nEvent when trigger legend scroll.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendscroll',\n scrollDataIndex: number\n legendId: string\n}\n</code></pre>\n" |
| }, |
| "datazoom": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>Event emitted after zooming data area.</p>\n<pre><code class=\"lang-js\">{\n type: 'datazoom',\n // percentage of zoom start position, 0 - 100\n start: number\n // percentage of zoom finish position, 0 - 100\n end: number\n // data value of zoom start position; only exists in zoom event of triggered by toolbar\n startValue?: number\n // data value of zoom finish position; only exists in zoom event of triggered by toolbar\n endValue?: number\n}\n</code></pre>\n" |
| }, |
| "datarangeselected": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\nEvent emitted after range is changed in visualMap.</p>\n<pre><code class=\"lang-js\">{\n type: 'datarangeselected',\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n}\n</code></pre>\n" |
| }, |
| "timelinechanged": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\nEvent emitted after time point in timeline is changed.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelinechanged',\n // index of time point\n currentIndex: number\n}\n</code></pre>\n" |
| }, |
| "timelineplaychanged": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\nSwitching event of play state in timeline.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelineplaychanged',\n // play state, true for auto play\n playState: boolean\n}\n</code></pre>\n" |
| }, |
| "restore": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\nResets option event.</p>\n<pre><code class=\"lang-js\">{\n type: 'restore'\n}\n</code></pre>\n" |
| }, |
| "dataviewchanged": { |
| "desc": "<p>Changing event of <a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">data view tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'dataviewchanged'\n}\n</code></pre>\n" |
| }, |
| "magictypechanged": { |
| "desc": "<p>Switching event of <a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">magic type tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'magictypechanged',\n // click to change current type; same as type attribute in echarts 2.x\n currentType: string\n}\n</code></pre>\n" |
| }, |
| "geoselectchanged": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.geo.geoToggleSelect\">geoToggleSelect</a></p>\n<p>Event emitted after selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'geoselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code class=\"codespan\">geoSelected</code> in ECharts 2.</p>\n" |
| }, |
| "geoselected": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.geo.geoSelect\">geoSelect</a></p>\n<p>Event after selecting.</p>\n<p>Use <code class=\"codespan\">dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.geoselectchanged\">geoselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'geoselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code class=\"codespan\">geoselected</code> to <a href=\"#events.geoselectchanged\">geoselectchanged</a>.</p>\n" |
| }, |
| "geounselected": { |
| "desc": "<p><strong>ACTION:</strong> <a href=\"#action.geo.geoUnSelect\">geoUnSelect</a></p>\n<p> cancels selected event.</p>\n<p>Use <code class=\"codespan\">dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.geoselectchanged\">geoselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'geounselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n" |
| }, |
| "axisareaselected": { |
| "desc": "<p>Selecting event of range of <a href=\"option.html#parallelAxis\" target=\"_blank\">parallel axis</a>.</p>\n<p>When selecting axis range, the following method can be used to get data indices of currently highlighted lines, which is the list of indices in <code class=\"codespan\">data</code> of <code class=\"codespan\">series</code>.</p>\n<pre><code class=\"lang-javascript\">chart.on('axisareaselected', function () {\n var series1 = chart.getModel().getSeries()[0];\n var series2 = chart.getModel().getSeries()[0];\n var indices1 = series1.getRawIndicesByActiveState('active');\n var indices2 = series2.getRawIndicesByActiveState('active');\n console.log(indices1);\n console.log(indices2);\n});\n</code></pre>\n" |
| }, |
| "brush": { |
| "desc": "<p>Event triggered after action <a href=\"#action.brush.brush\">brush</a> dispatched.</p>\n" |
| }, |
| "brushEnd": { |
| "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>Event triggered after action <a href=\"#action.brush.brushEnd\">brushEnd</a> dispatched.</p>\n" |
| }, |
| "brushselected": { |
| "desc": "<p>Notice what are selected.</p>\n<p>See <a href=\"option.html#brush\" target=\"_blank\">brush component</a>.</p>\n<p>This event will be triggered when <code class=\"codespan\">dispatchAction</code> called, or use do brush behavior.\nBut this event will not be triggered in <code class=\"codespan\">setOption</code>.</p>\n<p>Properties in this event.</p>\n<pre><code class=\"lang-javascript\">{\n type: 'brushselected',\n batch: [\n {\n // Id of the brush component. In most case, only one brush component is used, so do not care about this property.\n brushId: string,\n // Index of the brush component.\n brushIndex: number,\n // Name of the brush component.\n brushName: string,\n\n // The brush areas (that is, select-boxes)\n areas: [\n { // The first area.\n // `range`/`coordRange` is used to record the current\n // range of the area, see the definitions in "brush\n // action".\n\n // If this area is "glboal arae" (that is, it does not\n // belong to any coordinate system), use `range`, where\n // the values are pixel.\n range: Array.<number>,\n\n // If the area is "coordinate system area', use `coordRange`,\n // where the values are coordinates.\n coordRange: Array.<number>,\n // Specially, if the area belongs to an axis of a "grid" (e.g., set\n // `xAxisIndex: 0`), and the axis belongs to more than one cartesian\n // e.g., the `xAxis` corresponds to two `yAxis`), `coordRanges` is\n // used to record the coordinates of this area in each cartesian,\n // and `coordRange` is `coordRanges[0]`.\n coordRanges: Array.<Array.<number>>,\n },\n ...\n ],\n\n // The selected items in each series.\n // Notice, if a series do not support `brush`, its cooresponding item still appear in this array. Namely, the index this array is the same as `seriesIndex`.\n selected: [\n { // The selected items in series 0.\n seriesIndex: number,\n // dataIndex can be used to find value in original data.\n dataIndex: [ 3, 6, 12, 23 ]\n },\n { // The selected items in series 0.\n seriesIndex: number,\n dataIndex: []\n },\n ...\n ]\n },\n ...\n ]\n}\n</code></pre>\n<p>Usage example of this event:</p>\n<pre><code class=\"lang-javascript\">var dataBySeries = [\n [ 12, 23, 54, 6 ], // Data of series 0.\n [ 34, 34433, 2223, 21122, 1232, 34 ] // Data of series 1.\n];\n\nchart.setOption({\n ...,\n brush: {\n ...\n },\n series: [\n { // series 0\n data: dataBySeries[0]\n },\n { // series 1\n data: dataBySeries[1]\n }\n ]\n});\n\nchart.on('brushSelected', function (params) {\n var brushComponent = params.batch[0];\n\n var sum = 0; // The sum of all selected values.\n\n for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {\n var dataIndices = brushComponent.selected[sIdx].dataIndex;\n\n for (var i = 0; i < dataIndices.length; i++) {\n var dataIndex = dataIndices[i];\n sum += dataBySeries[sIdx][dataIndex];\n }\n }\n console.log(sum);\n});\n</code></pre>\n<p><strong>Tip: </strong>\n<a href=\"option.html#brush.throttleType\" target=\"_blank\">brush.throttleType</a> can be used to avoid triggering this event too frequently.</p>\n" |
| }, |
| "globalcursortaken": { |
| "desc": "<p>See <a href=\"#action.brush.takeGlobalCursor\">takeGlobalCursor</a>.</p>\n" |
| }, |
| "rendered": { |
| "desc": "<p>Trigger when a frame rendered. Notice that the <code class=\"codespan\">rendered</code> event does not indicate that the animation finished (see <a href=\"#animation\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('rendered', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n" |
| }, |
| "finished": { |
| "desc": "<p>Triggered when render finished, that is, when animation finished (see <a href=\"#animation\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('finished', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n" |
| } |
| } |
