[Blazor] 仪表盘

var highlight = '#03b7c9';

var demoData = [
    { name: '电压', value: 220, unit: 'V', pos: ['16.6%', '25%'], range: [0, 400] },
    { name: '电流', value: 32, unit: 'A', pos: ['49.8%', '25%'], range: [0, 60] },
    { name: '功率因数', value: 0.9, pos: ['83%', '25%'], range: [0.1, 1.0], splitNum: 9 },
    { name: '有功功率', value: 6.34, unit: 'kW', pos: ['16.6%', '75%'], range: [0, 50] },
    { name: '有功电能', value: 6.28, unit: 'kWh', pos: ['49.8%', '75%'], range: [0, 50] },
    { name: '电网频率', value: 50, unit: 'Hz', pos: ['83%', '75%'], range: [0, 100] },
];

option = {
    backgroundColor: '#222939',

    series: (function () {
        var result = [];

        demoData.forEach(function (item) {
            result.push(
                // 外围刻度
                {
                    type: 'gauge',
                    center: item.pos,
                    radius: '33.33%', // 1行3个
                    splitNumber: item.splitNum || 10,
                    min: item.range[0],
                    max: item.range[1],
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 2,
                            shadowBlur: 0,
                            color: [[1, highlight]],
                        },
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: highlight,
                            width: 1,
                        },
                        length: -5,
                        splitNumber: 10,
                    },
                    splitLine: {
                        show: true,
                        length: -14,
                        lineStyle: {
                            color: highlight,
                        },
                    },
                    axisLabel: {
                        distance: -20,
                        textStyle: {
                            color: highlight,
                            fontSize: '14',
                            fontWeight: 'bold',
                        },
                    },
                    pointer: {
                        show: 0,
                    },
                    detail: {
                        show: 0,
                    },
                },

                // 内侧指针、数值显示
                {
                    name: item.name,
                    type: 'gauge',
                    center: item.pos,
                    radius: '30.33%',
                    startAngle: 225,
                    endAngle: -45,
                    min: item.range[0],
                    max: item.range[1],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 16,
                            color: [[1, 'rgba(255,255,255,.1)']],
                        },
                    },
                    axisTick: {
                        show: 0,
                    },
                    splitLine: {
                        show: 0,
                    },
                    axisLabel: {
                        show: 0,
                    },
                    pointer: {
                        show: true,
                        length: '105%',
                    },
                    detail: {
                        show: true,
                        offsetCenter: [0, '100%'],
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                        },
                        formatter: ['{value} ' + (item.unit || ''), '{name|' + item.name + '}'].join('\n'),
                        rich: {
                            name: {
                                fontSize: 14,
                                lineHeight: 30,
                                color: '#ddd',
                            },
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: highlight,
                        },
                    },
                    data: [
                        {
                            value: item.value,
                        },
                    ],
                    anchor: {
                        show: true,
                        showAbove: true,
                        size: 24,
                        itemStyle: {
                            color: '#fff',
                        },
                    },
                }
            );
        });

        return result;
    })(),
};

