Winform调用Echart，实现曲线分段变色功能

最新推荐文章于 2025-01-19 00:15:46 发布

a5pansq

最新推荐文章于 2025-01-19 00:15:46 发布

阅读量2.2k

点赞数

文章标签： winform 调用Echart 曲线分段变色更改webbrowser默认内核

本文链接：https://blog.youkuaiyun.com/a5pansq/article/details/89669310

版权

本文介绍了如何在Winform应用中利用WebBrowser控件调用Echart，绘制实时动态曲线并实现曲线按Y轴分段变色。在实现过程中，由于WebBrowser默认使用IE7内核导致效果不理想。通过修改注册表，强制WebBrowser使用高版本IE内核（如IE10），成功实现了曲线变色效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求描述：

由于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

最低0.47元/天解锁文章