### Install and Configure Blazor.ECharts

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

Steps to install the Blazor.ECharts NuGet package, add necessary using statements, and include ECharts and component JavaScript files in your Blazor project. It also covers service registration.

```csharp
// 1. 通过 NuGet 安装包
dotnet add package Blazor.ECharts

// 2. 在 _Imports.razor 中添加引用
@using Blazor.ECharts.Components

// 3. 在 wwwroot/index.html 的 Head 中引入 ECharts JS
// <script src="https://lib.baomitu.com/echarts/5.6.0/echarts.min.js"></script>

// 4. 在 wwwroot/index.html 的 Body 中引入组件 JS
// <script type="module" src="_content/Blazor.ECharts/core.js"></script>

// 5. 在 Program.cs 中注册服务
builder.Services.AddECharts();
```

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

### Include ECharts JavaScript Library

Source: https://github.com/lishewen/blazor.echarts/blob/master/README.md

To use Blazor.ECharts, you need to include the ECharts JavaScript library in your `wwwroot/index.html` file. This example shows how to include the core ECharts library from a CDN.

```html
<script src="https://lib.baomitu.com/echarts/5.6.0/echarts.min.js"></script>
```

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

### Implement Timeline Animation with ECharts in Blazor

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

This example demonstrates creating a timeline component in Blazor using ECharts, allowing data visualization to change over time. It utilizes BaseOption and Options to manage different states of a bar chart. Dependencies include Blazor.ECharts.Options and Blazor.ECharts.Options.Enum.

```csharp
@page "/timeline-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using B = Blazor.ECharts.Options.Series.Bar

<EBar Option="@option" Class="chart-fill"></EBar>

@code {
    private EChartsOption<B.Bar> option;

    protected override void OnInitialized()
    {
        option = new()
        {
            BaseOption = new()
            {
                Timeline = new()
                {
                    Data = new() { "2022", "2023", "2024" }
                },
                XAxis = new()
                {
                    new() 
                    {
                        Type = AxisType.Category,
                        Data = new[] { "产品A", "产品B", "产品C" }
                    }
                },
                YAxis = new() { new() { Type = AxisType.Value } },
                Series = new() { new B.Bar() }
            },
            Options = new()
            {
                new()
                {
                    Title = new() { Text = "2022年销量" },
                    Series = new() { new SeriesBase(null) { Data = new[] { 300, 500, 450 } } }
                },
                new()
                {
                    Title = new() { Text = "2023年销量" },
                    Series = new() { new SeriesBase(null) { Data = new[] { 500, 600, 800 } } }
                },
                new()
                {
                    Title = new() { Text = "2024年销量" },
                    Series = new() { new SeriesBase(null) { Data = new[] { 650, 700, 950 } } }
                }
            }
        };
    }
}
```

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

### Create Candlestick Chart with ECandlestick in Blazor

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

This example demonstrates how to use the ECandlestick component in Blazor to render candlestick charts, commonly used for financial data like stock prices. It includes configuration for tooltips, axes, and series data. Requires Blazor.ECharts.Options and Blazor.ECharts.Options.Enum.

```csharp
@page "/candlestick-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using C = Blazor.ECharts.Options.Series.Candlestick

<ECandlestick Option="@option" Class="chart-fill"></ECandlestick>

@code {
    private EChartsOption<C.Candlestick> option;

    protected override void OnInitialized()
    {
        option = new()
        {
            Title = new() { Text = "股票K线图" },
            Tooltip = new() { Trigger = TooltipTrigger.Axis },
            XAxis = new()
            {
                new() 
                {
                    Data = new[] { "2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04" }
                }
            },
            YAxis = new() { new() },
            Series = new()
            {
                new C.Candlestick()
                {
                    // 数据格式: [开盘, 收盘, 最低, 最高]
                    Data = new[,] 
                    {
                        { 20, 34, 10, 38 },
                        { 40, 35, 30, 50 },
                        { 31, 38, 33, 44 },
                        { 38, 15, 5, 42 }
                    }
                }
            }
        };
    }
}
```

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

### Export Chart to Image using Blazor.ECharts

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

Demonstrates how to export a Blazor.ECharts chart as a Base64 encoded image using the GetDataURL method. This functionality is useful for saving or sharing chart visualizations. It requires the Blazor.ECharts library and a Blazor component setup.

