Apache ECharts

https://echarts.apache.org/zh/
Admin
Apache ECharts is an open-source JavaScript visualization library that provides interactive, highly...
Tokens:16,525
Snippets:152
Trust Score:10
Update:7 months ago
Show doc for...
Tokens:
Raw
### Integrate ECharts with Baidu Maps

Source: https://echarts.apache.org/zh/faq.html

This example shows how to integrate ECharts with Baidu Maps. It requires including ECharts, BMap JS, and the Baidu Maps API. You can then configure the 'bmap' component in your ECharts options and access the BMap instance for further customization.

```javascript
// 1. Include echarts.js, bmap.js, and Baidu Maps API
// 2. Configure 'bmap' in options
// Example:
// bmap: {
//     center: [104.114129, 37.550339],
//     zoom: 5,
//     roam: true
// }
// 3. Get BMap instance:
// const bmapInstance = chart.getModel().getComponent('bmap').getBMap();
```

--------------------------------

### Get ECharts Instance by DOM Element

Source: https://echarts.apache.org/zh/api.html

Retrieves an existing ECharts instance associated with a specific DOM element. This is useful if you need to interact with a chart that was previously initialized.

```javascript
const chartInstance = echarts.getInstanceByDom(domElement);
```

--------------------------------

### Get Registered Shape Class with echarts.graphic.getShapeClass

Source: https://echarts.apache.org/zh/api.html

Retrieves a registered shape class by its name. ECharts comes with several built-in shapes like 'circle', 'sector', 'rect', etc., which are pre-registered.

```javascript
var CircleShape = echarts.graphic.getShapeClass('circle');
// You can then instantiate or use CircleShape as needed.
```

--------------------------------

### Initialize ECharts Instance

Source: https://echarts.apache.org/zh/api.html

Creates an ECharts instance for a given DOM element. It supports various options for theme, rendering, and advanced features like server-side rendering and dirty rectangles. The DOM element must have defined dimensions, or they must be provided in the options.

```javascript
const chart = echarts.init(dom, theme, opts);
// Example with specific options:
const chartWithOptions = echarts.init(dom, null, {
    renderer: 'svg',
    width: 800,
    height: 600
});
```

--------------------------------

### echarts.init

Source: https://echarts.apache.org/zh/api.html

Initializes an ECharts instance on a given DOM element. This method returns an ECharts instance and ensures that only one instance is initialized per container.

```APIDOC
## echarts.init

### Description
Initializes an ECharts instance on a given DOM element. This method returns an ECharts instance and ensures that only one instance is initialized per container.

### Method
`Function`

### Endpoint
`echarts.init(dom?: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: { devicePixelRatio?: number, renderer?: string, useDirtyRect?: boolean, useCoarsePointer?: boolean, pointerSize?: number, ssr?: boolean, width?: number|string, height?: number|string, locale?: string }) => ECharts

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **dom** (HTMLDivElement|HTMLCanvasElement) - Optional - The container element for the ECharts instance. Required unless `opts.ssr` is enabled.
- **theme** (Object|string) - Optional - The theme to apply. Can be a theme configuration object or a registered theme name.
- **opts** (Object) - Optional - Additional options for initialization:
  - **devicePixelRatio** (number) - Optional - The device pixel ratio. Defaults to `window.devicePixelRatio`.
  - **renderer** (string) - Optional - The rendering mode, either `'canvas'` or `'svg'`.
  - **ssr** (boolean) - Optional - Whether to use server-side rendering. Only effective in SVG mode. Defaults to `false`.
  - **useDirtyRect** (boolean) - Optional - Whether to enable dirty rectangle rendering. Only effective in Canvas mode. Defaults to `false`.
  - **useCoarsePointer** (boolean) - Optional - Whether to enlarge the response area of clickable elements. `null` enables for mobile devices, `true` always enables, `false` always disables.
  - **pointerSize** (number) - Optional - The pixel size for enlarging the response area, used with `useCoarsePointer`.
  - **width** (number|string) - Optional - Explicitly specify the instance width in pixels. `null`/`undefined`/`'auto'` uses the `dom` width.
  - **height** (number|string) - Optional - Explicitly specify the instance height in pixels. `null`/`undefined`/`'auto'` uses the `dom` height.
  - **locale** (string) - Optional - The locale to use. Built-in options are `'ZH'` and `'EN'`. Can also register new locales via `echarts.registerLocale`.

