English | 简体中文

A blazor component based on Apache ECharts, which is mainly used in the form of hierarchical tags. For all attribute descriptions, please refer to the Apache ECharts official website api documentation, version 5.1.1

introduction：

1：nuget search TagEChartsBlazor install class library

2：Program.cs(WebAssembly) or Startup.cs(BlazorServer) inject services.AddECharts();

3：wwwroot/index.html(WebAssembly) or _Host.cshtml(BlazorServer) add

<script src="_content/TagEChartsBlazor/script/echarts.min.js"></script><br/>
<script src="_content/TagEChartsBlazor/script/common.js"></script>

4：_Imports.razor add @using TagEChartsBlazor.Components

5：The hierarchical structure and order of the tags match exactly with the echarts option object. For details, please refer to echarts official configuration items

6：All label attributes are automatically recognized in Visual Studio

7：Since some properties of echarts belong to mixed types (for example, it can be a string, an array or even a function), this part of the properties will be replaced with dynamic types in the component, and the corresponding C# type can be set according to the type in the specific echarts

The attribute description that comes with the top-level Apache ECharts tag：

Property	description
Style	Label style
ClassName	Class Name
AutoRender	Any changes to the chart's properties will automatically refresh the chart, which is closed by default
debugModel	After enabling, the browser console will output the option item of the chart
OnRenderComplete	OnAfterRender executed delegate
OnRenderBefore	Delegate before OnAfterRender execution
theme	Configure the theme of the current echarts chart
RefreshForce()	Instance method of forcibly refreshing the current echarts chart

Example 1: Standard usage, all tags support razor dynamic control, currently all formatter attributes need to set functions, you need to fill in the javascript string

<ECharts Style="width: 800px; height: 400px;">
    <Title text="Apache ECharts Getting started example"></Title>
    <Legend data="@(new[] { "Sales" })"></Legend>
    <Tooltip></Tooltip>
    <XAxis>
        @foreach (var item in new[] { "Shirt", "Sweater", "Chiffon Shirt", "Pants", "High Heels", "Socks" })
        {
            <Data value="@item">
                <TextStyle color="red"></TextStyle>
            </Data>
        }
    </XAxis>
    <YAxis>
        <AxisLabel formatter="(value, index) => {return value + ':';}"></AxisLabel>
    </YAxis>
    <Series name="Sales" type="bar" data="@(new[] { 5, 20, 36, 10, 10, 20 })">
    </Series>
</ECharts>

Example 2: The data attribute supports anonymous objects, and you can also use the Data tag to display the creation

<ECharts Style="width: 800px; height: 400px;">
    <Title text="Line chart stacking" />
    <Tooltip trigger="axis" />
    <Legend data="@(new object[] { "Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct Access", "Search Engine" })" />
    <Grid left="3%" right="4%" bottom="3%" containLabel="true" />
    <Toolbox>
        <Feature>
            <SaveAsImage></SaveAsImage>
        </Feature>
    </Toolbox>
    <XAxis type="category" boundaryGap="false" data="@(new object[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" })" />
    <YAxis type="value" />
    <Series name="Email marketing" type="line" stack="Total" data="@(new[] { 120, 132, 101, 134, 90, 230, 210 })" />
    <Series name="Affiliate advertising" type="line" stack="Total" data="@(new[] { 220, 182, 191, 234, 290, 330, 310 })" />
    <Series name="Video ad" type="line" stack="Total" data="@(new[] { 150, 232, 201, 154, 190, 330, 410 })" />
    <Series name="direct interview" type="line" stack="Total" data="@(new[] { 320, 332, 301, 334, 390, 330, 320 })" />
    <Series name="search engine" type="line" stack="Total" data="@(new[] { 820, 932, 901, 934, 1290, 1330, 1320 })" />
</ECharts>

Example 3: The top-level Apache ECharts tag supports mouse delegate events. Very few objects have no tags and need to be generated by classes. The colorStops gradient class in this example