```csharp
@page "/export-demo"
@using Blazor.ECharts.Options
@using L = Blazor.ECharts.Options.Series.Line

<ELine @ref="chart" Option="@option" Class="chart-fill"></ELine>
<button @onclick="ExportImage">导出图片</button>

@if (!string.IsNullOrEmpty(imageUrl))
{
    <img src="@imageUrl" alt="导出的图表" />
}

@code {
    private ELine chart;
    private EChartsOption<L.Line> option;
    private string imageUrl;

    protected override void OnInitialized()
    {
        option = new()
        {
            Title = new() { Text = "可导出的图表" },
            XAxis = new() { new() { Type = Blazor.ECharts.Options.Enum.AxisType.Category, Data = new[] { "A", "B", "C" } } },
            YAxis = new() { new() },
            Series = new() { new L.Line() { Data = new[] { 100, 200, 150 } } }
        };
    }

    private async Task ExportImage()
    {
        imageUrl = await chart.GetDataURL(new DataURLOption
        {
            Type = "png",
            BackgroundColor = "#fff"
        });
    }
}
```

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

### CSS for Chart Containers and Styles

Source: https://github.com/lishewen/blazor.echarts/blob/master/README.md

Blazor.ECharts does not provide default styles. You need to define CSS classes to control the width and height of your charts. These examples show common styles for chart containers and individual charts.

```css
.chart-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-right: 0px;
    padding-top: 0px;
    height: 95%;
    width: 95%;
}

.chart-normal {
    border-radius: 4px;
    height: 300px;
    width: 400px;
    margin-top: 20px;
}

.chart-fill {
    width: 100%;
    height: 720px;
    margin-top: 20px;
    margin-right: 20px;
}
```

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

### Create a Line Chart with ELine Component

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

Demonstrates how to use the ELine component to create a line chart in Blazor. It shows how to configure chart options such as title, tooltip, legend, axes, and series data. Supports smooth curves and area styling.

```razor
@page "/line-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using L = Blazor.ECharts.Options.Series.Line

<ELine Option="@option" Class="chart-normal" Theme="light"></ELine>

@code {
    private EChartsOption<L.Line> option;

    protected override void OnInitialized()
    {
        option = new()
        {
            Title = new() { Text = "一周销售趋势" },
            Tooltip = new() { Trigger = TooltipTrigger.Axis },
            Legend = new() { Data = new[] { "销量", "利润" } },
            XAxis = new()
            {
                new()
                {
                    Type = AxisType.Category,
                    Data = new[] { "周一", "周二", "周三", "周四", "周五", "周六", "周日" }
                }
            },
            YAxis = new()
            {
                new() { Type = AxisType.Value }
            },
            Series = new()
            {
                new L.Line()
                {
                    Name = "销量",
                    Type = "line",
                    Data = new[] { 820, 932, 901, 934, 1290, 1330, 1320 },
                    Smooth = true,  // 平滑曲线
                    AreaStyle = new AreaStyle()  // 区域填充
                },
                new L.Line()
                {
                    Name = "利润",
                    Type = "line",
                    Data = new[] { 220, 332, 301, 334, 590, 630, 620 }
                }
            }
        };
    }
}
```

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

### Display Loading Animation in Blazor.ECharts

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

Illustrates how to display a loading animation while data is being fetched or processed in Blazor.ECharts. The `ShowLoading` method is called before data loading, and `HideLoading` is called after the chart is updated with `SetupOptionAsync`.

```csharp
@page "/loading-demo"
@using Blazor.ECharts.Options
@using L = Blazor.ECharts.Options.Series.Line

<ELine @ref="chart" Option="@option" Class="chart-fill"></ELine>

@code {
    private ELine chart;
    private EChartsOption<L.Line> option;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 显示加载动画
            chart.ShowLoading(new LoadingOption
            {
                Text = "数据加载中...",
                Color = "#5470c6"
            });

            // 模拟数据加载
            await Task.Delay(2000);

            // 设置数据
            option = new()
            {
                XAxis = new() { new() { Type = Blazor.ECharts.Options.Enum.AxisType.Category, Data = new[] { "A", "B", "C" } } },
                YAxis = new() { new() },
                Series = new() { new L.Line() { Data = new[] { 100, 200, 150 } } }
            };

            await chart.SetupOptionAsync(option);

            // 隐藏加载动画
            chart.HideLoading();
        }
    }
}
```

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