### Request Example
```javascript
// Basic initialization
const chartDom = document.getElementById('chart-container');
const myChart = echarts.init(chartDom);

// Initialization with theme and options
const myChartWithOptions = echarts.init(chartDom, 'dark', {
    renderer: 'svg',
    width: 600,
    height: 400
});

// Initialization with SSR enabled
const myChartSSR = echarts.init(chartDom, null, {
    ssr: true,
    width: 800,
    height: 600
});
```

### Response
#### Success Response (200)
- **ECharts** - The initialized ECharts instance.

#### Response Example
```javascript
// Assuming myChart is the returned ECharts instance
console.log(myChart); // Outputs the ECharts instance object
```
```

--------------------------------

### Include and Use ECharts Theme in HTML

Source: https://echarts.apache.org/zh/download-theme.html

This snippet shows how to include the ECharts library and a specific theme file (e.g., 'vintage.js') in an HTML document. It then demonstrates initializing an ECharts instance with the specified theme by passing the theme name as the second argument to `echarts.init()`.

```html
<script src="echarts.js"></script>
<!-- 引入 vintage 主题 -->
<script src="theme/vintage.js"></script>
<script>
// 第二个参数可以指定前面引入的主题
var chart = echarts.init(document.getElementById('main'), 'vintage');
chart.setOption({
    ...
});
</script>
```

--------------------------------

### Handle ECharts Initialization in Vue

Source: https://echarts.apache.org/zh/faq.html

This documentation addresses potential issues when using ECharts with Vue. It advises against using Vue's reactive features like `reactive` and `ref` (Vue 3) or declaring ECharts instances within the `data` function (Vue 2) as this can lead to performance degradation and display problems. Instead, use plain variables or shallow reactive APIs.

```javascript
// Vue 3:
// Avoid:
// import { reactive, ref } from 'vue';
// const chartOptions = reactive({...});
// const chartInstance = ref(null);
// Use:
// import { shallowRef, markRaw } from 'vue';
// const chartInstance = shallowRef(null);
// const chartOptions = markRaw({...});

// Vue 2:
// Avoid:
// data() {
//   return {
//     chartInstance: null,
//     chartOptions: {}
//   };
// }
// Use:
// data() {
//   return {
//     chartInstance: null,
//     chartOptions: {}
//   };
// }.methods.initChart() {
//   this.chartInstance = echarts.init(this.$refs.chartContainer);
//   this.chartInstance.setOption(this.chartOptions);
// }
```

--------------------------------

### Use ECharts Components (v5.0.1+)

Source: https://echarts.apache.org/zh/api.html

Allows the use of ECharts components, especially with the new on-demand import feature. This method must be called before `echarts.init`. It requires importing core modules, chart types, components, and renderers.

```javascript
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    GridComponent,
    BarChart,
    CanvasRenderer
]);
```

--------------------------------

### echarts.use

Source: https://echarts.apache.org/zh/api.html

Registers components, charts, and renderers for use with ECharts. This method is crucial for implementing modular ECharts usage, especially when importing components on demand. It must be called before `echarts.init`.

```APIDOC
## echarts.use

### Description
Registers components, charts, and renderers for use with ECharts. This method is crucial for implementing modular ECharts usage, especially when importing components on demand. It must be called before `echarts.init`.

### Method
`Function`

### Endpoint
`echarts.use(plugins: Array<Object>)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **plugins** (Array<Object>) - Required - An array of plugin objects (components, charts, renderers) to be registered.

### Request Example
```javascript
// Import necessary modules from echarts/core, echarts/charts, echarts/components, echarts/renderers
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// Register the plugins
echarts.use([
    GridComponent,
    BarChart,
    CanvasRenderer
]);

