wpf入门第五篇 WPF with ECharts

前言 本文是wpf入门系列第五篇，面向有winform或者web前端基础的、并且也有C#基础的同学。 ECharts是百度团队开发的开源免费的js图表控件库，非常强大，文档齐全。WPF中使用图表，除了可以选择devexpress或者oxyplot之类的专为wpf开发的图表控件之外，还可以考虑使用 WebBrowser+ECharts 来完成复杂的图表展示，其展示效果不亚于前者。 本文介绍了 WPF中 使用 WebBrowser+ECharts 的方法，以及该种用法下的C#与JS的互相调用。 本文使用了 Visual Studio 2017 进行演示讲解。 wpf入门系列导航页面： https://blog.csdn.net/wf824284257/article/details/88757497

开始

打开 VS2017，新建WPF项目，命名为 EChartsTest 。

到ECharts官网 （ https://echarts.baidu.com/ ）下载js文件，并添加到项目中：

 

编辑MainWindow.xaml为下面代码：

 此时设计界面如下图所示：

 将chart1.html中的代码替换为如下代码：

    
    ECharts



    html页面
    

    
    
        myChart = echarts.init(document.getElementById('main'));
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        myChart.setOption(option);
    

 将MainWindow.xaml.cs 的代码替换为如下代码：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace EChartsTest
{
    /// 
    /// MainWindow.xaml 的交互逻辑
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Web.Navigate(new Uri(Directory.GetCurrentDirectory() + "/chart1.html"));
        }
        private void btnShowHide_Click(object sender, RoutedEventArgs e)
        {
        }
        private void btnPushData_Click(object sender, RoutedEventArgs e)
        {
        }
    }
}

此时，按F5运行，界面显示如下：

 

 

可以看到，显示效果非常好。

下面我们完善btnShowHide_Click和btnPushData_Click，使得C#代码可以控制html中单的ECharts。

C#中可以调用js方法。首先在chart1.html中script段添加下面代码：

function jsShowHide(info) {
    if (info == 0) {
        myChart.clear();
    }
    else {
        myChart.setOption(option);
    }
}
function jsPushData(x,y) {
    option.xAxis.data.push(x);
    option.series[0].data.push(y);
    myChart.setOption(option);
}

然后修改btnShowHide_Click和btnPushData_Click：

int show = 0;
private void btnShowHide_Click(object sender, RoutedEventArgs e)
{
    Web.InvokeScript("jsShowHide", show);
    if (show == 0) show = 1;
    else show = 0;
}
private void btnPushData_Click(object sender, RoutedEventArgs e)
{
    Web.InvokeScript("jsPushData","x",1000);
}

 

 ps: 隐藏滚动条可以设置 html body style overflow 。 结束 本文通过一个小的测试项目来简单说明了 WPF 中 Echarts 的用法。若有其他需要可留言，24小时内回复。 本文所用代码示例可以在博主的资源页下载：https://download.csdn.net/download/wf824284257/11086021  

 

---------------------  作者：Fanstorm 来源：CSDN  原文：https://blog.csdn.net/wf824284257/article/details/89002133 版权声明：本文为博主原创文章，转载请附上博文链接！