### Link to Get Started Page

Source: https://github.com/apache/echarts-website/blob/asf-site/handbook/en/meta/edit-guide/index.html

Example of using the 'lang' variable to link to the 'Get Started' page, adapting to different language versions.

```markdown
[Get Started](${lang}/get-started)
```

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

### Configure Line Style Properties

Source: https://github.com/apache/echarts-website/blob/asf-site/en/llms-documents/option-parts/option.series-sunburst.md

Example demonstrating how to configure line style properties such as type, dash offset, and shadow effects for label guide lines.

```javascript
{
  type: [5, 10],
  dashOffset: 5
}
```

```javascript
{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}
```

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

### Link to Example View

Source: https://github.com/apache/echarts-website/blob/asf-site/handbook/en/meta/edit-guide/index.html

Example of using 'exampleViewPath' to link to the ECharts example viewer for 'scatter-exponential-regression'.

```markdown
[line-simple](${exampleViewPath}scatter-exponential-regression&edit=1&reset=1)
```

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

### Install Handsontable using npm

Source: https://github.com/apache/echarts-website/blob/asf-site/en/vendors/handsontable/0.26.1/README.md

Use npm to install Handsontable as a project dependency.

```bash
npm install handsontable --save
```

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

### Install ecStat using npm

Source: https://github.com/apache/echarts-website/blob/asf-site/en/js/vendors/echarts-stat/README.md

Install the ecStat library using npm for use in your Node.js projects.

```sh
npm install echarts-stat
```

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

### axisareaselected Event Listener Example

Source: https://github.com/apache/echarts-website/blob/asf-site/zh/llms-documents/api-parts/api.events.md

Example of how to listen for the axisareaselected event on parallel coordinates axes to get selected data indices.

```javascript
chart.on('axisareaselected', function () {
    var series0 = chart.getModel().getSeries()[0];
    var series1 = chart.getModel().getSeries()[1];
    var indices0 = series0.getRawIndicesByActiveState('active');
    var indices1 = series1.getRawIndicesByActiveState('active');
    console.log(indices0, indices1);
});
```

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

### Example of Border and Shadow Styles

Source: https://github.com/apache/echarts-website/blob/asf-site/en/llms-documents/option-parts/option.series-line.md

Demonstrates how to configure border properties like type and dash offset, along with shadow effects for mark areas.

```javascript
{
borderType: [5, 10],
borderDashOffset: 5
}
```

```javascript
{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}
```

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

### Polyline Enter Animation Example

Source: https://github.com/apache/echarts-website/blob/asf-site/zh/llms-documents/option-parts/option.graphic.md

Configures the entry animation for a polyline element. The 'enterFrom' property defines the initial state before the animation starts, such as opacity or position. This example shows a circle fading in and moving from the left.

```javascript
{
    type: 'circle',
    x: 100,
    enterFrom: {
        // 淡入
        style: { opacity: 0 },
        // 从左飞入
        x: 0
    }
}
```

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

### Respond with SVG String (Express.js)

Source: https://github.com/apache/echarts-website/blob/asf-site/handbook/en/how-to/cross-platform/server/index.html

Use `renderToSVGString` to get an SVG string from a chart and send it as an HTTP response. This example uses Express.js.

```typescript
res.writeHead(200, {
  'Content-Type': 'application/xml'
});
res.write(svgStr); // svgStr is the result of chart.renderToSVGString()
res.end();
```

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

### Graphic Element Style Transition Example

Source: https://github.com/apache/echarts-website/blob/asf-site/en/llms-documents/option-parts/option.graphic.md

Demonstrates how to enable transition animations for specific style properties or all style properties of a graphic element.

```javascript
{
    type: 'rect',
    style: {
        ...
        // This two props will perform transition animation.
        transition: ['mmm', 'ppp']
    }
}
```

```javascript
{
    type: 'rect',
    style: {
        ...
    },
    // Indicate that all props in `style` will
    // have transition animation.
    transition: 'style',
}
```

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