// Now you can initialize ECharts with these components
// const chartDom = document.getElementById('chart-container');
// const myChart = echarts.init(chartDom);
// myChart.setOption({
//     series: [{
//         type: 'bar',
//         data: [5, 20, 36, 10, 10, 20]
//     }]
// });
```

### Response
#### Success Response (200)
This method does not return a value.

#### Response Example
```javascript
// No specific response to log for successful registration.
console.log('ECharts plugins registered.');
```
```

--------------------------------

### Naming Conventions

Source: https://echarts.apache.org/zh/coding-standard.html

Standardizes naming patterns for variables, functions, and classes using lowerCamelCase and UpperCamelCase respectively.

```javascript
const loadingModules = {};
function loadProduct() {}

function Element(options) {}
```

--------------------------------

### Object Property Iteration

Source: https://echarts.apache.org/zh/coding-standard.html

Demonstrates the safe way to iterate over object properties using hasOwnProperty to avoid issues with prototype pollution.

```javascript
const newInfo = {};
for (const key in info) {
    if (info.hasOwnProperty(key)) {
        newInfo[key] = info[key];
    }
}
```

--------------------------------

### 运算符与括号空格规范

Source: https://echarts.apache.org/zh/coding-standard.html

规范二元/一元运算符的空格使用，以及关键字（if/while等）与括号之间的空格要求。

```javascript
let a = !arr.length;
a++;
a = b + c;

if (condition) {
}

while (condition) {
}

(function () {
})();
```

--------------------------------

### Compatibility and Utility Usage

Source: https://echarts.apache.org/zh/coding-standard.html

Prohibits modifying built-in prototypes and encourages using utility libraries like zrender for array and object operations to maintain cross-environment compatibility.

```javascript
import * as zrUtil from 'zrender/src/core/util';

zrUtil.each(array, function (val, index) {
    sum += val;
});
```

--------------------------------

### Type Conversion and Parsing

Source: https://echarts.apache.org/zh/coding-standard.html

Provides guidelines for efficient type conversion and mandates the radix parameter when using parseInt to avoid ambiguity.

```javascript
num + '';
+str;
parseInt(str, 10);
```

--------------------------------

### echarts.getInstanceByDom

Source: https://echarts.apache.org/zh/api.html

Retrieves the ECharts instance associated with a given DOM element. This is useful for accessing an existing chart instance without needing to re-initialize it.

```APIDOC
## echarts.getInstanceByDom

### Description
Retrieves the ECharts instance associated with a given DOM element. This is useful for accessing an existing chart instance without needing to re-initialize it.

### Method
`Function`

### Endpoint
`echarts.getInstanceByDom(target: HTMLDivElement|HTMLCanvasElement) => ECharts

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **target** (HTMLDivElement|HTMLCanvasElement) - Required - The DOM element (e.g., a DIV or Canvas) that contains the ECharts instance.

### Request Example
```javascript
const chartDom = document.getElementById('chart-container');
const existingChart = echarts.getInstanceByDom(chartDom);

if (existingChart) {
    console.log('Found existing ECharts instance:', existingChart);
    // You can now use existingChart to call methods like resize(), setOption(), etc.
} else {
    console.log('No ECharts instance found on this DOM element.');
}
```

### Response
#### Success Response (200)
- **ECharts** - The ECharts instance associated with the DOM element, or `undefined` if no instance is found.

#### Response Example
```javascript
// Example output if an instance is found
// console.log(existingChart); // Outputs the ECharts instance object
```
```

--------------------------------

### Switch 语句缩进规范

Source: https://echarts.apache.org/zh/coding-standard.html

强制要求 switch 语句中的 case 和 default 必须保持缩进，以区分逻辑块。

```javascript
switch (variable) {
    case '1':
        // do...
        break;
    case '2':
        // do...
        break;
    default:
        // do...
}
```

--------------------------------

### echarts.connect

Source: https://echarts.apache.org/zh/api.html

Connects multiple ECharts instances, enabling them to interact and synchronize their states. This is useful for creating linked charts where actions in one chart affect others.

```APIDOC
## echarts.connect

### Description
Connects multiple ECharts instances, enabling them to interact and synchronize their states. This is useful for creating linked charts where actions in one chart affect others.

