C#中使用ECharts——Winform程序静态页面

ECharts不做过多介绍，只需要知道其是一个特别好用的数据处理的图形界面的js就行。

这里讲一下在C#中使用ECharts的方法，首先建立一个Winform程序，在窗口中添加一个WebBrowser控件，此控件主要用来加载后期的html文件。界面如下：

接着导入需要的第三方插件，即ECharts，通过NuGet查找，之后安装到项目中，也可以去官网下载：https://www.echartsjs.com/en/download.html。

对于界面，就根据我们的需求来编写，可以去官网查看例子：https://www.echartsjs.com/examples/en/，这里我随便挑一个例子来使用，比如挑这个：https://www.echartsjs.com/examples/en/editor.html?c=pie-simple，编辑HTML：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!--创建一个div用于放结果图-->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- 引入ECharts文件 -->
    <script src="Scripts/ECharts/echarts-all.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [{
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    myChart.setOption(option);
    </script>
</body>

在Load中编写代码：

private void Form1_Load(object sender,EventArgs e)
{
    //后面的Test.html根据自己的文件地址确定
    this.webBrowser1.Url = new Uri("\\Test.html");
}

最后启动项目，结果如图所示：

对于HTML中的各个节点的含义，官方文档或者网上搜索即可，还有个很好的办法，即进入官网的实例，可以进行修改，可以自己修改某个节点，然后RUN，查看图的变化，这样能很直观的明白每个节点的含义。

雨欲语

发布了165 篇原创文章 · 获赞 41 · 访问量 8万+

私信关注

C#中使用ECharts——Winform程序静态页面

猜你喜欢