Vizor.ECharts 0.8.8

Vizor.ECharts

Blazor wrapper for Apache ECharts.

• Supports .NET >= 6.0
• Ships with echarts 5.4.3
• Apache-2.0 Licensed (same as echarts)
• Lots of examples in the Vizor.ECharts.Demo project
• Refer to the official echarts cheat sheet for a quick introduction

Supported Chart Types:

• Line
• Bar
• Pie
• Scatter
• Geo/Map
• Candlestick
• Radar
• Boxplot
• Heatmap
• Graph
• Tree
• Treemap
• Sunburst
• Parallel
• Sankey
• Funnel
• Gauge
• Pictorial Bar
• Theme River
• Custom

The project currently is not yet production ready, it will be around September/October. Small API changes will occur frequently until version >= 1.0.0 .

How to include

1. Add a package reference to Vizor.ECharts
2. Add vizor-echarts-bundle-min.js OR vizor-echarts-min.js to your _Host.cshtml or _Layout.cshtml file
   • vizor-echarts-bundle-min.js includes apache echarts and echarts-stat.
   • vizor-echarts-min.js ONLY contains the binding code and requires you to manually include apache-echarts and plugins.

<script src="_content/Vizor.ECharts/js/vizor-echarts-bundle-min.js"></script>

See the example from the demo application.

How to use

The bindings are nearly identical to the javascript/typescript version. This makes it very easy to translate the examples from the official documentation to C#.

For example: a simple pie chart.

Add a using statement:

@using Vizor.ECharts;

Chart component in your .razor file:

<Vizor.ECharts.EChart Options="@options" Width="auto" Height="400px" />

Chart options in the code section of your razor file:

private ChartOptions options = new()
{
	Title = new()
	{
		Text = "Referer of a Website",
		Subtext = "Fake Data",
		Left = "center"
	},
	Tooltip = new()
	{
		Trigger = ECharts.TooltipTrigger.Item
	},
	Legend = new()
	{
		Orient = Orient.Vertical,
		Left = "left"
	},
	Series = new()
	{
		new PieSeries()
		{
			Name = "Access From",
			Radius = new CircleRadius("50%"),
			Data = new List<PieSeriesData>()
			{
				new() { Value = 1048, Name = "Search Engine" },
				new() { Value = 735, Name = "Direct" },
				new() { Value = 580, Name = "Email" },
				new() { Value = 484, Name = "Union Ads" },
				new() { Value = 300, Name = "Video Ads" },
			},
			Emphasis = new()
			{
				ItemStyle = new()
				{
					ShadowBlur = 10,
					ShadowOffsetX = 0,
					ShadowColor = Color.FromRGBA(0, 0, 0, 0.5)
				}
			}
		}
	}
};

See the full C# code.

Data loading

Most examples that you will find online have very basic datasets. However, in real life, data sets are often huge and come from various different sources.

Vizor.ECharts allows you to define data in 3 different ways:

1. Inside the ChartOptions, as demonstrated in most examples.
2. Using async data loaders in C#, allowing you to fetch data directly from the database.
3. Using external data sources (e.g.: REST API) fetched by the browser.

Async data loading

Specify the DataLoader parameter, this can be a sync or async function.

<Vizor.ECharts.EChart Options="@options" DataLoader="@LoadChartData" Width="800px" Height="400px" />

Typically in the data loader function you update the Series property. However, you can update any chart option.

private async Task LoadChartData()
{
	options.Series = ... ;
}

See full example.

External Data Sources (fetch)

Any Data property of type object? accepts a ExternalDataSource allowing you to specify the external data source.

Data = new ExternalDataSource("https://example.com/api/data/sunburst_simple.json")

See full example.

It is also possible to provide a simple path expression to retrieve only a part of the external data:

Data = new ExternalDataSource("https://example.com/api/data/sankey_simple.json") { Path = "nodes" }

Or you can execute a function after load to manipulate the loaded data:

private static ExternalDataSource graph = new ExternalDataSource("/data/les-miserables.json", ExternalDataFetchAs.Json)
{
	AfterLoad = new JavascriptFunction(@"function (graph) {
		graph.nodes.forEach(function (node) { node.symbolSize = 5; });
		return graph;
	}")
};

See Javascript functions for more details.

Additional credentials, headers, policies, ... can also be supplied. See ExternalDataSource and FetchOptions for more details.

External Data Source References

In case you need to re-use an external data source multiple times, you can use an ExternalDataSourceRef. An ExternalDataSourceRef also supports a path expression to select a child object.

private static ExternalDataSource graph = ... ;
...
{
	Data = new ExternalDataSourceRef(graph, "nodes"),
	Links = new ExternalDataSourceRef(graph, "links"),
	Categories = new ExternalDataSourceRef(graph, "categories")
}

See example.

Datasets

ECharts supports dataset transformations. This allows for simplified data retrieval, without the need to have a separate dataset for different charts or chart types.

See example # and example 2 .

See also the echarts dataset documentation and tutorial .

Javascript functions

ECharts sometimes allows you to assign custom functions instead of values. This can be achieved with the JavascriptFunction class. The class accepts a string literal containing the Javascript function. The function is evaluated inside the brower. Be carefull: syntax errors in the JS function will break the chart serialization.

For example:

Formatter = new JavascriptFunction("function (param) { return param.name + ' (' + param.percent * 2 + '%)'; }")

See full example.

Updating charts

Chart options and/or data can be updated. For example: to show a never ending line chart, a temperature gauge, ... .

First store a reference to your chart.

<Vizor.ECharts.EChart @ref="chart" Options="@options" Width="800px" Height="400px" />
...
private Vizor.ECharts.EChart? chart;

Next modify the chart options. Modified options have full support for Javascript functions and external data sources.

private async Task UpdateChartAsync()
{
	if (chart == null)
		return;

	// modify chart options
	
	await chart.UpdateAsync();
}

See full example.

Filing Bugs / Future Development

See Issues for a list of open tasks/bugs.

Please provide a runnable sample using the ECharts Online Editor and a description of what is wrong with the C# mapping.