<ECharts Style="width: 800px; height: 400px;"
         OnClick="@(new(async (param, chart) =>
                    {
                        int zoomSize = 6;
                        var sv = dataAxis[System.Math.Max(param.dataIndex.GetValueOrDefault(0) - (zoomSize / 2), 0)];
                        var ev = dataAxis[System.Math.Min(param.dataIndex.GetValueOrDefault(0) + (zoomSize / 2), data.Length - 1)];
                        await chart.DispatchActionAsync(new DataZoomDispatchAction(DataZoomDispatchType.dataZoom, startValue: sv, endValue: ev));
                    }))">
    <Title text="Feature example: gradient color shadow click to zoom" subtext="Feature Sample: Gradient Color, Shadow, Click Zoom"></Title>
    <XAxis data="dataAxis" z="10">
        <AxisLabel inside="true">
            <TextStyle color="#fff" />
        </AxisLabel>
        <AxisTick show="false" />
        <AxisLine show="false" />
    </XAxis>
    <YAxis>
        <AxisLabel>
            <TextStyle color="#999" />
        </AxisLabel>
        <AxisTick show="false" />
        <AxisLine show="false" />
    </YAxis>
    <DataZoom type="inside" />
    <Series type="bar" showBackground="true" data="data">
        <ItemStyle>
            <Color x="0" y="0" x2="0" y2="1" colorStops="@(new ColorStops[] { new ColorStops(0, "#83bff6"), new ColorStops(0.5f, "#188df0"), new ColorStops(1, "#188df0") })" />
        </ItemStyle>
        <Emphasis>
            <Color x="0" y="0" x2="0" y2="1" colorStops="@(new ColorStops[] { new ColorStops(0, "#2378f7"), new ColorStops(0.7f, "#2378f7"), new ColorStops(1, "#83bff6") })" />
        </Emphasis>
    </Series>
</ECharts>

Example 4: Demonstrate the use of themes and external resources. Because asynchronous loading may execute render twice, and echarts will cache the first load information by default. Here, you manually control the output of tags after external resources are loaded. EChartsHelper corresponds to the global class of echarts.

@inject EChartsHelper echartHelper
@inject HttpClient Http

@if (initSuccess)
{
    <ECharts Style="width: 800px; height: 400px;" theme="wyy"
             OnMouseOver="@(new(async (param, chart) =>
                            {
                                await chart.DispatchActionAsync(new DispatchAction(DispatchType.highlight, geoIndex: 0, name: param.name));

                            }, new { seriesIndex = 0 }))"
             OnMouseOut="@(new(async (param, chart) =>
                           {
                               await chart.DispatchActionAsync(new DispatchAction(DispatchType.downplay, geoIndex: 0, name: param.name));
                           }, new { seriesIndex = 0 }))">
        <Tooltip />
        <Geo left="10" right="50%" map="organ_diagram" selectedMode="true">
            <Emphasis focus="self">
                <ItemStyle color="null" />
                <Label position="bottom" distance="0" textBorderColor="#fff" textBorderWidth="2" />
            </Emphasis>
            <Blur />
            <Select>
                <ItemStyle color="#b50205" />
                <Label show="false" textBorderColor="#fff" textBorderWidth="2" />
            </Select>
        </Geo>
        <Grid left="60%" top="20%" bottom="20%" />
        <XAxis />
        <YAxis data="@(new object[] { "heart", "large-intestine", "small-intestine", "spleen", "kidney", "lung", "liver" })" />
        <Series type="bar" data="@(new[] { 121, 321, 141, 52, 198, 289, 139 })">
            <Emphasis focus="self" />
        </Series>
    </ECharts>
}
@code {
  private bool initSuccess;
  protected async override Task OnInitializedAsync()
  {
      string mapsvg = await Http.GetStringAsync("asset/Veins_Medical_Diagram_clip_art.svg");
      await echartHelper.RegisterMapAsync(new RegisterMapOption("organ_diagram", opt: new MapOpt(svg: mapsvg)));
      string json = await Http.GetStringAsync("json/chalk.json");
      await echartHelper.RegisterThemeAsync("wyy", json);
      initSuccess = true;
  }
}