### Register Blazor.ECharts Services

Source: https://github.com/lishewen/blazor.echarts/blob/master/README.md

In your `Program.cs` file, you need to register the Blazor.ECharts services using `builder.Services.AddECharts();`. This makes the ECharts components available in your Blazor application.

```csharp
builder.Services.AddECharts();
```

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

### CSS Styles for Blazor.ECharts Components

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

Provides recommended CSS configurations for Blazor.ECharts components to control their dimensions and appearance. These styles ensure proper layout and responsiveness for charts within a Blazor application. The styles include general container, standard, and full-width chart configurations.

```css
/* 图表容器样式 */
.chart-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 20px;
    height: 95%;
    width: 95%;
}

/* 标准尺寸图表 */
.chart-normal {
    border-radius: 4px;
    height: 300px;
    width: 400px;
    margin-top: 20px;
}

/* 全宽图表 */
.chart-fill {
    width: 100%;
    height: 720px;
    margin-top: 20px;
}
```

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

### Configure JavaScript Functions with JFunc in Blazor.ECharts

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

Demonstrates how to use the JFunc object to configure JavaScript functions within Blazor.ECharts options. This is useful for scenarios where JSON serialization would otherwise strip function definitions, such as setting tooltip positions.

```csharp
@page "/jfunc-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using L = Blazor.ECharts.Options.Series.Line

<ELine Option="@option" Class="chart-fill"></ELine>

@code {
    private EChartsOption<L.Line> option;

    protected override void OnInitialized()
    {
        option = new()
        {
            Title = new() { Text = "自定义格式化示例" },
            Tooltip = new()
            {
                Trigger = TooltipTrigger.Axis,
                // 使用 JFunc 定义 JavaScript 函数
                Position = new JFunc()
                {
                    RAW = """
                    function (pt) {
                        return [pt[0], '10%'];
                    }
                    """
                }
            },
            XAxis = new()
            {
                new()
                {
                    Type = AxisType.Category,
                    Data = new[] { "Mon", "Tue", "Wed", "Thu", "Fri" }
                }
            },
            YAxis = new() { new() { Type = AxisType.Value } },
            Series = new()
            {
                new L.Line()
                {
                    Data = new[] { 150, 230, 224, 218, 135 }
                }
            }
        };
    }
}
```

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

### Create a Bar Chart with EBar Component

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

Illustrates the usage of the EBar component for creating bar charts in Blazor. It covers configuration for tooltips, axes, series data, and includes features like toolbox (save image, restore) and event callbacks for click events.

```razor
@page "/bar-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using B = Blazor.ECharts.Options.Series.Bar

<EBar Option="@option" Class="chart-fill"
      EventTypes="@eventTypes"
      OnEventCallback="OnChartClick">
</EBar>

@code {
    private EChartsOption<B.Bar> option;
    private List<EventType> eventTypes = new() { EventType.click };

    protected override void OnInitialized()
    {
        option = new()
        {
            Color = new[] { "#5470c6", "#91cc75" },
            Tooltip = new() {
                Trigger = TooltipTrigger.Axis,
                Formatter = "{b}: {c}°C"
            },
            Grid = new()
            {
                new() { Left = "3%", Right = "4%", Bottom = "3%", ContainLabel = true }
            },
            XAxis = new()
            {
                new()
                {
                    Type = AxisType.Category,
                    Data = new[] { "北京", "上海", "广州", "深圳", "杭州" }
                }
            },
            YAxis = new()
            {
                new()
                {
                    Type = AxisType.Value,
                    AxisLabel = new AxisLabel() { Formatter = "{value}°C" }
                }
            },
            Series = new()
            {
                new B.Bar()
                {
                    Name = "温度",
                    Data = new[] { 25, 28, 30, 32, 27 },
                    BarCategoryGap = 25
                }
            },
            Toolbox = new()
            {
                Feature = new()
                {
                    SaveAsImage = new(),
                    Restore = new()
                }
            }
        };
    }

    private void OnChartClick(EchartsEventArgs args)
    {
        Console.WriteLine($"点击了: {args.Name}, 值: {args.Value}");
    }
}
```

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

