winform 嵌入图表 html+echart+json对象字符串传递

很久以前一直以为winform只能使用控件或者自己绘制图表，直到今天经过大佬提醒 才发现winform也能使用echart进行图表生成

  • 新建 html界面
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="json2.js"></script>
    <script src="echarts.js"></script>

</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <button onclick="window.external.MyMessageBox('javascript访问C#代码')">
        javascript访问C#代码
    </button>

    <script type="text/javascript">


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        function messageBox(message) {
            alert(message);
        };
        function setEchartOption(message) {
  
            var obj = JSON.parse( message );
       
            myChart.setOption(obj);
    
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);



    </script>
</body>
</html>　
  • 引用echart.js

在 https://www.jsdelivr.com/package/npm/echarts 下载解压 选择路径下的 dist/echarts.js

  • 引用json2.js 

原因 JSON未定义

 douglascrockford/JSON-js: JSON in JavaScript (github.com)  下载解压 选择路径下json2.js

 

 

  • 路径下的js

 

 

 

  • 设置vs studio解决方案中 src文件夹下全部js和html文件为输出
  • 页面布局

 

 四个按钮+一个WebBrowse控件

 

 

 

 

 

 

 

 

 

 

  • C#代码
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WindowsFormsApp1
{
     //注意这个特性
    [System.Runtime.InteropServices.ComVisibleAttribute(true)]
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        //加载html
        private void button1_Click(object sender, EventArgs e)
        {
            //防止 WebBrowser 控件打开拖放到其上的文件。
            webBrowser1.AllowWebBrowserDrop = false;

            //防止 WebBrowser 控件在用户右击它时显示其快捷菜单.
            webBrowser1.IsWebBrowserContextMenuEnabled = false;

            //以防止 WebBrowser 控件响应快捷键。
            webBrowser1.WebBrowserShortcutsEnabled = false;

            //以防止 WebBrowser 控件显示脚本代码问题的错误信息。
            //webBrowser1.ScriptErrorsSuppressed = true;

            //（这个属性比较重要，可以通过这个属性，把WINFROM中的变量，传递到JS中，供内嵌的网页使用；但设置到的类型必须是COM可见的，所以要设置     [System.Runtime.InteropServices.ComVisibleAttribute(true)]，因为我的值设置为this,所以这个特性要加载窗体类上）
            webBrowser1.ObjectForScripting = this;

            this.webBrowser1.Url = new Uri( Environment.CurrentDirectory+ @"\src\index.html");
        }
        //刷新html
        private void button2_Click(object sender, EventArgs e)
        {
            this.webBrowser1.Refresh();
        }
        //被外部js调用的方法
        public void MyMessageBox(string message)
        {

            MessageBox.Show(message);
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }
        //调用js方法
        private void button3_Click(object sender, EventArgs e)
        {


                // 调用JavaScript的messageBox方法，并传入参数
            object[] objects = new object[1];

                objects[0] = "C#访问JavaScript脚本";

                webBrowser1.Document.InvokeScript("messageBox", objects);
          
        }
        //调用js并传入json字符串
        private void button4_Click(object sender, EventArgs e)
        {
            EchartRootobject echartRootobject = new EchartRootobject();
            echartRootobject.title = new Title();
            echartRootobject.title.text = "ECharts2222 入门示例 ";
            echartRootobject.legend = new Legend();
            echartRootobject.legend.data = new string[] { "销量2" };
            echartRootobject.xAxis = new Xaxis {  data=new string[] { "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" } } ;
            echartRootobject.series = new Series[] { new Series() { name = "销量2", data = new int[] { 5, 20, 36, 10, 10, 20 }, type = "bar" } };


             object[] objects = new object[1];

            objects[0] = JsonConvert.SerializeObject(echartRootobject);
            //调用js函数并传入json字符串
            webBrowser1.Document.InvokeScript("setEchartOption", objects); 
          }
     }
 }

　　

 

posted @ 2022-08-05 10:13  JohnnyLei  阅读(409)  评论(0)    收藏  举报