使用webbrowser控件展示echarts的三维图像

SChuki

于 2021-09-17 15:45:05 发布

阅读量624

点赞数 1

分类专栏： C# 文章标签： echarts winform webbrowser

本文链接：https://blog.csdn.net/u010898567/article/details/120348748

版权

C# 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.webbrowser控件导航到目标文件

string dataDir = Path.GetFullPath(@"..//.."); //取得当前程序的上上级目录
webBrowser1.Navigate(dataDir + @"\asset\p1.html");

注意指示托管类型对 COM 可见

 [System.Runtime.InteropServices.ComVisible(true)]
 public partial class Form1 : Form
 {
 }

2.p1.html文件内容

<!DOCTYPE html>
<html>
<head>
	<!--<meta charset="utf-8">-->
	<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第一个 ECharts 实例</title>
	<!-- 引入 echarts.js -->
	<script src="echarts.js"></script>
	<!--<script src="jquery.min.js"></script>-->
	<!--<script src="bootstrap.min.js"></script>-->
	<script src="echarts-gl.js"></script>

</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        var chartDom = document.getElementById('main');
		var myChart = echarts.init(chartDom);
		var option;

		var data = [];
		// Parametric curve
		for (var t = 0; t < 25; t += 0.001) {
			var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);
			var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);
			var z = t + 2.0 * Math.sin(75 * t);
			data.push([x, y, z]);
		}

		option = {
			tooltip: {},
			backgroundColor: '#fff',
			visualMap: {
				show: false,
				dimension: 2,
				min: 0,
				max: 30,
				inRange: {
					color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
				}
			},
			xAxis3D: {
				type: 'value'
			},
			yAxis3D: {
				type: 'value'
			},
			zAxis3D: {
				type: 'value'
			},
			grid3D: {
				viewControl: {
					projection: 'orthographic'
				}
			},
			series: [{
				type: 'line3D',
				data: data,
				lineStyle: {
					width: 4
				}
			}]
		};

		option && myChart.setOption(option);

    </script>
</body>
</html>

注意：在html中需要将渲染模式做设置，在ie内核下不设置，使用echarts三维图会报错（不能使用freeze属性或方法）。

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

3.echarts.js和echarts-gl.js的问题

1）版本

echarts.js的4.X和echarts-gl.js的1.X匹配

echarts.js的5.X和echarts-gl.js的2.X匹配

我是用的是：

whttps://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/

https://cdn.jsdelivr.net/npm/echarts-gl@2.0.8/dist/

优先使用非压缩版本，压缩了的echarts.min.js使用时会报错，好像不能使用line3D...，可能与压缩删去回车和空格有关。

2）echarts-gl.js的报错问题

1.报格式错误

原因是echarts-gl.js中存在匿名函数"()=>{}"，改为常用格式“function(){}”就行了，大概有5、6处，报错提示位置。

2. 不支持assign属性或方法

这个错误也是应为ie内核导致的，修改方法在下面的连接中，将ployfill复制到报错的前面就可以了。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

4.最后的效果

SChuki

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
使用webbrowser控件展示echarts的三维图像

1.webbrowser控件导航到目标文件string dataDir = Path.GetFullPath(@"..//.."); //取得当前程序的上上级目录webBrowser1.Navigate(dataDir + @"\asset\p1.html");注意指示托管类型对 COM 可见 [System.Runtime.InteropServices.ComVisible(true)] public partial class Form1 : Form { }2.p1.
复制链接

扫一扫