C#winform使用Echarts绘制多条实时折线图
时间: 2025-01-05 16:46:15 浏览: 10
在C# WinForms应用程序中使用Echarts绘制多条实时折线图,可以通过以下步骤实现:
1. **引入Echarts库**:
首先,需要在项目中引入Echarts库。可以通过npm安装Echarts,然后在项目中引用相应的JavaScript文件。
2. **创建WinForms项目**:
创建一个新的WinForms项目,并在表单上添加一个WebBrowser控件或使用WebView2控件来加载Echarts图表。
3. **编写HTML和JavaScript代码**:
在项目中添加一个HTML文件,用于展示Echarts图表,并编写JavaScript代码来动态更新图表数据。
4. **C#与JavaScript交互**:
使用C#代码与JavaScript进行交互,实时更新图表数据。
以下是一个简单的示例代码:
**HTML文件(例如:Chart.html)**:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts 多条实时折线图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var chart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '实时折线图'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: []
};
chart.setOption(option);
function updateChart(xData, seriesData) {
option.xAxis.data = xData;
option.series = seriesData;
chart.setOption(option);
}
window.updateChart = updateChart;
</script>
</body>
</html>
```
**C#代码**:
```csharp
using System;
using System.Windows.Forms;
using System.Threading;
namespace RealTimeEcharts
{
public partial class Form1 : Form
{
private WebBrowser webBrowser;
private Timer timer;
public Form1()
{
InitializeComponent();
InitializeWebBrowser();
InitializeTimer();
}
private void InitializeWebBrowser()
{
webBrowser = new WebBrowser
{
Dock = DockStyle.Fill
};
this.Controls.Add(webBrowser);
webBrowser.Navigate(Application.StartupPath + "\\Chart.html");
}
private void InitializeTimer()
{
timer = new Timer();
timer.Interval = 1000; // 1秒
timer.Tick += Timer_Tick;
timer.Start();
}
private void Timer_Tick(object sender, EventArgs e)
{
// 生成随机数据
var random = new Random();
var xData = new[] { DateTime.Now.ToString("HH:mm:ss") };
var seriesData = new[]
{
new
{
name = "系列1",
type = "line",
data = new[] { random.Next(0, 100) }
},
new
{
name = "系列2",
type = "line",
data = new[] { random.Next(0, 100) }
}
};
// 调用JavaScript函数更新图表
string script = $"window.updateChart({Newtonsoft.Json.JsonConvert.SerializeObject(xData)}, {Newtonsoft.Json.JsonConvert.SerializeObject(seriesData)});";
webBrowser.Document.InvokeScript("eval", new[] { script });
}
}
}
```
在这个示例中,C#代码通过WebBrowser控件加载一个HTML文件,并在定时器中生成随机数据,然后调用JavaScript函数更新Echarts图表。
阅读全文