### Method
`Function`

### Endpoint
`echarts.connect(group: string|Array<ECharts>)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **group** (string|Array<ECharts>) - Required - Either the ID of the group to connect, or an array of ECharts instances to be connected.

### Request Example
```javascript
// Assuming chart1 and chart2 are initialized ECharts instances

// Method 1: Assign group IDs to instances and then connect by group ID
chart1.group = 'myGroup';
chart2.group = 'myGroup';
echarts.connect('myGroup');

// Method 2: Directly pass an array of instances
echarts.connect([chart1, chart2]);
```

### Response
#### Success Response (200)
This method does not return a value.

#### Response Example
```javascript
// No specific response to log for successful connection.
console.log('Charts connected successfully.');
```
```

--------------------------------

### Configure Data Item Tooltip

Source: https://echarts.apache.org/zh/changelog.html

Demonstrates how to customize the tooltip for a specific data point within an ECharts series by providing a string value to the tooltip property.

```javascript
data: [{
    name: 'First',
    tooltip: 'First tooltip',
    value: 0
}]
```

--------------------------------

### Variable Declaration and Conditional Logic

Source: https://echarts.apache.org/zh/coding-standard.html

Mandates the use of 'const' for variables and strict equality checks ('===') except when comparing against null or undefined.

```javascript
const name = 'MyName';

if (age === 30) {}
if (type == null) {}
```

--------------------------------

### Statement Formatting and Syntax Rules

Source: https://echarts.apache.org/zh/coding-standard.html

Defines mandatory rules for statement termination, block formatting, and function declaration styles to ensure code readability and consistency.

```javascript
if (condition) {
    callFunc();
}

function funcName() {
}

const funcName = function () {
};
```

--------------------------------

### Connect ECharts Instances for Interactivity

Source: https://echarts.apache.org/zh/api.html

Enables linked interactions between multiple ECharts instances. This can be achieved by assigning a common group ID to the charts or by passing an array of chart instances directly to the connect function.

```javascript
// Method 1: Assign group ID
chart1.group = 'myGroup';
chart2.group = 'myGroup';
echarts.connect('myGroup');

// Method 2: Pass instances directly
echarts.connect([chart1, chart2]);
```

--------------------------------

### Configure Horizontal or Vertical MarkLine in Cartesian Coordinate System (JavaScript)

Source: https://echarts.apache.org/zh/changelog.html

Demonstrates how to configure markLine to display as a horizontal or vertical line within a Cartesian coordinate system. This is useful for setting specific reference lines, especially when a bar chart has only a single value.

```javascript
data: [{
    // Horizontal line at Y-axis value 100
    yAxis: 100
}]

```

--------------------------------

### 换行与运算符位置规范

Source: https://echarts.apache.org/zh/coding-standard.html

规定单行字符限制为120个，且换行时运算符必须置于新行开头，同时要求 else 和 catch 另起新行。

```javascript
if (user.isAuthenticated()
    && user.isInRole('admin')
) {
    // Code
}

const result = number1 + number2 + number3
    + number4 + number5;

if (condition) {
    // some statements;
}
else {
    // some statements;
}
```

--------------------------------

### Listen to Map Roam Event in ECharts

Source: https://echarts.apache.org/zh/faq.html

This snippet demonstrates how to listen for the 'georoam' event in ECharts, which is triggered when the map is zoomed or panned. Ensure that the 'roam' property of the series is set to 'true' to enable this functionality.

```javascript
myChart.on('georoam', function (params) {
   console.log(params);
});
```

--------------------------------

### 对象与函数定义格式规范

Source: https://echarts.apache.org/zh/coding-standard.html

规定对象属性冒号后的空格、函数名与括号间的无空格要求，以及括号内部的间距限制。

```javascript
const obj = {
    a: 1,
    b: 2,
    c: 3
};

function funcName() {
}

callFunc(param1, param2);
```

--------------------------------

### echarts.graphic.clipRectByRect

Source: https://echarts.apache.org/zh/api.html

Clips one rectangle against another.

