C# 在WPF 嵌入百度ECharts ---小姐姐随手笔记

在网上下载echarts插件和你想要的样式

1、在html页面添加

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="main" style="width:600px;height:350px" />
<script src="echarts.js"></script>
<script src="walden.js"></script>
<script>
myChart = echarts.init(document.getElementById('main'),"walden");
option = {
title: {
text: {
data: [""]
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: [""]
},
toolbox: {
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{

type: 'category',
boundaryGap: false,
data: [""]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'A级告警',
type: 'line',
stack: '总量',
areaStyle: { normal: {} },
data: [0]
},
{
name: 'B级告警',
type: 'line',
stack: '总量',
areaStyle: { normal: {} },
data: [0]
},

{
name: 'C级告警',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: { normal: {} },
data: [0]
}
]
};
if (option && typeof option === "object") {
GetReport();
function Request(strName) {
var strHref = location.search;
var intPos = strHref.indexOf("?");
var strRight = strHref.substr(intPos + 1);
var arrTmp = strRight.split("&");
for (var i = 0; i < arrTmp.length; i++) {
var arrTemp = arrTmp[i].split("=");
if (arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1];
}
return "";
}
function GetReport() {
var type = Request("type");
var title = Request("title");
var result = eval('(' + window.external.GetReportDataAjaxData(title, type) + ')');
//var options = myChart.getOption();
option.title.text = result.title;
option.xAxis[0].data = result.category;
option.series = result.series;
option.legend.data = result.legend;
myChart.setOption(option);

window.onresize = myChart.resize;
}
}
</script>
</body>
</html>

2、新建一个类书写方法 GetReportDataAjaxData。

[PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
[System.Runtime.InteropServices.ComVisible(true)]//给予权限并设置可见

public class DataAnalysisColumn
{
/// <summary>
/// 最大值、最小值、平均值的数据分析图
/// </summary>
/// <param name="title"></param>
/// <param name="type"></param>
/// <param name="alias"></param>
/// <returns></returns>

public string GetReportDataAjaxData(string title, string type, string alias){}

3、页面调用

效果图：

初学者忘指点。还有地方可以优化的。转发请注明出处

C# 在WPF 嵌入 百度ECharts ---小姐姐 随手笔记

猜你喜欢

C# 在WPF 嵌入百度ECharts ---小姐姐随手笔记