@types/echarts
Version:
TypeScript definitions for ECharts
478 lines (436 loc) • 19.9 kB
TypeScript
// Type definitions for ECharts v4.7.0
declare namespace echarts {
namespace EChartOption {
interface BaseTooltip {
/**
* The position of the tooltip's floating layer,
* which would follow the position of mouse by default.
*
* Options:
* 1. String.
* + 'inside' - Center position of the graphic element
* where the mouse is in, which is only valid when trigger
* is 'item'.
* + 'top' - Top position of the graphic element where the mouse
* is in, which is only valid when trigger is 'item'.
* + 'left' - Left position of the graphic element where the mouse
* is in, which is only valid when trigger is 'item'.
* + 'right' - Right position of the graphic element where
* the mouse is in, which is only valid when trigger is 'item'.
* + 'bottom' - Bottom position of the graphic element where
* the mouse is in, which is only valid when trigger is 'item'.
*
* 2. Object - Object with optional properties such as `top`,
* `left`, `right` and `bottom` that could be `string` or `number`.
* e.g. `{left: 10, top: 30}`, or `{right: '20%', bottom: 40}`
*
* 3. Array - Display the position of tooltip's floating layer
* through array, which supports absolute position
* and relative percentage.
*
* 4. Function.
* + Parameters:
* + point: Mouse position.
* + param: The same as formatter.
* + dom: The DOM object of tooltip.
* + rect: It is valid only when mouse is on graphic elements,
* which stands for a bounding box with x, y, width, and height.
* + size: The size of dom echarts container.
* For example:
* `{contentSize: [width, height], viewSize: [width, height]}`
* + Return:
* position as `String`, `Array` or `Object` described above
*
* @see https://echarts.apache.org/en/option.html#tooltip.position
*/
position?: Tooltip.Position.Type | undefined;
/**
* The content formatter of tooltip's floating layer
* which supports string template and callback function.
*
* Types:
* 1. String.
* The template variables are `{a}`, `{b}`, `{c}`, `{d}` and `{e}`,
* which stands for series name, data name and data value and ect.
* When trigger is set to be `'axis'`, there may be data
* from multiple series. In this time, series index can be refered
* as `{a0}`, `{a1}`, or `{a2}`.
* `{a}`, `{b}`, `{c}`, `{d}` have different meanings
* for different series types:
* + Line (area) charts, bar (column) charts, K charts:
* `{a}` for series name,
* `{b}` for category name,
* `{c}` for data value,
* `{d}` for none;
* + Scatter (bubble) charts:
* `{a}` for series name,
* `{b}` for data name,
* `{c}` for data value,
* `{d}` for none;
* + Map:
* `{a}` for series name,
* `{b}` for area name,
* `{c}` for merging data,
* `{d}` for none;
* + Pie charts, gauge charts, funnel charts:
* `{a}` for series name,
* `{b}` for data item name,
* `{c}` for data value,
* `{d}` for percentage.
*
* 2. Function.
* The first parameter params is the data that the formatter needs.
* Its format is shown as {Format}
* When trigger is `'axis'`, or when tooltip is triggered by
* `axisPointer`, params is the data array of multiple series.
* `Note`: Using array to present all the parameters in ECharts 2.x
* is not supported anymore.
* The second parameter ticket is the asynchronous callback flag
* which should be used along with the third parameter callback
* when it is used.
* The third parameter callback is asynchronous callback.
* When the content of tooltip is acquired asynchronously,
* ticket and htm as introduced above can be used to update tooltip
* with callback.
*
* @example
* ```
*
* //string
* formatter: '{b0}: {c0}<br />{b1}: {c1}'
*
* // function
* formatter: function (params, ticket, callback) {
* $.get('detail?name=' + params.name, function (content) {
* callback(ticket, toHTML(content));
* });
* return 'Loading';
* }
* ```
*/
formatter?: string | Tooltip.Formatter | undefined;
/**
* The background color of tooltip's floating layer.
*
* @default 'rgba(50, 50, 50, 0.7)'
*/
backgroundColor?: string | undefined;
/**
* The border color of tooltip's floating layer.
*
* @default '#333'
*/
borderColor?: string | undefined;
/**
* The border width of tooltip's floating layer.
*
* @default 0
*/
borderWidth?: number | undefined;
/**
* The floating layer of tooltip 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.
*
* @example
* // Set padding to be 5
* padding: 5
* // Set the top and bottom paddings to be 5, and left and right paddings to be 10
* padding: [5, 10]
* // Set each of the four paddings seperately
* padding: [
* 5, // up
* 10, // right
* 5, // down
* 10, // left
* ]
*
* @default 5
*/
padding?: number | number[] | undefined;
/**
* The text style of tooltip's floating layer.
*/
textStyle?: BaseTextStyle | undefined;
/**
* Extra CSS style for floating layer.
* The following is an example for adding shadow.
*
* @example
* extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
*/
extraCssText?: string | undefined;
}
interface Tooltip extends BaseTooltip {
/**
* Whether to show the tooltip component,
* including tooltip floating layer and `axisPointer`.
*
* @default true
*/
show?: boolean | undefined;
/**
* Type of triggering.
* Options:
* + `'item'` - Triggered by data item, which is mainly used
* for charts that don't have a category axis like scatter
* charts or pie charts.
* + `'axis'` - Triggered by axes, which is mainly used
* for charts that have category axes, like bar charts
* or line charts.
* ECharts 2.x only supports axis trigger for category axis.
* In ECharts 3, it is supported for all types of axes in `grid`
* or `polar`. Also, you may assign axis with `axisPointer.axis`.
* + `'none'` - Trigger nothing.
*
* @default 'item'
*/
trigger?: "item" | "axis" | "none" | undefined;
/**
* `axisPointer` is a tool for displaying reference line
* and axis value under mouse pointer.
*
* Configuration item for axis indicator.
* `tooltip.axisPointer` is like syntactic sugar
* of `axisPointer` settings on axes
* (for example, `xAxis.axisPointer` or `angleAxis.axisPointer`).
* More detailed features can be configured
* on `someAxis.axisPointer`.
* But in common cases, using `tooltip.axisPinter`
* is more convenient.
* Notice: configurations of `tooltip.axisPointer` has
* lower priority than that of `someAxis.axisPointer`.
*
* @see https://echarts.apache.org/en/option.html#tooltip.axisPointer
*/
axisPointer?: Tooltip.AxisPointer | undefined;
/**
* Whether to show the tooltip floating layer,
* whose default value is true.
* It should be configurated to be `false`,
* if you only need tooltip to trigger the event
* or show the axisPointer without content.
*
* @default true
*/
showContent?: boolean | undefined;
/**
* Whether to show tooltip content all the time.
* By default, it will be hidden after `tooltip.hideDelay`.
* It can be set to be true to preserve displaying.
* This attribute is newly added to ECharts 3.0.
*
* @default false
*/
alwaysShowContent?: boolean | undefined;
/**
* Conditions to trigger tooltip.
* Options:
* + `'mousemove'` - Trigger when mouse moves.
* + `'click'` - Trigger when mouse clicks.
* + `'mousemove|click'` - Trigger when mouse clicks and moves.
* `'none'` - Do not triggered by `'mousemove'` and `'click'`.
* Tooltip can be triggered and hidden manually by calling
* `action.tooltip.showTip` and `action.tooltip.hideTip`.
* It can also be triggered by `axisPointer.handle` in this case.
*
* This attribute is new to ECharts 3.0.
*
* @default 'mousemove|click'
*/
triggerOn?: "mousemove" | "click" | "mousemove|click" | "none" | undefined;
/**
* Delay time for showing tooltip, in ms.
* No delay by default, and it is not recommended to set.
* Only valid when `triggerOn` is set to be `'mousemove'`.
*
* @default 0
*/
showDelay?: number | undefined;
/**
* Delay time for hiding tooltip, in ms.
* It will be invalid when `alwaysShowContent` is `true`.
*
* @default 100
*/
hideDelay?: number | undefined;
/**
* Whether mouse is allowed to enter the floating layer
* of tooltip, whose default value is false.
* If you need to interact in the tooltip like with links
* or buttons, it can be set as `true`.
*
* @default true
*/
enterable?: boolean | undefined;
/**
* Render mode for tooltip.
* By default, it is set to be `'html'` so that extra DOM element
* is used for tooltip.
* It can also set to be `'richText'` so that the tooltip
* will be rendered inside Canvas (SVG rich text is
* not implemented yet).
* This is very useful for environments that don't have DOM,
* such as Wechat applications.
*
* @default 'html'
*/
renderMode?: "html" | undefined;
/**
* Whether confine tooltip content in the view rect
* of chart instance.
* Useful when tooltip is cut because of `'overflow: hidden'`
* set on outer dom of chart instance, or because of narrow
* screen on mobile.
*
* @default false
*/
confine?: boolean | undefined;
/**
* The transition duration of tooltip's animation, in seconds.
* When it is set to be 0, it would move closely with the mouse.
*
* @default 0.4
*/
transitionDuration?: number | undefined;
/**
* Since v4.7.0
*
* Whether to append the tooltip DOM element as a child of the <body> of the HTML page,
* when using renderMode 'html'.
* By default false, means that the tooltip DOM element will be one of a descendant
* of its echarts DOM container.
* But that means that the tooltip might be cut when overflow the container
* if some of the ancestors DOM element of the echarts container are styled with overflow: hidden.
* This case could also be resolved by setting tooltip.confine, but it might not suitable for all scenarios.
* Here we provide appendToBody: true to auto append the tooltip element to <body>,
* which is a common way to resolve this kind of issue.
* But true is not set as a default value because to void to bring break change
* for some cases where tooltip is deeply customized and to void some unexpected bad cases.
*
* Note that it also works when CSS transform used.
*
* @default false
*/
appendToBody?: boolean | undefined;
}
namespace Tooltip {
namespace Position {
type Type = Position.Str | Position.Obj | (number | string)[] | Position.Fn;
type Str = "inside" | "top" | "left" | "right" | "bottom";
interface Obj {
top?: string | number | undefined;
right?: string | number | undefined;
bottom?: string | number | undefined;
left?: string | number | undefined;
}
interface Fn {
(
point: (number | string)[],
params: object | object[],
element: HTMLElement,
rect: object,
size: object,
): (number | string)[] | Obj;
}
}
/**
* The first parameter params is the data that the formatter needs.
* Its format is shown as {Format}
* When trigger is `'axis'`, or when tooltip is triggered by
* `axisPointer`, params is the data array of multiple series.
* The content of each item of the array is Format type but, without
* `percent` field.
*
* Note: Using array to present all the parameters in ECharts 2.x
* is not supported anymore.
* The second parameter ticket is the asynchronous callback flag
* which should be used along with the third parameter callback
* when it is used.
* The third parameter callback is asynchronous callback.
* When the content of tooltip is acquired asynchronously,
* ticket and htm as introduced above can be used to update tooltip
* with callback.
*
* @example
* formatter: function (params, ticket, callback) {
* $.get('detail?name=' + params.name, function (content) {
* callback(ticket, toHTML(content));
* });
* return 'Loading';
* }
*/
interface Formatter {
(params: Format | Format[], ticket: string, callback: (ticket: string, html: string) => void): string;
}
interface Format {
componentType?: "series" | undefined;
// Series type
seriesType?: string | undefined;
// Series index in option.series
seriesIndex?: number | undefined;
// Series name
seriesName?: string | undefined;
// item marker, string of HTMLElement
marker?: string | undefined;
// Data name, or category name
name?: string | undefined;
// Data index in input data array
dataIndex?: number | undefined;
// Original data as input
data?: any;
// Value of data
value?: number | any[] | undefined;
// Value of axis
axisValue?: number | string | undefined;
// Label of axis value
axisValueLabel?: string | undefined;
// encoding info of coordinate system
// Key: coord, like ('x' 'y' 'radius' 'angle')
// value: Must be an array, not null/undefined. Contain dimension indices, like:
// {
// x: [2] // values on dimension index 2 are mapped to x axis.
// y: [0] // values on dimension index 0 are mapped to y axis.
// }
encode?: object | undefined;
// dimension names list
dimensionNames?: string[] | undefined;
// data dimension index, for example 0 or 1 or 2 ...
// Only work in `radar` series.
dimensionIndex?: number | undefined;
// Color of data
color?: string | undefined;
// the percentage of pie chart
percent?: number | undefined;
}
interface AxisPointer {
show?: boolean | undefined;
type?: "line" | "shadow" | "none" | "cross" | undefined;
axis?: "auto" | "x" | "y" | "radius" | "angle" | undefined;
snap?: boolean | undefined;
z?: number | undefined;
label?: BasicComponents.CartesianAxis.PointerLabel | undefined;
lineStyle?: LineStyle | undefined;
shadowStyle?: {
color?: string | undefined;
shadowBlur?: number | undefined;
shadowColor?: string | undefined;
shadowOffsetX?: number | undefined;
shadowOffsetY?: number | undefined;
opacity?: number | undefined;
} | undefined;
// It is valid when axisPointer.type is 'cross'.
crossStyle?: LineStyle | undefined;
animation?: boolean | undefined;
animationThreshold?: number | undefined;
animationDuration?: number | undefined;
animationEasing?: string | undefined;
animationDelay?: number | Function | undefined;
animationDurationUpdate?: number | Function | undefined;
animationEasingUpdate?: string | undefined;
animationDelayUpdate?: number | Function | undefined;
}
}
}
}