dotnet winform 显示echart图表

1、 安装WebView2 

 2、新建index.html 并下载echart.min.js到本地

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="echarts.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="main" style="width: 100%; height: 100%"></div>
 
    <script type="text/javascript">
      const xAxis = [];
      const yAxis = [];
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          left: "center",
          text: null,
        },
        tooltip: {
          trigger: "axis",
 
          //   formatter: `{b}<span style='color:#1E9FFF'>　 {c} </span><span style='color:#393D49'> ${apoint.value.unit || ""}</span>`,
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          data: xAxis,
        },
        yAxis: {
          splitLine: false,
          splitNumber: 2,
          max: function (value) {
            return Math.ceil(value.max) + Math.ceil(Math.abs(value.max * 0.1));
          },
          min: function (value) {
            return Math.ceil(value.min) - Math.ceil(Math.abs(value.min * 0.1));
          },
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 20,
          },
        ],
        series: [
          {
            type: "line",
            smooth: false,
            // symbol: "none",
            sampling: "lttb",
            data: yAxis,
            markPoint: {
              data: [
                { type: "max", name: "Max", itemStyle: { color: "#FFB800" } },
                { type: "min", name: "Min", itemStyle: { color: "#FF5722" } },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
        ],
      };
 
      option && myChart.setOption(option, true);
      var main = document.getElementById("main");
      main.style.width = window.innerWidth - 20 + "px";
      main.style.height = window.innerHeight - 20 + "px";
 
      window.addEventListener("resize", function () {
        main.style.width = window.innerWidth - 20 + "px";
        main.style.height = window.innerHeight - 20 + "px";
        myChart.resize();
      });
 
      window.chrome.webview.addEventListener("message", function (event) {
        const json = event.data;
        const obj = JSON.parse(json);
 
        xAxis.push(obj.time);
        yAxis.push(obj.value);
        myChart.setOption(
          {
            xAxis: {
              data: xAxis,
            },
            series: [
              {
                data: yAxis,
              },
            ],
          },
          false
        );
      });
      myChart.resize();
    </script>
  </body>
</html>

　　3、新建winform窗体组件，添加WebView2组件

?
1
2
3
4
5
string curDir = Directory.GetCurrentDirectory();
// 显式触发控件 CoreWebView2 的初始化
await webView.EnsureCoreWebView2Async(null);
// 加载本地文件
webView.CoreWebView2.Navigate($"file:///{curDir}/Web/index.html");

　　4、向网页动态传递数据

?
1
2
3
4
Kv kv = new Kv(); // 简单对象 time 时间，value 数值
kv.value = dpoint.value.Value ? 1 : 0;
    kv.time = Core.Jun.DataDll.Time.TimeStamp.ConvertToDateTime(time).ToString("yy-MM-dd HH:mm:ss");    
    webView.CoreWebView2.PostWebMessageAsString(Core.Jun.DataDll.Json.DataJsonSerializer.ObjectToJson(kv));

　　5、网页端接收数据

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.chrome.webview.addEventListener("message", function (event) {
     const json = event.data;
     const obj = JSON.parse(json);
 
     xAxis.push(obj.time);
     yAxis.push(obj.value);
     myChart.setOption(
       {
         xAxis: {
           data: xAxis,
         },
         series: [
           {
             data: yAxis,
           },
         ],
       },
       false
     );
   });

　　

posted on   金科许俊  阅读(121)  评论(0)  编辑  收藏  举报
相关博文：
·  dotnet Core window 下注册成service服务
·  OpenEuler部署 .net Core 程序
·  winform 嵌入图表 html+echart+json对象字符串传递
·  WinForm程序中使用Echarts图表
·  在vue2中使用echarts
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）



点击右上角即可分享
微信分享提示
AI IDE Trae