需求描述:
由于chart太丑,想通过使用winform的webbrowser控件,调用echart的.js文件,绘制实时动态曲线,并且实现曲线按y轴要求变色。中间遇到个浏览器大坑!
首先找到Echart曲线分段变色的官方demo (最后给出完整代码)
Echart官方demo
实现效果如下:
然后在VS中添加form窗体,插入webrowser控件
在bin-debug中添加上述网站编写的HTML文件和网上下载的两个JS文件
注意:官网上的是只有option的,没有头,要自己加个头(我从网上下载的)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width:1200px;height:600px" />
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
在VS中插入如下代码:
/// <summary>
/// 初始化浏览器
/// </summary>
private void initWebBrowser()
{
//防止 WebBrowser 控件打开拖放到其上的文件。
webBrowser1.AllowWebBrowserDrop = false