Winform WebBrowser 控件加载Echarts图表数据怎么更新啊
0
悬赏园豆：20
[已解决问题]
解决于 2023-08-04 17:11
想问一下大家，在用WebBrowser 控件加载Echarts图表的时候大家都怎么更新数据啊，带我的一个师傅是在里面放一个Timer，定时刷新接收数据，不管数据有没有变或者什么的，我觉得这样不太合理吧，而且也不好调试，还容易出错，想问下大家用的时候怎样搞。
比如有个饼图是这样的：
<!DOCTYPE html>
<html style="width: 100%;height: 100%;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="../JS/echarts.js"></script>
</head>
<body style="margin:0%;padding: 0%; width:100%;height:100%;">
<div id="main" style="width:100%;height:100%;"> </div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, "dark");
var baseColor = eval('(' + window.external.baseColor + ')');
var data_Normal = 0;
var data_Warning = 0; // 预警
var data_Alarm = 0; // 报警
var data_Abnormal = 0; // 离线
var scale = 1;
var echartData = [{
value: 5,
name: '正常'
}, {
value: 0,
name: '预警'
}, {
value: 0,
name: '报警'
},
{
value: 1,
name: '离线'
}
]
// 计算总和
var total = 0;
echartData.forEach(function (value, index, array) {
total += value.value;
});
var rich = {
yellow: {
color: "#ffc72b",
fontSize: 30 * scale,
padding: [5, 4],
align: 'center'
},
total: {
color: "#ffc72b",
fontSize: 40 * scale,
align: 'center'
},
blue: {
color: '#49dff0',
fontSize: 16 * scale,
align: 'center'
},
}
option = {
backgroundColor: baseColor,
title: {
text: '单元状态',
subtext: '总和：' + total, // 使用自定义的总和信息
left: 'center',
top: '48%',
padding: [24, 0],
textStyle: {
color: '#fff',
fontSize: 18 * scale,
align: 'center'
},
subtextStyle: { // 副标题样式
color: '#FFC72B', // 文本颜色
fontSize: 16, // 字体大小
fontWeight: 'bold' // 字体粗细，可选值："normal"、"bold"、"bolder"、"lighter" 或者 数字
}
},
tooltip: {
trigger: 'item'
},
legend: {
},
series: [
{
type: 'pie',
radius: ['50%', '65%'],
color: ['#00ff01', '#ffea00', '#ff0000', '#7f7f7f'],
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
label: {
normal: {
formatter: function (params, ticket, callback) {
var total = 0; // 总数量
var percent = 0; // 占比
echartData.forEach(function (value, index, array) {
total += value.value;
});
if (params.value === 0) {
return ''; // 当value为0时返回空字符串
}
percent = ((params.value / total) * 100).toFixed(1);
return params.name + '{yellow|' + params.value + '}\n{blue|' + percent + '%}';
},
rich: rich
}
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
data: echartData
}
]
};
myChart.setOption(option);
var timer = window.setInterval(function () {
data_Normal = eval('(' + window.external.data_Normal + ')');
data_Abnormal = eval('(' + window.external.data_Abnormal + ')');
data_Warning = eval('(' + window.external.data_Warning + ')');
data_Alarm = eval('(' + window.external.data_Alarm + ')');
echartData[0].value = data_Normal;
echartData[1].value = data_Warning;
echartData[2].value = data_Alarm;
echartData[3].value = data_Abnormal;
option.series.data = echartData;
total = 0;
echartData.forEach(function (value, index, array) {
total += value.value;
});
myChart.setOption({
title: {
subtext: '总和：' + total,
},
series: option.series
});
}, 1000);
</script>
</body>
</html>
最佳答案
0
不想自动更新，那就给个按钮手动更新呗。
收获园豆：10
手动更新不太合适😂，因为是显示成员状态的，所以要显示实时数据
@水煮养乐多: 那你师傅用的timer没错啊，你这说的是数据变化，不想每次都重新组数据，那就需要你自己去判断数据有没有变化了。
@偷走dalao的红豆: 行
其他回答(1)
0
在使用 WinForms 的 WebBrowser 控件加载 Echarts 图表数据时，你可以考虑以下两种方式来更新数据：
调用 JavaScript 函数更新数据：可以在 C# 程序中调用 JavaScript 函数，将新的数据传递给 JavaScript，然后再由 JavaScript 更新图表数据。这样可以避免定时器轮询的方式，实现按需更新数据。以下是一个示例：
csharp
Copy code
using System.Windows.Forms;
namespace YourNamespace
{
public partial class MainForm : Form
{
// 更新 Echarts 图表数据的方法
public void UpdateChartData(string chartData)
{
// 调用 JavaScript 函数，传递新的数据
webBrowser1.Document.InvokeScript("updateChart", new object[] { chartData });
}
}
}
在上面的示例中，我们假设在 JavaScript 部分已经有一个名为 updateChart 的函数，该函数可以接收新的数据并更新图表。你可以在 Echarts 的 JavaScript 部分中定义 updateChart 函数。
使用 SignalR 进行实时更新：SignalR 是一个 Microsoft 提供的用于实时通信的库，可以用于在服务端和客户端之间建立实时连接。你可以在 C# 程序中使用 SignalR 将新数据推送给前端网页，然后由前端 JavaScript 更新图表数据。这样可以实现实时更新，避免了轮询的问题。
无论使用哪种方式，你都可以根据需要在 C# 程序中获取新的数据，然后再将数据传递给 JavaScript 更新图表。如果你选择使用 SignalR，你需要配置 SignalR 服务器并在前端页面建立 SignalR 连接。
请根据你的需求选择适合的方式，动态更新 Echarts 图表数据。上面的示例代码中，我们使用第一种方式，即通过调用 JavaScript 函数更新数据。你需要根据实际情况在 Echarts 部分定义相应的 JavaScript 函数，并在 C# 程序中调用该函数传递新数据。
收获园豆：10