### Dynamically Update Chart Data and Theme in Blazor.ECharts

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

Shows how to dynamically update chart data and change the theme of an ECharts instance in Blazor. This is achieved by obtaining a reference to the ELine component and calling its `SetupOptionAsync` method with new data or by updating the `Theme` property and calling `StateHasChanged`.

```csharp
@page "/dynamic-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using L = Blazor.ECharts.Options.Series.Line

<button @onclick="UpdateData">更新数据</button>
<button @onclick="ChangeTheme">切换主题</button>

<ELine @ref="chart" Option="@option" Class="chart-fill" Theme="@theme"></ELine>

@code {
    private ELine chart;
    private EChartsOption<L.Line> option;
    private string theme = "light";
    private Random random = new();

    protected override void OnInitialized()
    {
        option = new()
        {
            Title = new() { Text = "实时数据" },
            XAxis = new()
            {
                new()
                {
                    Type = AxisType.Category,
                    Data = new[] { "A", "B", "C", "D", "E" }
                }
            },
            YAxis = new() { new() { Type = AxisType.Value } },
            Series = new()
            {
                new L.Line()
                {
                    Data = new[] { 10, 20, 30, 40, 50 }
                }
            }
        };
    }

    private async Task UpdateData()
    {
        // 生成新的随机数据
        option.Series = new()
        {
            new L.Line()
            {
                Data = Enumerable.Range(0, 5).Select(_ => random.Next(10, 100)).ToArray()
            }
        };

        // 调用 SetupOptionAsync 更新图表
        await chart.SetupOptionAsync(option);
    }

    private void ChangeTheme()
    {
        theme = theme == "light" ? "dark" : "light";
        StateHasChanged();
    }
}
```

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

### Create a Gauge Chart with EGauge in Blazor

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

This C# code snippet demonstrates how to create a gauge chart using the EGauge component in Blazor. It configures tooltips, toolbox features, and series data to display a single metric like completion rate. Dependencies include Blazor.ECharts.Options and Blazor.ECharts.Options.Enum.

```csharp
@page "/gauge-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using G = Blazor.ECharts.Options.Series.Gauge

<EGauge Option="@option" Class="chart-fill"></EGauge>

@code {
    private EChartsOption<G.Gauge> option;

    protected override void OnInitialized()
    {
        option = new()
        {
            Tooltip = new()
            {
                Formatter = "{a} <br/>{b} : {c}%"
            },
            Toolbox = new()
            {
                Feature = new()
                {
                    Restore = new(),
                    SaveAsImage = new()
                }
            },
            Series = new()
            {
                new G.Gauge()
                {
                    Name = "业务指标",
                    Detail = new()
                    {
                        Formatter = "{value}%"
                    },
                    Data = new[] { new { Value = 75, Name = "完成率" } }
                }
            }
        };
    }
}
```

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

### Create a Funnel Chart with EFunnel in Blazor

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

This C# code snippet demonstrates how to create a funnel chart using the EFunnel component in Blazor. It is suitable for visualizing conversion rates in business processes. The configuration includes title, tooltip, legend, and series data with specific formatting and layout options. Dependencies include Blazor.ECharts.Options and Blazor.ECharts.Options.Enum.

```csharp
@page "/funnel-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using F = Blazor.ECharts.Options.Series.Funnel

<EFunnel Option="@option" Class="chart-fill"></EFunnel>

@code {
    private EChartsOption<F.Funnel> option;

    protected override void OnInitialized()
    {
        option = new()
        {
            Title = new() { Text = "用户转化漏斗" },
            Tooltip = new()
            {
                Trigger = TooltipTrigger.Item,
                Formatter = "{a} <br/>{b} : {c}%"
            },
            Legend = new()
            {
                Data = new[] { "浏览", "点击", "注册", "加购", "付款" }
            },
            Series = new()
            {
                new F.Funnel()
                {
                    Name = "漏斗图",
                    Left = "10%",
                    Top = 60,
                    Bottom = 60,
                    Width = "80%",
                    Min = 0,
                    Max = 100,
                    Sort = SortType.Descending,
                    Gap = 2,
                    Label = new()
                    {
                        Show = true,
                        Position = LabelPosition.Inside
                    },
                    ItemStyle = new()
                    {
                        BorderColor = "#fff",
                        BorderWidth = 1
                    },
                    Data = new[]
                    {
                        new { Value = 100, Name = "浏览" },
                        new { Value = 80, Name = "点击" },
                        new { Value = 60, Name = "注册" },
                        new { Value = 40, Name = "加购" },
                        new { Value = 20, Name = "付款" }
                    }
                }
            }
        };
    }
}
```

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

