### Link to Example Viewer

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example of using the 'exampleViewPath' built-in variable to link to an example for viewing, with edit and reset parameters.

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

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

### Link to Example Editor

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example of using the 'exampleEditorPath' built-in variable to link to an example in the editor, with edit and reset parameters.

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

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

### Linking to ECharts Examples Editor

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Create links to the ECharts examples editor using a specific URL format that includes the example name and edit/reset parameters.

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

```

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

### Basic Doughnut Chart Configuration

Source: https://echarts.apache.org/handbook/en/how-to/chart-types/pie/doughnut

Configure a basic doughnut chart by setting the 'type' to 'pie' and defining the 'radius' as an array of two strings representing inner and outer radii. This example demonstrates a standard doughnut chart setup.

```javascript
option = {
  title: {
    text: 'A Case of Doughnut Chart',
    left: 'center',
    top: 'center'
  },
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: 'A'
        },
        {
          value: 234,
          name: 'B'
        },
        {
          value: 1548,
          name: 'C'
        }
      ],
      radius: ['40%', '70%']
    }
  ]
};

```

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

### Link to echarts.init API Source

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example of using the 'apiPath' built-in variable to link to the API documentation for echarts.init.

```markdown
[echarts.init](${apiPath}echarts.init)
```

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

### Link to Language-Specific Page

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example of using the 'lang' built-in variable to create a link to a language-specific page, such as 'Get Started'.

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

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

### Link to echarts.init API Documentation

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example of using the 'mainSitePath' built-in variable to link to the main site's API documentation for echarts.init.

```markdown
[echarts.init](${mainSitePath}api.html#echarts.init)
```

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

### Full ECharts Example with Drag and Tooltip

Source: https://echarts.apache.org/handbook/en/how-to/interaction/drag

A complete ECharts initialization and configuration demonstrating drag-and-drop points with custom tooltip behavior and real-time data updates.

```javascript
import echarts from 'echarts';

var symbolSize = 20;
var data = [
  [15, 0],
  [-50, 10],
  [-56.5, 20],
  [-46.5, 30],
  [-22.1, 40]
];
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  tooltip: {
    triggerOn: 'none',
    formatter: function(params) {
      return (
        'X: ' +
        params.data[0].toFixed(2) +
        '<br />Y: ' +
        params.data[1].toFixed(2)
      );
    }
  },
  xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } },
  yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } },
  series: [
    { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data }
  ]
});
myChart.setOption({
  graphic: echarts.util.map(data, function(item, dataIndex) {
    return {
      type: 'circle',
      position: myChart.convertToPixel('grid', item),
      shape: { r: symbolSize / 2 },
      invisible: true,
      draggable: true,
      ondrag: echarts.util.curry(onPointDragging, dataIndex),
      onmousemove: echarts.util.curry(showTooltip, dataIndex),
      onmouseout: echarts.util.curry(hideTooltip, dataIndex),
      z: 100
    };
  })
});
window.addEventListener('resize', function() {
  myChart.setOption({
    graphic: echarts.util.map(data, function(item, dataIndex) {
      return { position: myChart.convertToPixel('grid', item) };
    })
  });
});
function showTooltip(dataIndex) {
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: dataIndex
  });
}
function hideTooltip(dataIndex) {
  myChart.dispatchAction({ type: 'hideTip' });
}
function onPointDragging(dataIndex, dx, dy) {
  data[dataIndex] = myChart.convertFromPixel('grid', this.position);
  myChart.setOption({
    series: [
      {
        id: 'a',
        data: data
      }
    ]
  });
}
```

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

### Install ECharts using npm

Source: https://echarts.apache.org/download.html

Install the Apache ECharts library into your project using the npm package manager. This is a common method for web development projects.

```bash
npm install echarts
```

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

### Performance Optimization for High-Dimensional Data

Source: https://echarts.apache.org/handbook/en/basics/release-note/5-2-0

This example demonstrates how to configure a dataset for high-dimensional data visualization. The optimization ensures shared dataset storage, improving memory usage and initialization performance.

```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 };
  })
};
```

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

### Configure Dataset Mapping with seriesLayoutBy

Source: https://echarts.apache.org/handbook/en/concepts/dataset

Demonstrates how to use `seriesLayoutBy` to map rows or columns of a dataset to chart series. The example shows both 'row' and 'column' layouts for different coordinate systems.

```javascript
option = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ['product', '2012', '2013', '2014', '2015'],
      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
      ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
    ]
  },
  xAxis: [
    { type: 'category', gridIndex: 0 },
    { type: 'category', gridIndex: 1 }
  ],
  yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
  grid: [{ bottom: '55%' }, { top: '55%' }],
  series: [
    // These series will show in the first coordinate, each series map a row in dataset.
    { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
    { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
    { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
    // These series will show in the second coordinate, each series map a column in dataset.
    { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 }
  ]
};  
```

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

### Rich Text Styling Example

Source: https://echarts.apache.org/handbook/en/how-to/label/rich-text

Demonstrates advanced rich text styling with various text and background properties, including borders, shadows, and custom styles for different text fragments.

```javascript
option = {
  series: [
    {
      type: 'scatter',
      symbolSize: 1,
      data: [
        {
          value: [0, 0],
          label: {
            show: true,
            formatter: [
              'Plain text',
              '{textBorder|textBorderColor + textBorderWidth}',
              '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',
              '{bg|backgroundColor + borderRadius + padding}',
              '{border|borderColor + borderWidth + borderRadius + padding}',
              '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'
            ].join('\n'),
            backgroundColor: '#eee',
            borderColor: '#333',
            borderWidth: 2,
            borderRadius: 5,
            padding: 10,
            color: '#000',
            fontSize: 14,
            shadowBlur: 3,
            shadowColor: '#888',
            shadowOffsetX: 0,
            shadowOffsetY: 3,
            lineHeight: 30,
            rich: {
              textBorder: {
                fontSize: 20,
                textBorderColor: '#000',
                textBorderWidth: 3,
                color: '#fff'
              },
              textShadow: {
                fontSize: 16,
                textShadowBlur: 5,
                textShadowColor: '#000',
                textShadowOffsetX: 3,
                textShadowOffsetY: 3,
                color: '#fff'
              },
              bg: {
                backgroundColor: '#339911',
                color: '#fff',
                borderRadius: 15,
                padding: 5
              },
              border: {
                color: '#000',
                borderColor: '#449911',
                borderWidth: 1,
                borderRadius: 3,
                padding: 5
              },
              shadow: {
                backgroundColor: '#992233',
                padding: 5,
                color: '#fff',
                shadowBlur: 5,
                shadowColor: '#336699',
                shadowOffsetX: 6,
                shadowOffsetY: 6
              }
            }
          }
        }
      ]
    }
  ],
  xAxis: {
    show: false,
    min: -1,
    max: 1
  },
  yAxis: {
    show: false,
    min: -1,
    max: 1
  }
};

```

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

### Pie Chart Data Transition

Source: https://echarts.apache.org/handbook/en/basics/release-note/5-2-0

Demonstrates data updates in a pie chart with transitions. This example shows how data changes can be animated smoothly within the same series type.

```javascript
function makeRandomData() {
  return [
    {
      value: Math.random(),
      name: 'A'
    },
    {
      value: Math.random(),
      name: 'B'
    },
    {
      value: Math.random(),
      name: 'C'
    }
  ];
}
option = {
  series: [
    {
      type: 'pie',
      radius: [0, '50%'],
      data: makeRandomData()
    }
  ]
};

setInterval(() => {
  myChart.setOption({
    series: {
      data: makeRandomData()
    }
  });
}, 2000);  

```

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

### Link to xAxis.type Source Code

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example of using the 'optionPath' built-in variable to link to the source code of a specific option property.

```markdown
[xAxis.type](${optionPath}xAxis.type)
```

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

### JavaScript Setup for Animating Contour on Globe

Source: https://echarts.apache.org/examples/en/editor.html?c=animating-contour-on-globe&gl=1

Initializes configuration, canvas, and context for rendering. Loads necessary D3.js libraries and an image for contour generation.

```javascript
var config = {
  color: '#c0101a',
  levels: 1,
  intensity: 4,
  threshold: 0.01
};
var canvas = document.createElement('canvas');
canvas.width = 4096;
canvas.height = 2048;
context = canvas.getContext('2d');
context.lineWidth = 0.5;
context.strokeStyle = config.color;
context.fillStyle = config.color;
context.shadowColor = config.color;
$.when(
  $.getScript(CDN_PATH + 'd3-array@2.8.0/dist/d3-array.js'),
  $.getScript(CDN_PATH + 'd3-contour@2.0.0/dist/d3-contour.js'),
  $.getScript(CDN_PATH + 'd3-geo@2.0.1/dist/d3-geo.js'),
  $.getScript(CDN_PATH + 'd3-timer@2.0.0/dist/d3-timer.js')
).done(function () {
  image(ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg').then(
    function (image) {
      var m = image.height,
        n = image.width,
        values = new Array(n * m),
        contours = d3.contours().size([n, m]).smooth(true),
        projection = d3.geoIdentity().scale(canvas.width / n),
        path = d3.geoPath(projection, context);
      // StackBlur.R(image, 5);
      for (var j = 0, k = 0; j < m; ++j) {
        for (var i = 0; i < n; ++i, ++k) {
          values[k] = image.data[k << 2] / 255;
        }
      }
      var opt = {
        image: canvas
      };
      var results = [];
      function update(threshold, levels) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        
```

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

### Code Embedding with Comments

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example demonstrating a recommended way to write code, avoiding syntactically problematic styles like incomplete comments within code blocks.

```javascript
option = {
  series: [
    {
      type: 'bar'
      // ...
    }
  ]
};
```

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

### Configure Dataset with External Transform

Source: https://echarts.apache.org/handbook/en/concepts/data-transform

Configure a dataset to use a registered external transform, specifying its type and any necessary parameters. This example shows how to apply an exponential regression using ecStat.

```javascript
option = {
  dataset: [
    {
      source: rawData
    },
    {
      transform: {
        // Reference the registered external transform.
        // Note that external transform has a namespace (like 'ecStat:xxx'
        // has namespace 'ecStat').
        // built-in transform (like 'filter', 'sort') does not have a namespace.
        type: 'ecStat:regression',
        config: {
          // Parameters needed by the external transform.
          method: 'exponential'
        }
      }
    }
  ],
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      name: 'scatter',
      type: 'scatter',
      datasetIndex: 0
    },
    {
      name: 'regression',
      type: 'line',
      symbol: 'none',
      datasetIndex: 1
    }
  ]
};
```

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

### Basic Pie Chart - ECharts

Source: https://echarts.apache.org/examples/en/editor.html?c=pie-pattern

A fundamental pie chart example. Use this as a starting point for creating simple pie charts with ECharts.

```javascript
option = {
    title: {
        text: 'Awesome Pie',
        subtext: 'Purely based on ECharts',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['Direct Access', 'Email Marketing', 'Affiliates', 'Video Ads', 'Search Engine']
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                { value: 335, name: 'Direct Access' },
                { value: 310, name: 'Email Marketing' },
                { value: 234, name: 'Affiliates' },
                { value: 135, name: 'Video Ads' },
                { value: 548, name: 'Search Engine' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
```

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

### Initialize and Load Scripts

Source: https://echarts.apache.org/examples/en/editor.html?c=globe-contour-paint&gl=1

Sets up configuration, canvas, and context, then asynchronously loads necessary D3.js scripts.

```javascript
var config = {
  color: '#c0101a',
  levels: 50,
  intensity: 100,
  threshold: 0.01
};
var canvas = document.createElement('canvas');
canvas.width = 4096;
canvas.height = 2048;
context = canvas.getContext('2d');
context.lineWidth = 0.4;
context.strokeStyle = config.color;
context.fillStyle = config.color;
context.shadowColor = config.color;
$.when(
  $.getScript(CDN_PATH + 'd3-array@2.8.0/dist/d3-array.js'),
  $.getScript(CDN_PATH + 'd3-contour@2.0.0/dist/d3-contour.js'),
  $.getScript(CDN_PATH + 'd3-geo@2.0.1/dist/d3-geo.js'),
  $.getScript(CDN_PATH + 'd3-timer@2.0.0/dist/d3-timer.js')
).done(function () {
  // Image loading and processing follows
});
```

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

### Bar Chart with Axis Breaks Configuration

Source: https://echarts.apache.org/examples/en/editor.html?c=bar-breaks-simple

This JavaScript code configures a bar chart with axis breaks. It defines the data for the breaks, including start and end points and the gap size. This setup is useful for visualizing data where there are large gaps or outliers that would otherwise compress the main data range.

```javascript
var _currentAxisBreaks = [
{
start: 5000,
end: 100000,
gap: '1.5%'
},
{
// `start` and `end` are also used as the identifier for a certain axis break.
start: 105000,
end: 3100000,
gap: '1.5%'
}
];
option = {
title: {
text: 'Bar Chart with Axis Breaks',
subtext: 'Click the break area to expand it',
left: 'center',
textStyle: {
fontSize: 20
},
subtextStyle: {
color: '#175ce5',
fontSize: 15,
fontWeight: 'bold'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
top: 120
},
xAxis: [
{
type: 'category',

```

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

### Initialize Simplex Noise and Configuration

Source: https://echarts.apache.org/examples/en/editor.html?c=bar3d-noise-modified-from-marpi-demo&gl=1

Loads the Simplex Noise script and initializes a configuration object for the visualization. This includes setting up parameters for waves, colors, and randomization.

```javascript
$.getScript(CDN_PATH + 'simplex-noise@2.4.0/simplex-noise.js').done(
function () {
var simplex = new SimplexNoise();
var UPDATE_DURATION = 1000;
function initVisualizer() {
var config = {
numWaves: 2,
randomize: randomize,
color1: '#000',
color2: '#300',
color3: '#fff',
size: 150,
roughness: 0.5,
metalness: 0
};
//gui.add(config, "numWaves", 1, 3).name("Waves number").onChange(update).listen();
for (var i = 0; i < 2; i++) {
config['wave' + i + 'axis' + 'x'] = Math.random();
config['wave' + i + 'axis' + 'y'] = Math.random();
config['wave' + i + 'rounding'] = Math.random();
config['wave' + i + 'square'] = Math.random();
}
function randomize() {
//config.numWaves = Math.floor(Math.random() * 3) + 1;
for (var i = 0; i < 2; i++) {
config['wave' + i + 'axis' + 'x'] = Math.random();
config['wave' + i + 'axis' + 'y'] = Math.random();
config['wave' + i + 'rounding'] = Math.random();
config['wave' + i + 'square'] = Math.random();
}
// Iterate over all controllers
for (var i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
update();
}
function update() {
var item = [];
var dataProvider = [];
var mod = 0.1;

```

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

### Embedding ECharts Examples via Iframe

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Use the 'md-example' component to embed ECharts examples using an iframe. The 'src' attribute corresponds to the example identifier.

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

```

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

### Initialize Chart with v5 Theme

Source: https://echarts.apache.org/handbook/en/basics/release-note/v6-upgrade-guide

Apply the v5 theme to maintain previous default styles and colors when initializing a chart in v6.

```javascript
import 'echarts/theme/v5';
const chart = echarts.init(document.getElementById('container'), 'v5');
```

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

### Example Accessible Chart Description

Source: https://echarts.apache.org/handbook/en/best-practices/aria

This is an example of an automatically generated aria-label for a pie chart, which screen readers use to describe the chart's content to visually impaired users.

```text
This is a chart about "Referrer of a User" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548.


```

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

### Basic Data Transform with Filter

Source: https://echarts.apache.org/handbook/en/concepts/data-transform

This example demonstrates a basic data transform using the 'filter' type to select data for a specific year. It shows how to define the source data and then configure a dataset with a transform to filter it.

```javascript
var option = {
  dataset: [
    {
      // This dataset is on `datasetIndex: 0`.
      source: [
        ['Product', 'Sales', 'Price', 'Year'],
        ['Cake', 123, 32, 2011],
        ['Cereal', 231, 14, 2011],
        ['Tofu', 235, 5, 2011],
        ['Dumpling', 341, 25, 2011],
        ['Biscuit', 122, 29, 2011],
        ['Cake', 143, 30, 2012],
        ['Cereal', 201, 19, 2012],
        ['Tofu', 255, 7, 2012],
        ['Dumpling', 241, 27, 2012],
        ['Biscuit', 102, 34, 2012],
        ['Cake', 153, 28, 2013],
        ['Cereal', 181, 21, 2013],
        ['Tofu', 395, 4, 2013],
        ['Dumpling', 281, 31, 2013],
        ['Biscuit', 92, 39, 2013],
        ['Cake', 223, 29, 2014],
        ['Cereal', 211, 17, 2014],
        ['Tofu', 345, 3, 2014],
        ['Dumpling', 211, 35, 2014],
        ['Biscuit', 72, 24, 2014]
      ]
      // id: 'a'
    },
    {
      // This dataset is on `datasetIndex: 1`.
      // A `transform` is configured to indicate that the
      // final data of this dataset is transformed via this
      // transform function.
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2011 }
      }
      // There can be optional properties `fromDatasetIndex` or `fromDatasetId`
      // to indicate that where is the input data of the transform from.
      // For example, `fromDatasetIndex: 0` specify the input data is from
      // the dataset on `datasetIndex: 0`, or `fromDatasetId: 'a'` specify the
      // input data is from the dataset having `id: 'a'`.
      // [DEFAULT_RULE]
      // If both `fromDatasetIndex` and `fromDatasetId` are omitted,
      // `fromDatasetIndex: 0` are used by default.
    },
    {
      // This dataset is on `datasetIndex: 2`.
      // Similarly, if neither `fromDatasetIndex` nor `fromDatasetId` is
      // specified, `fromDatasetIndex: 0` is used by default
      transform: {
        // The "filter" transform filters and gets data items only match
        // the given condition in property `config`.
        type: 'filter',
        // Transforms has a property `config`. In this "filter" transform,
        // the `config` specify the condition that each result data item
        // should be satisfied. In this case, this transform get all of
        // the data items that the value on dimension "Year" equals to 2012.
        config: { dimension: 'Year', value: 2012 }
      }
    },
    {
      // This dataset is on `datasetIndex: 3`
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2013 }
      }
    }
  ],
  series: [
    {
      type: 'pie',
      radius: 50,
      center: ['25%', '50%'],
      // In this case, each "pie" series reference to a dataset that has
      // the result of its "filter" transform.
      datasetIndex: 1
    },
    {
      type: 'pie',
      radius: 50,
      center: ['50%', '50%'],
      datasetIndex: 2
    },
    {
      type: 'pie',
      radius: 50,
      center: ['75%', '50%'],
      datasetIndex: 3
    }
  ]
};  
```

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

### Full Example: Rich Text Effects in ECharts Scatter Plot

Source: https://echarts.apache.org/handbook/en/how-to/label/rich-text

This comprehensive example showcases the implementation of icons, horizontal rules, title blocks, and simple table-like text formatting within an ECharts scatter plot's labels.

```javascript
option = {
  series: [
    {
      type: 'scatter',
      data: [
        {
          value: [0, 0],
          label: {
            formatter: [
              '{tc|Center Title}{titleBg|}',
              '  Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|}  ',
              '{hr|}',
              '  xxxxx {showers|} xxxxxxxx  xxxxxxxxx  '
            ].join('\n'),
            rich: {
              titleBg: {
                align: 'right'
              }
            }
          }
        },
        {
          value: [0, 1],
          label: {
            formatter: [
              '{titleBg|Left Title}',
              '  Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|}  ',
              '{hr|}',
              '  xxxxx {showers|} xxxxxxxx  xxxxxxxxx  '
            ].join('\n')
          }
        },
        {
          value: [0, 2],
          label: {
            formatter: [
              '{titleBg|Right Title}',
              '  Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|}  ',
              '{hr|}',
              '  xxxxx {showers|} xxxxxxxx  xxxxxxxxx  '
            ].join('\n'),
            rich: {
              titleBg: {
                align: 'right'
              }
            }
          }
        }
      ],
      symbolSize: 1,
      label: {
        show: true,
        backgroundColor: '#ddd',
        borderColor: '#555',
        borderWidth: 1,
        borderRadius: 5,
        color: '#000',
        fontSize: 14,
        rich: {
          titleBg: {
            backgroundColor: '#000',
            height: 30,
            borderRadius: [5, 5, 0, 0],
            padding: [0, 10, 0, 10],
            width: '100%',
            color: '#eee'
          },
          tc: {
            align: 'center',
            color: '#eee'
          },
          hr: {
            borderColor: '#777',
            width: '100%',
            borderWidth: 0.5,
            height: 0
          },
          sunny: {
            height: 30,
            align: 'left',
            backgroundColor: {
              image:
                'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png'
            }
          },
          cloudy: {
            height: 30,
            align: 'left',
            backgroundColor: {
              image:
                'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png'
            }
          },
          showers: {
            height: 30,
            align: 'left',
            backgroundColor: {
              image:
                'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'
            }
          }
        }
      }
    }
  ],
  xAxis: {
    show: false,
    min: -1,
    max: 1
  },
  yAxis: {
    show: false,
    min: 0,
    max: 2,
    inverse: true
  }
};  
```

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

### Basic Code Embedding

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example of embedding a basic JavaScript code block for an ECharts option.

```javascript
option = {
    series: [{
        type: 'bar',
        data: [23, 24, 18, 25, 27, 28, 25]
    }]
};
```

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

### Using a Pre-built Theme

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

Include the ECharts core library and the desired theme file in your HTML. Then, initialize your chart and specify the theme name when calling `echarts.init()`.

```html
<script src="echarts.js"></script>
<!-- import vintage theme -->
<script src="theme/vintage.js"></script>
<script>
// The second parameter is the name of the theme imported
var chart = echarts.init(document.getElementById('main'), 'vintage');
chart.setOption({
    ...
});
</script>
```

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

### Basic Gauge Chart

Source: https://echarts.apache.org/examples/en/editor.html?c=gauge

A simple Gauge chart example. Ensure ECharts library is included in your project.

```javascript
var gaugeChart = echarts.init(document.getElementById('gauge-chart'));

var option = {
    series: [
        {
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 50, name: 'Score' }]
        }
    ]
};

gaugeChart.setOption(option);
```

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

### Configure Transition Animations for Graphic Elements

Source: https://echarts.apache.org/handbook/en/basics/release-note/5-3-0

Configure transition animations for properties like 'style', 'x', and 'y' for elements in custom series. Use 'enterFrom' and 'leaveTo' to define entry and exit animation states.

```javascript
function renderItem() {
  //...
  return {
    //...
    x: 100,
    // 'style', 'x', 'y' will be animated
    transition: ['style', 'x', 'y'],
    enterFrom: {
      style: {
        // Fade in
        opacity: 0
      },
      // Fly in from the left
      x: 0
    },
    leaveTo: {
      // Fade out
      opacity: 0
    },
    // Fly out to the right
    x: 200
  };
}
```

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

### Scatter Plot Data Example

Source: https://echarts.apache.org/examples/en/editor.html?c=effectScatter-bmap

This code defines sample data for a scatter plot, where each item has a name and a value.

```javascript
const data = [
  { name: '海门', value: 9 },
  { name: '鄂尔多斯', value: 12 },
  { name: '招远', value: 12 },
  { name: '舟山', value: 12 },
  { name: '齐齐哈尔', value: 14 },
  { name: '盐城', value: 15 },
  { name: '赤峰', value: 16 },
  { name: '青岛', value: 18 },
  { name: '乳山', value: 18 },
  { name: '金昌', value: 19 },
  { name: '泉州', value: 21 },
  { name: '莱西', value: 21 },
  { name: '日照', value: 21 },
  { name: '胶南', value: 22 },
  { name: '南通', value: 23 },
  { name: '拉萨', value: 24 },
  { name: '云浮', value: 24 },
  { name: '梅州', value: 25 },
  { name: '文登', value: 25 },
  { name: '上海', value: 25 },
  { name: '攀枝花', value: 25 },
  { name: '威海', value: 25 },
  { name: '承德', value: 25 },
  { name: '厦门', value: 26 },
  { name: '汕尾', value: 26 },
  { name: '潮州', value: 26 },
  { name: '丹东', value: 27 },
  { name: '太仓', value: 27 },
  { name: '曲靖', value: 27 },
  { name: '烟台', value: 28 },
  { name: '福州', value: 29 },
  { name: '瓦房店', value: 30 },
  { name: '即墨', value: 30 },
  { name: '抚顺', value: 31 },
  { name: '玉溪', value: 31 },
  { name: '张家口', value: 31 },
  { name: '阳泉', value: 31 },
  { name: '莱州', value: 32 },
  { name: '湖州', value: 32 }
]
```

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

### Suggested Line Break and Indent Patterns

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

Illustrates recommended patterns for line breaks and indentation in various scenarios, including complex conditions, function calls, and chained method calls.

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

foo(
    aVeryVeryLongArgument,
    anotherVeryLongArgument,
    callback
);

baidu.format(
    dateFormatTemplate,
    year, month, date, hour, minute, second
);

$('#items')
    .find('.selected')
    .highlight()
    .end();

const result = thisIsAVeryVeryLongCondition
    ? resultA : resultB;

const res = condition
    ? thisIsAVeryVeryLongResult
    : resultB;
```

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

### Upgrade ECharts using npm

Source: https://echarts.apache.org/handbook/en/basics/release-note/v6-upgrade-guide

Use this command to upgrade your ECharts installation to version 6 via npm.

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

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

### Live Preview Code Embedding

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example of embedding JavaScript code for an ECharts option that enables live preview and editing.

```javascript
option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
```

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

### Initialize and Render a Simple Bar Chart

Source: https://echarts.apache.org/handbook/en/get-started

This example demonstrates how to initialize an ECharts instance, configure a simple bar chart with title, tooltip, legend, axes, and data, and then render it to the specified DOM element.

```javascript
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- Include the ECharts file you just downloaded -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- Prepare a DOM with a defined width and height for ECharts -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // Initialize the echarts instance based on the prepared dom
      var myChart = echarts.init(document.getElementById('main'));

      // Specify the configuration items and data for the chart
      var option = {
        title: {
          text: 'ECharts Getting Started Example'
        },
        tooltip: {},
        legend: {
          data: ['sales']
        },
        xAxis: {
          data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
        },
        yAxis: {},
        series: [
          {
            name: 'sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // Display the chart using the configuration and the data defined above.
      myChart.setOption(option);
    </script>
  </body>
</html>
```

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

### Registering Transform Component

Source: https://echarts.apache.org/handbook/en/concepts/data-transform

Example of how to import and register the Transform component along with DatasetComponent when using the minimal bundle of ECharts.

```javascript
import {
  DatasetComponent,
  TransformComponent
} from 'echarts/components';

echarts.use([
  DatasetComponent,
  TransformComponent
]);
```

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

### Create Basic Line Chart

Source: https://echarts.apache.org/handbook/en/how-to/interaction/drag

Initializes a line series with data points. This serves as the foundation for implementing dragging functionality.

```javascript
var symbolSize = 20;
var data = [
  [15, 0],
  [-50, 10],
  [-56.5, 20],
  [-46.5, 30],
  [-22.1, 40]
];

myChart.setOption({
  xAxis: {
    min: -100,
    max: 80,
    type: 'value',
    axisLine: { onZero: false }
  },
  yAxis: {
    min: -30,
    max: 60,
    type: 'value',
    axisLine: { onZero: false }
  },
  series: [
    {
      id: 'a',
      type: 'line',
      smooth: true,
      // Set a big symbolSize for dragging convenience.
      symbolSize: symbolSize,
      data: data
    }
  ]
});
```

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

### Basic Filter Transform Example

Source: https://echarts.apache.org/handbook/en/concepts/data-transform

Filters dataset to include only records where the 'Year' is 2011. This is a fundamental use case for the filter transform.

```javascript
option = {
  dataset: [
    {
      source: [
        ['Product', 'Sales', 'Price', 'Year'],
        ['Cake', 123, 32, 2011],
        ['Latte', 231, 14, 2011],
        ['Tofu', 235, 5, 2011],
        ['Milk Tee', 341, 25, 2011],
        ['Porridge', 122, 29, 2011],
        ['Cake', 143, 30, 2012],
        ['Latte', 201, 19, 2012],
        ['Tofu', 255, 7, 2012],
        ['Milk Tee', 241, 27, 2012],
        ['Porridge', 102, 34, 2012],
        ['Cake', 153, 28, 2013],
        ['Latte', 181, 21, 2013],
        ['Tofu', 395, 4, 2013],
        ['Milk Tee', 281, 31, 2013],
        ['Porridge', 92, 39, 2013],
        ['Cake', 223, 29, 2014],
        ['Latte', 211, 17, 2014],
        ['Tofu', 345, 3, 2014],
        ['Milk Tee', 211, 35, 2014],
        ['Porridge', 72, 24, 2014]
      ]
    },
    {
      transform: {
        type: 'filter',
        config: { dimension: 'Year', '=': 2011 }
        // The config is the "condition" of this filter.
        // This transform traverse the source data and
        // and retrieve all the items that the "Year"
        // is `2011`.
      }
    }
  ],
  series: {
    type: 'pie',
    datasetIndex: 1
  }
};  
```

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

### Basic Pie Chart with Data

Source: https://echarts.apache.org/examples/en/editor.html?c=pie-pattern

A fundamental example of a pie chart displaying data. Ensure your data is in the correct format for ECharts.

```javascript
const option = {
    series: [
        {
            type: 'pie',
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ]
        }
    ]
};
```