```APIDOC
## FUNCTION echarts.graphic.clipRectByRect

### Description
Calculates the intersection of two rectangles.

### Parameters
#### Request Body
- **targetRect** (Object) - Required - The rectangle to be clipped.
- **rect** (Object) - Required - The clipping rectangle.

### Response
- **Returns** (Object|undefined) - The resulting rectangle or undefined if completely clipped.
```

--------------------------------

### echarts.graphic.extendShape

Source: https://echarts.apache.org/zh/api.html

Creates a new shape class based on zrender.graphic.Path.

```APIDOC
## FUNCTION echarts.graphic.extendShape

### Description
Creates a new shape class that can be used for custom rendering.

### Parameters
#### Request Body
- **opts** (Object) - Required - Configuration object for the shape, refer to zrender.graphic.Path for details.

### Response
- **Returns** (zrender.graphic.Path) - The created shape class.
```

--------------------------------

### Extend Shape Class with echarts.graphic.extendShape

Source: https://echarts.apache.org/zh/api.html

Creates a new shape class for use in ECharts. It takes an options object and returns a zrender.graphic.Path object. Refer to zrender.graphic.Path for detailed options.

```javascript
echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
        width: 0,
        height: 0
    },
    buildPath: function (ctx, shape) {
        ctx.moveTo(shape.x, shape.y);
        ctx.lineTo(shape.x + shape.width, shape.y);
        ctx.lineTo(shape.x, shape.y + shape.height);
        ctx.lineTo(shape.x + shape.width, shape.y + shape.height);
        ctx.closePath();
    }
});
```

--------------------------------

### Dispose ECharts Instance

Source: https://echarts.apache.org/zh/api.html

Destroys an ECharts instance, making it unusable. This is useful for cleaning up resources when a chart is no longer needed.

```javascript
echarts.dispose(chartInstanceOrDomElement);
```

--------------------------------

### echarts.dispose

Source: https://echarts.apache.org/zh/api.html

Destroys an ECharts instance, releasing its resources. Once disposed, the instance can no longer be used.

```APIDOC
## echarts.dispose

### Description
Destroys an ECharts instance, releasing its resources. Once disposed, the instance can no longer be used.

### Method
`Function`

### Endpoint
`echarts.dispose(target: ECharts|HTMLDivElement|HTMLCanvasElement)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **target** (ECharts|HTMLDivElement|HTMLCanvasElement) - Required - The ECharts instance or the DOM element associated with the instance to be disposed.

### Request Example
```javascript
// Assuming myChart is an initialized ECharts instance
echarts.dispose(myChart);

// Alternatively, dispose using the DOM element
// const chartDom = document.getElementById('chart-container');
// echarts.dispose(chartDom);
```

### Response
#### Success Response (200)
This method does not return a value.

#### Response Example
```javascript
// No specific response to log for successful disposal.
console.log('ECharts instance disposed.');
```
```

--------------------------------

### echarts.graphic.clipPointsByRect

Source: https://echarts.apache.org/zh/api.html

Clips a set of points against a defined rectangle.

```APIDOC
## FUNCTION echarts.graphic.clipPointsByRect

### Description
Filters a list of points, returning only those contained within the specified rectangle.

### Parameters
#### Request Body
- **points** (Array<Array<number>>) - Required - List of points to clip.
- **rect** (Object) - Required - The clipping rectangle {x, y, width, height}.
```

--------------------------------

### Object and Array Declaration Standards

Source: https://echarts.apache.org/zh/coding-standard.html

Enforces the use of object and array literals, forbids trailing commas, and mandates specific quoting styles for object properties.

```javascript
const obj = {
    attr1: 'xxx',
    attr2: 'yyy'
};