protected override void OnInitialized()
  {
    Data  = new List<DeviceData>
{
  new DeviceData { Name = "电压", Value = 220, Unit = "V", Pos = new List<string> { "16.6%", "25%" }, Range = new List<double> { 0, 400 } },
  new DeviceData { Name = "电流", Value = 32, Unit = "A", Pos = new List<string> { "49.8%", "25%" }, Range = new List<double> { 0, 60 } },
  new DeviceData { Name = "功率因数", Value = 0.9, Pos = new List<string> { "83%", "25%" }, Range = new List<double> { 0.1, 1.0 }, SplitNum = 9 },
  new DeviceData { Name = "有功功率", Value = 6.34, Unit = "kW", Pos = new List<string> { "16.6%", "75%" }, Range = new List<double> { 0, 50 } },
  new DeviceData { Name = "有功电能", Value = 6.28, Unit = "kWh", Pos = new List<string> { "49.8%", "75%" }, Range = new List<double> { 0, 50 } },
  new DeviceData { Name = "电网频率", Value = 50, Unit = "Hz", Pos = new List<string> { "83%", "75%" }, Range = new List<double> { 0, 100 } }
};
    // 创建仪表盘系列
    series= new List<Dictionary<string, object>>();
    foreach (var item in Data)
    {
      series.Add(CreateOuterScale(item, highlight));
      series.Add(CreateInnerPointer(item, highlight));
    }
    option =GetOption(series);
  }  private Dictionary<string, object> GetOption(List<Dictionary<string, object>> series)
  {
    return new Dictionary<string, object>
    {
      ["backgroundColor"] = "#222939",
      ["series"] = series
    };
  }

  /// <summary>
  /// 这个函数首先创建一个字典，然后为这个字典设置各种属性，包括类型、中心点、半径、刻度数、最小值、最大值、开始角度、结束角度、轴线、刻度线、分割线、轴标签、指针和细节。所有这些属性都是从DeviceData对象中获取的。
  /// </summary>
  /// <param name="item"></param>
  /// <param name="highlight"></param>
  /// <returns></returns>
  private Dictionary<string, object> CreateOuterScale(DeviceData item, string highlight)
  {
    return new Dictionary<string, object>
    {
      ["type"] = "gauge",
      ["center"] = item.Pos,
      ["radius"] = "33.33%",
      ["splitNumber"] = item.SplitNum != 0 ? item.SplitNum : 10,
      ["min"] = item.Range[0],
      ["max"] = item.Range[1],
      ["startAngle"] = 225,
      ["endAngle"] = -45,
      ["axisLine"] = new Dictionary<string, object>
      {
        ["show"] = true,
        ["lineStyle"] = new Dictionary<string, object>
        {
          ["width"] = 2,
          ["shadowBlur"] = 0,
          ["color"] = new List<object> { new List<object> { 1, highlight } }
        }
      },
      ["axisTick"] = new Dictionary<string, object>
      {
        ["show"] = true,
        ["lineStyle"] = new Dictionary<string, object>
        {
          ["color"] = highlight,
          ["width"] = 1
        },
        ["length"] = -5,
        ["splitNumber"] = 10
      },
      ["splitLine"] = new Dictionary<string, object>
      {
        ["show"] = true,
        ["length"] = -14,
        ["lineStyle"] = new Dictionary<string, object>
        {
          ["color"] = highlight
        }
      },
      ["axisLabel"] = new Dictionary<string, object>
      {
        ["distance"] = -20,
        ["textStyle"] = new Dictionary<string, object>
        {
          ["color"] = highlight,
          ["fontSize"] = 14,
          ["fontWeight"] = "bold"
        }
      },
      ["pointer"] = new Dictionary<string, object>
      {
        ["show"] = 0
      },
      ["detail"] = new Dictionary<string, object>
      {
        ["show"] = 0
      }
    };
  }

  /// <summary>
  /// 接收一个DeviceData对象和一个颜色字符串，然后返回一个表示内侧指针和数值显示的字典
  /// </summary>
  /// <param name="item"></param>
  /// <param name="highlight"></param>
  /// <returns></returns>
  private Dictionary<string, object> CreateInnerPointer(DeviceData item, string highlight)
  {
    return new Dictionary<string, object>
    {
      ["name"] = item.Name,
      ["type"] = "gauge",
      ["center"] = item.Pos,
      ["radius"] = "30.33%",
      ["startAngle"] = 225,
      ["endAngle"] = -45,
      ["min"] = item.Range[0],
      ["max"] = item.Range[1],
      ["axisLine"] = new Dictionary<string, object>
      {
        ["show"] = true,
        ["lineStyle"] = new Dictionary<string, object>
        {
          ["width"] = 16,
          ["color"] = new List<object> { new List<object> { 1, "rgba(255,255,255,.1)" } }
        }
      },
      ["axisTick"] = new Dictionary<string, object>
      {
        ["show"] = 0
      },
      ["splitLine"] = new Dictionary<string, object>
      {
        ["show"] = 0
      },
      ["axisLabel"] = new Dictionary<string, object>
      {
        ["show"] = 0
      },
      ["pointer"] = new Dictionary<string, object>
      {
        ["show"] = true,
        ["length"] = "105%"
      },
      ["detail"] = new Dictionary<string, object>
      {
        ["show"] = true,
        ["offsetCenter"] = new List<string> { "0", "100%" },
        ["textStyle"] = new Dictionary<string, object>
        {
          ["fontSize"] = 20,
          ["color"] = "#fff"
        },
        ["formatter"] = new List<string> { "{value} " + (item.Unit ?? ""), "{name|" + item.Name + "}" }.Aggregate((i, j) => i + "\n" + j),
        ["rich"] = new Dictionary<string, object>
        {
          ["name"] = new Dictionary<string, object>
          {
            ["fontSize"] = 14,
            ["lineHeight"] = 30,
            ["color"] = "#ddd"
          }
        }
      },
      ["itemStyle"] = new Dictionary<string, object>
      {
        ["normal"] = new Dictionary<string, object>
        {
          ["color"] = highlight
        }
      },
      ["data"] = new List<Dictionary<string, object>>
    {
      new Dictionary<string, object>
      {
        ["value"] = item.Value
      }
    },
      ["anchor"] = new Dictionary<string, object>
      {
        ["show"] = true,
        ["showAbove"] = true,
        ["size"] = 24,
        ["itemStyle"] = new Dictionary<string, object>
        {
          ["color"] = "#fff"
        }
      }
    };
  }

  public class DeviceData
  {
    public string Name { get; set; }
    public double Value { get; set; }
    public string Unit { get; set; }
    public List<string> Pos { get; set; }
    public List<double> Range { get; set; }
    public int SplitNum { get; set; }
  }

    Data[0].Value= _count;
    Data[1].Value= DateTime.Now.Second;
    // 重新构建series列表
    series.Clear();
    foreach (var item in Data)
    {
      series.Add(CreateOuterScale(item, highlight));
      series.Add(CreateInnerPointer(item, highlight));
    }

    // 更新图表数据
    echarts?.SetOption(option);//有效果