### Step Line Chart with 'start', 'middle', and 'end' steps

Source: https://github.com/apache/echarts-website/blob/asf-site/handbook/en/how-to/chart-types/line/step-line/index.html

This example demonstrates the three different step types ('start', 'middle', 'end') available for line charts in ECharts. Each series uses a different step type to visualize how the line connects data points.

```javascript
option = {
  legend: {},
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Step Start',
      type: 'line',
      step: 'start',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Step Middle',
      type: 'line',
      step: 'middle',
      data: [220, 282, 201, 234, 290, 430, 410]
    },
    {
      name: 'Step End',
      type: 'line',
      step: 'end',
      data: [450, 432, 401, 454, 590, 530, 510]
    }
  ]
};
```

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

### High-Dimensional Dataset Initialization

Source: https://github.com/apache/echarts-website/blob/asf-site/handbook/en/basics/release-note/5-2-0/index.html

This example demonstrates the initialization of a high-dimensional dataset with 1000 indices and 10 data points. It was used to illustrate a performance issue in previous versions related to dataset processing.

```javascript
const indices = Array.from(Array(1000), (_, i) => {
  return `index${i}`;
});
const option = {
  xAxis: { type: 'category' },
  yAxis: {},
  dataset: {
    // dimension: ['date', . . indices],
    source: Array.from(Array(10), (_, i) => {
      return {
        date: i,
        ... .indices.reduce((item, next) => {
          item[next] = Math.random() * 100;
          return item;
        }, {})
      };
    })
  },
  series: indices.map(index => {
    return { type: 'line', name: index };
  })
};
```

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

### Basic 3D Scatter Plot Usage

Source: https://github.com/apache/echarts-website/blob/asf-site/en/js/vendors/echarts-gl/README.md

Initialize a 3D chart and set options to display a basic 3D scatter plot. This example demonstrates the fundamental setup for creating 3D visualizations with ECharts-GL.

```js
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    grid3D: {},
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: {},
    series: [{
        type: 'scatter3D',
        symbolSize: 50,
        data: [[-1, -1, -1], [0, 0, 0], [1, 1, 1]],
        itemStyle: {
            opacity: 1
        }
    }]
})
```

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

### Example Calendar Configuration with Split Line Style

Source: https://github.com/apache/echarts-website/blob/asf-site/en/llms-documents/option-parts/option.calendar.md

Demonstrates how to enable and style the split lines for a calendar component, including color, width, and type.

```javascript
calendar: [{
    splitLine: {
        show: true,
        lineStyle: {
            color: '#000',
            width: 1,
            type: 'solid'
        }
    }
}]
```

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

### Scatter Chart with SVG Path Symbol

Source: https://github.com/apache/echarts-website/blob/asf-site/handbook/en/how-to/chart-types/scatter/basic-scatter/index.html

Customize scatter plot symbols using SVG path data. This allows for complex custom shapes like the heart example shown. Ensure the SVG path is correctly formatted starting with 'path://'.

```javascript
option = {
  xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [220, 182, 191, 234, 290, 330, 310],
      symbolSize: 20,
      symbol: 'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z'
    }
  ]
};
```

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

### Polyline Transition Example

Source: https://github.com/apache/echarts-website/blob/asf-site/zh/llms-documents/option-parts/option.graphic.md

Demonstrates how to configure transition animations for polyline elements, specifying which properties should animate. Supports 'all' for all properties or an array of specific properties like 'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. Can also target 'shape', 'style', or 'extra' for their sub-properties.

```javascript
{
    type: 'rect',
    x: 100,
    y: 200,
    transition: ['x', 'y']
}
```

```javascript
{
    type: 'rect',
    shape: { // ... },
    // 表示 shape 中所有属性都开启过渡动画。
    transition: 'shape'
}
```

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

### Graph NPM Example with Thumbnail

Source: https://github.com/apache/echarts-website/blob/asf-site/en/llms-documents/option.md

Displays a graph using the NPM dependency visualization example. The thumbnail component is currently only supported for series.graph.