### Include Map and BMap Extension JavaScript

Source: https://github.com/lishewen/blazor.echarts/blob/master/README.md

If your charts require map-related functionality, you need to include additional JavaScript files for map services and the ECharts BMap extension. Replace '[Your Key Here]' with your actual Baidu Map API key.

```html
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=[Your Key Here]"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
```

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

### Create Tree Chart with ETree in Blazor

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

This snippet shows how to create a tree chart using the ETree component in Blazor. It defines hierarchical data and configures chart options for displaying organizational structures. Dependencies include Blazor.ECharts.Options and Blazor.ECharts.Options.Enum.

```csharp
@page "/tree-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using Blazor.ECharts.Options.Series
@using T = Blazor.ECharts.Options.Series.Tree

<ETree Option="@option" Class="chart-fill"></ETree>

@code {
    private EChartsOption<T.Tree> option;

    protected override void OnInitialized()
    {
        var data = new List<NoteDataItem>
        {
            new()
            {
                Name = "总公司",
                Children = new()
                {
                    new()
                    {
                        Name = "研发部",
                        Children = new()
                        {
                            new() { Name = "前端组", Value = 10 },
                            new() { Name = "后端组", Value = 15 }
                        }
                    },
                    new()
                    {
                        Name = "市场部",
                        Children = new()
                        {
                            new() { Name = "销售组", Value = 20 },
                            new() { Name = "运营组", Value = 8 }
                        }
                    }
                }
            }
        };

        option = new()
        {
            Tooltip = new() { Trigger = TooltipTrigger.Item },
            Series = new() 
            {
                new T.Tree()
                {
                    Name = "组织架构",
                    Data = data,
                    Top = "5%",
                    Left = "10%",
                    Bottom = "5%",
                    Right = "20%",
                    SymbolSize = 20,
                    Label = new() { Position = LabelPosition.Top },
                    Leaves = new() 
                    {
                        Label = new() { Position = LabelPosition.Right }
                    }
                }
            }
        };
    }
}
```

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

### Create Sankey Diagram with ESankey Component in Blazor

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

This C# code snippet demonstrates how to create a Sankey diagram using the ESankey component in Blazor. It defines the data for nodes and links to visualize flow relationships. Ensure the Blazor.ECharts library is included in your project.

```csharp
@page "/sankey-demo"
@using Blazor.ECharts.Options
@using S = Blazor.ECharts.Options.Series.Sankey

<ESankey Option="@option" Class="chart-fill"></ESankey>

@code {
    private EChartsOption<S.Sankey> option;

    protected override void OnInitialized()
    {
        option = new()
        {
            Title = new() { Text = "流量来源分析" },
            Series = new() 
            {
                new S.Sankey()
                {
                    Data = new[]
                    {
                        new { Name = "搜索引擎" },
                        new { Name = "社交媒体" },
                        new { Name = "直接访问" },
                        new { Name = "首页" },
                        new { Name = "产品页" },
                        new { Name = "购买" }
                    },
                    Links = new()
                    {
                        new() { Source = "搜索引擎", Target = "首页", Value = 100 },
                        new() { Source = "社交媒体", Target = "首页", Value = 60 },
                        new() { Source = "直接访问", Target = "首页", Value = 40 },
                        new() { Source = "首页", Target = "产品页", Value = 150 },
                        new() { Source = "产品页", Target = "购买", Value = 80 }
                    }
                }
            }
        };
    }
}
```

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

### Include Blazor.ECharts Core JavaScript

Source: https://github.com/lishewen/blazor.echarts/blob/master/README.md

This snippet shows how to include the core JavaScript file for the Blazor.ECharts component in the `Body` section of your `wwwroot/index.html` file.

```html
<script type="module" src="_content/Blazor.ECharts/core.js"></script>
```

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

### Create a Radar Chart with ERadar Component in Blazor

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