const arr = [
    'xxx',
    'yyy'
];
```

--------------------------------

### Clip Points by Rectangle with echarts.graphic.clipPointsByRect

Source: https://echarts.apache.org/zh/api.html

Clips a list of points against a specified rectangle. It returns an array of points that fall within the boundaries of the rectangle. The input points are expected as an array of [x, y] coordinate pairs.

```javascript
var pointsToClip = [[23, 44], [12, 15], [50, 60]];
var clippingRect = {
    x: 10,
    y: 10,
    width: 30,
    height: 40
};
var clippedPoints = echarts.graphic.clipPointsByRect(pointsToClip, clippingRect);
console.log(clippedPoints); // Output: [[23, 44]]
```

--------------------------------

### Clip Rectangle by Rectangle with echarts.graphic.clipRectByRect

Source: https://echarts.apache.org/zh/api.html

Clips a target rectangle against another rectangle. It returns the resulting intersection rectangle. If the target rectangle is completely outside the clipping rectangle, it returns undefined.

```javascript
var targetRect = {
    x: 5,
    y: 5,
    width: 50,
    height: 50
};
var clippingRect = {
    x: 10,
    y: 10,
    width: 30,
    height: 30
};
var clippedRect = echarts.graphic.clipRectByRect(targetRect, clippingRect);
console.log(clippedRect); // Output: { x: 10, y: 10, width: 30, height: 30 }
```

--------------------------------

### Register Custom Series

Source: https://echarts.apache.org/zh/api.html

Registers a custom series type with a renderItem function, allowing for advanced, user-defined graphical rendering within ECharts.

```javascript
const renderItem = (params, api) => {
    return {
        type: 'circle',
        shape: {
            cx: api.coord([api.value(0), api.value(1)])[0],
            cy: api.coord([api.value(0), api.value(1)])[1],
            r: api.value(2) * (params.itemPayload.scale || 1)
        },
        style: {
            fill: api.visual('color'),
            opacity: params.itemPayload.opacity() || 1,
        }
    }
};
echarts.registerCustomSeries('bubble', renderItem);
```

--------------------------------

### echarts.disconnect

Source: https://echarts.apache.org/zh/api.html

Disconnects ECharts instances that were previously connected. If only a single instance needs to be removed from a group, its `group` property can be set to `null` or an empty string.

```APIDOC
## echarts.disconnect

### Description
Disconnects ECharts instances that were previously connected. If only a single instance needs to be removed from a group, its `group` property can be set to `null` or an empty string.

### Method
`Function`

### Endpoint
`echarts.disconnect(group: string)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **group** (string) - Required - The ID of the group to disconnect.

### Request Example
```javascript
// Assuming 'myGroup' is the ID of a connected group
echarts.disconnect('myGroup');

// To remove a single chart instance from a group:
// chartInstance.group = null; // or ''
```

### Response
#### Success Response (200)
This method does not return a value.

#### Response Example
```javascript
// No specific response to log for successful disconnection.
console.log('Charts disconnected successfully.');
```
```

--------------------------------

### echarts.graphic.getShapeClass

Source: https://echarts.apache.org/zh/api.html

Retrieves a registered shape class by its name.

```APIDOC
## FUNCTION echarts.graphic.getShapeClass

### Description
Retrieves a previously registered shape class. Includes built-in shapes like 'circle', 'rect', 'line', etc.

### Parameters
#### Query Parameters
- **name** (string) - Required - The name of the registered shape class.

### Response
- **Returns** (zrender.graphic.Path) - The requested shape class.
```

--------------------------------

### Register Geographic Maps

Source: https://echarts.apache.org/zh/api.html

Registers map data for use in geo components or map charts. Supports GeoJSON objects, SVG strings, and special area scaling configurations.

```javascript
const geoJSONSample = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [[2000, 2000], [5000, 2000], [5000, 5000], [2000, 5000]]
                ]
            },
            "properties": {
                "name": "Some Place",
                "cp": [220, 2100]
            }
        }
    ]
};
echarts.registerMap('my_geo_sample', geoJSONSample);
```

```javascript
const mySVG = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2">
<path name="left_rect" d="M 0,0 L 0,100 100,100 100,0 Z" fill="#765"/>
</svg>`;
echarts.registerMap('my_geo_sample', {svg: mySVG});
```

```javascript
echarts.registerMap('USA', usaJson, {
    Alaska: { left: -131, top: 25, width: 15 },
    Hawaii: { left: -110, top: 28, width: 5 }
});
```
Tokens:
Raw