```javascript
{
    series: [
        {
            type: 'graph',
            layout: 'force',
            data: [
                {
                    name: 'Node A',
                    symbolSize: 100
                },
                {
                    name: 'Node B',
                    symbolSize: 50
                }
            ],
            links: [
                {
                    source: 'Node A',
                    target: 'Node B'
                }
            ],
            roam: true,
            label: {
                position: 'right'
            },
            thumbnail: {}
        }
    ]
}
```

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

### Graphic Element Transition Example

Source: https://github.com/apache/echarts-website/blob/asf-site/en/llms-documents/option-parts/option.graphic.md

Demonstrates how to apply transition animations to graphic element properties like 'x' and 'y'. Supports transitioning individual properties or all properties within 'shape' or 'style'.

```javascript
{
    type: 'rect',
    x: 100,
    y: 200,
    transition: ['x', 'y']
}
```

```javascript
{
    type: 'rect',
    shape: { // ... },
    // Indicate that all props in `shape` will
    // have transition animation.
    transition: 'shape'
}
```

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

### Linking to ECharts Examples

Source: https://github.com/apache/echarts-website/blob/asf-site/handbook/en/meta/edit-guide/index.html

Create links to ECharts examples using a predefined path variable, allowing users to view and edit the example.

```markdown
[line-simple](${exampleEditorPath}line-simple&edit=1&reset=1)
```

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

### Initialize ECharts Example

Source: https://github.com/apache/echarts-website/blob/asf-site/examples/en/view.html

Initializes an ECharts example in the specified DOM element with global arguments. This is typically used for setting up interactive examples on the website.

```javascript
window.EC_WWW_LANG = 'en';
if (/windows/i.test(navigator.userAgent)) {
    var el = document.createElement('style');
    el.innerText = '' + '@font-face {font-family:"noto-thin";src:local("Microsoft Yahei");}' + '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
    document.head.insertBefore(el, document.getElementById('font-hack'));
}

window.ECHARTS_WWW_VENDORS_CDN_ROOT = 'https://echarts.apache.org/en/js/vendors/';
window.globalArgsExtra = { page: 'view', locale: 'en' };
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
window.globalArgsExtra.version = '1781172918528';
window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/examples';

echartsExample.init('#ec-example-main', window.globalArgsExtra);

// Remove apache banner
const dom = document.getElementById('apache-banner');
if (dom && dom.parentNode) {
    dom.parentNode.removeChild(dom);
}
```

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

### Embedding Examples with Iframe Component

Source: https://github.com/apache/echarts-website/blob/asf-site/handbook/en/meta/edit-guide/index.html

Use the `md-example` component to embed interactive examples. The `src` attribute should be the path after `?c=` in the ECharts examples editor URL.

```html
<md-example src="doc-example/getting-started" width="100%" height="300"></md-example>
```

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

### Arc Transition Example

Source: https://github.com/apache/echarts-website/blob/asf-site/en/llms-documents/option-parts/option.series-custom.md

Demonstrates how to apply transition animations to arc elements. Specifies properties like 'x' and 'y' to animate by default, or customizes transitions for specific properties.

```javascript
{
    type: 'rect',
    x: 100,
    y: 200,
    transition: ['x', 'y']
}
```

```javascript
{
    type: 'rect',
    shape: { // ... },
    // Indicate that all props in `shape` will
    // have transition animation.
    transition: 'shape'
}
```

```javascript
{
    type: 'rect',
    x: 100,
    y: 200,
    transition: []
}
```

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

### Install ECharts v6

Source: https://github.com/apache/echarts-website/blob/asf-site/handbook/en/basics/release-note/v6-upgrade-guide/index.html

Use npm to install the latest version of ECharts.

```bash
npm install echarts@6
```

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

### Install Immutable.js

Source: https://github.com/apache/echarts-website/blob/asf-site/en/vendors/immutable/3.7.4/README.md

Install the immutable library using npm. This is the first step to using immutable data structures in your project.

```shell
npm install immutable
```