新增K线图示例

NewLife.CubeNC/Areas/Admin/Controllers/UserStatController.cs

@@ -62,13 +62,17 @@ public class UserStatController : ReadOnlyEntityController<UserStat>
 
             var chart2 = new ECharts();
             chart2.SetX(list2, "Date", e => e.Date.ToString("MM-dd"));
-            //chart2.SetY("用户数", "value");
-
             chart2.AddBoxplot(
                 list2.Select(e => new BoxplotItem(e.News, e.Actives, e.NewsT7, e.ActivesT7, e.ActivesT30)),
                 ["新用户", "今日活跃", "7天注册", "7天活跃", "30天活跃"]);
 
-            ViewBag.Charts2 = new[] { chart2 };
+            var chart3 = new ECharts();
+            chart3.SetX(list2, "Date", e => e.Date.ToString("MM-dd"));
+            chart3.AddCandlestick(
+                list2.Select(e => new CandlestickItem(e.News, e.Actives, e.NewsT7, e.ActivesT7)),
+                ["新用户", "今日活跃", "7天注册", "7天活跃"]);
+
+            ViewBag.Charts2 = new[] { chart2, chart3 };
         }
 
         return list;

NewLife.CubeNC/Charts/ECharts.cs

@@ -8,6 +8,7 @@ using NewLife.Data;
 using NewLife.Reflection;
 using NewLife.Security;
 using NewLife.Serialization;
+using NewLife.Web;
 using XCode.Configuration;
 
 namespace NewLife.Cube.Charts;
@@ -740,6 +741,10 @@ public class ECharts : IExtend
         box.Data = items.Select(e => new[] { e.Min, e.Q1, e.Median, e.Q3, e.Max }).ToArray();
         Add(box);
 
+        // 绘制平均线和最大最小值
+        box.SetMarkLine(true);
+        box.SetMarkPoint(true, true);
+
         var script = """
                 function boxplotFormatter(params) {
                     return `${params.name}<br/>
@@ -767,6 +772,46 @@ public class ECharts : IExtend
 
         return box;
     }
+
+    /// <summary>添加K线图</summary>
+    /// <param name="items">数据集</param>
+    /// <param name="names">四个名字。不一定是最小值最大值</param>
+    /// <returns></returns>
+    public Series AddCandlestick(IEnumerable<CandlestickItem> items, String[] names = null)
+    {
+        var box = Create("candlestick", SeriesTypes.Candlestick) as SeriesCandlestick;
+        box.Data = items.Select(e => new[] { e.Open, e.Close, e.Lowest, e.Highest }).ToArray();
+        Add(box);
+
+        // 绘制平均线和最大最小值
+        box.SetMarkLine(true);
+        box.SetMarkPoint(true, true);
+
+        var script = """
+                function candlestickFormatter(params) {
+                    return `${params.name}<br/>
+                    开盘值: ${params.value[1]}<br/>
+                    收盘值: ${params.value[2]}<br/>
+                    最低值: ${params.value[3]}<br/>
+                    最高值: ${params.value[4]}`;
+                }
+                """;
+        if (names != null && names.Length >= 4)
+        {
+            // 名称为null时表示不替换
+            if (names[0] != null) script = script.Replace("开盘值", names[0]);
+            if (names[1] != null) script = script.Replace("收盘值", names[1]);
+            if (names[2] != null) script = script.Replace("最低值", names[2]);
+            if (names[3] != null) script = script.Replace("最高值", names[3]);
+        }
+
+        SetTooltip("item", script);
+
+        // 添加Y轴
+        if (YAxis == null || YAxis.Count == 0) SetY("值", "value");
+
+        return box;
+    }
     #endregion
 
     #region 构建生成

NewLife.CubeNC/Charts/Models/CandlestickItem.cs

@@ -0,0 +1,8 @@
+namespace NewLife.Cube.Charts.Models;
+
+/// <summary>K线图元素</summary>
+/// <param name="Open">开盘值</param>
+/// <param name="Close">收盘值</param>
+/// <param name="Lowest">最低值</param>
+/// <param name="Highest">最高值</param>
+public record CandlestickItem(Double Open, Double Close, Double Lowest, Double Highest);