@model GraphViewModel
@using NewLife.Serialization
@using Stardust.Data.Monitors
@using NewLife;
@using NewLife.Web;
@using XCode;
@using XCode.Configuration;
@using XCode.Membership;
@using NewLife.Cube;
@using System.Web;
@using Stardust.Web.Models;
@{
    Layout = null;

    var traceId = Model.TraceId;
    var title = Model.Title + "";
    if (title != "" && !title.Contains(" - "))
    {
        title += " - " + NewLife.Common.SysConfig.Current.DisplayName;
    }

    var set = NewLife.Cube.Setting.Current;

    var res = set.ResourceUrl;
    if (String.IsNullOrEmpty(res)) res = "/Content";
    res = res.TrimEnd('/');
}
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>@title</title>
    <link rel="stylesheet" href="@res/bootstrap/css/bootstrap.min.css">
</head>
<body style="height: 100%; margin: 0">
    @if (!traceId.IsNullOrEmpty())
    {
        await Html.RenderPartialAsync("_Nav", traceId);
    }
    <div id="container" style="height: 100%"></div>
    <script src="@res/js/jquery-3.6.0.min.js"></script>
    <script src="@res/echarts/echarts.min.js"></script>
    @{
        // 图表主题
        var name = set.EChartsTheme;
        if (name.EqualIgnoreCase("Default")) name = "";
        if (!name.IsNullOrEmpty())
        {
            <script src="@res/echarts/theme/@(name).js"></script>
        }
    }
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};

        var graph = @Html.Raw(Model.ToJson(true, true, true));

         var option = {
            tooltip: {},
            legend: [
              {
                data: graph.categories.map(function (a) {
                  return a.name;
                })
              }
            ],
            series: [
              {
                name: '@Model.Title',
                type: 'graph',
                layout: '@Model.Layout',
                data: graph.nodes,
                links: graph.links,
                categories: graph.categories,
                roam: true,
                label: {
                  show: true,
                  position: 'right',
                  formatter: '{b}'
                },
                labelLayout: {
                  hideOverlap: true,
                  moveOverlap: true,
                },
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                force: {
                    initLayout: 'circular',
                    repulsion: 300,
                    gravity: 0,
                    edgeLength: [50, 300],
                    layoutAnimation: true,
                    friction: 0.2,
                },
                lineStyle: {
                  color: 'target',
                  curveness: 0.3,
                  opacity: 0.8,
                  width: 3
                }
              }
            ]
          };
          myChart.setOption(option);

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

    </script>
</body>
</html>