This C# code snippet illustrates how to configure and render a radar chart using the ERadar component in Blazor. It defines chart title, tooltip, legend, radar indicators with maximum values, and series data for comparing different products. Dependencies include Blazor.ECharts.Options and Blazor.ECharts.Options.Series.

```csharp
@page "/radar-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Series
@using R = Blazor.ECharts.Options.Series.Radar

<ERadar Option="@option" Class="chart-fill"></ERadar>

@code {
    private EChartsOption<R.Radar> option;

    protected override void OnInitialized()
    {
        option = new()
        {
            Title = new() { Text = "产品能力对比" },
            Tooltip = new(),
            Legend = new() { Data = new[] { "产品A", "产品B" } },
            Radar = new() {
                new() {
                    Name = new() {
                        TextStyle = new() {
                            Color = "#fff",
                            BackgroundColor = "#999",
                            BorderRadius = 3,
                            Padding = new[] { 3, 5 }
                        }
                    },
                    Indicator = new() {
                        new() { Name = "性能", Max = 100 },
                        new() { Name = "稳定性", Max = 100 },
                        new() { Name = "易用性", Max = 100 },
                        new() { Name = "扩展性", Max = 100 },
                        new() { Name = "安全性", Max = 100 },
                        new() { Name = "性价比", Max = 100 }
                    }
                }
            },
            Series = new() {
                new R.Radar() {
                    Name = "产品对比",
                    Data = new[] {
                        new SeriesData() {
                            Name = "产品A",
                            Value = new[] { 85, 90, 75, 80, 95, 70 }
                        },
                        new SeriesData() {
                            Name = "产品B",
                            Value = new[] { 70, 80, 90, 85, 75, 85 }
                        }
                    }
                }
            }
        };
    }
}
```

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

### Include echarts-wordcloud.min.js in index.html

Source: https://github.com/lishewen/blazor.echarts/blob/master/Blazor.ECharts.WordCloud/README.md

This snippet shows how to include the necessary JavaScript file for the word cloud component in the head section of your Blazor application's index.html file. This is a prerequisite for using the Blazor.ECharts.WordCloud component.

```html
<script src="_content/Blazor.ECharts.WordCloud/echarts-wordcloud.min.js"></script>
```

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

### Create Graph Visualization with EGraph Component in Blazor

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

This C# code snippet illustrates how to generate a graph visualization using the EGraph component in Blazor. It configures node categories, data points, and links to represent relationships, suitable for social networks or organizational charts. The Blazor.ECharts library is a prerequisite.

```csharp
@page "/graph-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using G = Blazor.ECharts.Options.Series.Graph

<EGraph Option="@option" Class="chart-fill"></EGraph>

@code {
    private EChartsOption<G.Graph> option;

    protected override void OnInitialized()
    {
        option = new()
        {
            Title = new() { Text = "社交关系图", Left = "center" },
            Legend = new()
            {
                Show = true,
                Data = new[] { "朋友", "同事" }
            },
            Series = new()
            {
                new G.Graph()
                {
                    Layout = Layout.Force,
                    SymbolSize = 50,
                    FocusNodeAdjacency = true,
                    Categories = new()
                    {
                        new() { Name = "朋友", ItemStyle = new() { Color = "#5470c6" } },
                        new() { Name = "同事", ItemStyle = new() { Color = "#91cc75" } }
                    },
                    Label = new() { Show = true },
                    Force = new() { Repulsion = 1000 },
                    EdgeLabel = new()
                    {
                        Show = true,
                        Formatter = "{c}"
                    },
                    Data = new[]
                    {
                        new { Name = "张三", Category = 0, Draggable = true },
                        new { Name = "李四", Category = 0, Draggable = true },
                        new { Name = "王五", Category = 1, Draggable = true },
                        new { Name = "赵六", Category = 1, Draggable = true }
                    },
                    Links = new()
                    {
                        new() { Source = 0, Target = 1, Value = "好友" },
                        new() { Source = 0, Target = 2, Value = "同事" },
                        new() { Source = 2, Target = 3, Value = "同事" }
                    },
                    LineStyle = new() { Opacity = 0.9, Width = 2, Curveness = 0 }
                }
            }
        };
    }
}
```

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

### Create a Scatter Plot with EScatter in Blazor

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

