dotnet winform 显示echart图表

1、 安装WebView2 

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

<!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组件

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

　　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、网页端接收数据

   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 2024-02-02 13:47  金科许俊  阅读(153)  评论(0)    收藏  举报