This C# code snippet illustrates how to generate a scatter plot using the EScatter component in Blazor. It sets up axes, legends, and series data to visualize relationships between variables, such as height and weight. Dependencies include Blazor.ECharts.Options and Blazor.ECharts.Options.Enum.

```csharp
@page "/scatter-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using S = Blazor.ECharts.Options.Series.Scatter

<EScatter Option="@option" Class="chart-fill"></EScatter>

@code {
    private EChartsOption<S.Scatter> option;

    protected override void OnInitialized()
    {
        option = new()
        {
            Title = new() { Text = "身高体重分布" },
            XAxis = new() { new() { Name = "身高(cm)" } },
            YAxis = new() { new() { Name = "体重(kg)" } },
            Legend = new() { Data = new[] { "男性", "女性" } },
            Series = new()
            {
                new S.Scatter()
                {
                    Name = "男性",
                    Data = new[]
                    {
                        new[] { 170.0, 65.0 },
                        new[] { 175.0, 70.0 },
                        new[] { 180.0, 75.0 },
                        new[] { 168.0, 60.0 },
                        new[] { 182.0, 80.0 }
                    }
                },
                new S.Scatter()
                {
                    Name = "女性",
                    Data = new[]
                    {
                        new[] { 158.0, 48.0 },
                        new[] { 162.0, 52.0 },
                        new[] { 165.0, 55.0 },
                        new[] { 160.0, 50.0 },
                        new[] { 168.0, 58.0 }
                    }
                }
            }
        };
    }
}
```

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

### Create a Donut Chart with EPie Component in Blazor

Source: https://context7.com/lishewen/blazor.echarts/llms.txt

This C# code snippet demonstrates how to configure and display a donut chart using the EPie component in Blazor. It sets up title, tooltip, legend, and series data, with the 'Radius' property set to '["40%", "70%"]' to create the donut effect. Dependencies include Blazor.ECharts.Options and Blazor.ECharts.Options.Enum.

```csharp
@page "/pie-demo"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using P = Blazor.ECharts.Options.Series.Pie

<EPie Option="@option" Class="chart-normal"></EPie>

@code {
    private EChartsOption<P.Pie> option;

    protected override void OnInitialized()
    {
        option = new()
        {
            Title = new() {
                Text = "访问来源分析",
                Subtext = "2024年数据",
                Left = "center"
            },
            Tooltip = new() {
                Trigger = TooltipTrigger.Item,
                Formatter = "{a} <br/>{b}: {c} ({d}%)"
            },
            Legend = new() {
                Orient = Orient.Vertical,
                Left = "left",
                Data = new[] { "直接访问", "搜索引擎", "邮件营销", "联盟广告", "视频广告" }
            },
            Series = new() {
                new P.Pie() {
                    Name = "访问来源",
                    Radius = new[] { "40%", "70%" },  // 环形图
                    Center = new[] { "50%", "60%" },
                    AvoidLabelOverlap = false,
                    Label = new() {
                        Show = false,
                        Position = LabelPosition.Center,
                        Emphasis = new() {
                            Show = true,
                            TextStyle = new() { FontSize = 24, FontWeight = FontWeight.Bold }
                        }
                    },
                    LabelLine = new() { Show = false },
                    Data = new[] {
                        new { name = "直接访问", value = 335 },
                        new { name = "搜索引擎", value = 1548 },
                        new { name = "邮件营销", value = 310 },
                        new { name = "联盟广告", value = 234 },
                        new { name = "视频广告", value = 135 }
                    },
                    Emphasis = new() {
                        ItemStyle = new() {
                            ShadowBlur = 10,
                            ShadowOffsetX = 0,
                            ShadowColor = "rgba(0, 0, 0, 0.5)"
                        }
                    }
                }
            }
        };
    }
}
```

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

### Handling JavaScript Functions with JFuncConverter

Source: https://github.com/lishewen/blazor.echarts/blob/master/README.md

Since JavaScript functions are not standard JSON data types and can be lost during conversion, Blazor.ECharts uses `JFuncConverter` to handle them. You can pass a `JFunc` object with the raw JavaScript function string to preserve it.

```csharp
Position = new JFunc()
{
    RAW = @"function (pt) {
        return [pt[0], '10%'];
    }"
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.