Bootstrap

WPF使用ECharts做曲线图实例

背景：

        使用VS2015，.NetFormwork4.6，Echarts.js

学习：

        首先肯定是Echarts的官网学习，里面有各种曲线案例，详细的文档介绍：属性使用会一直看文档，太多了记不住：Examples - Apache ECharts

        再有就是学习了‘子不语’的案例：WPF编程，WPF项目中使用Echart控件画图的使用方法_wpf echarts-CSDN博客

流程介绍：

        首先说我这里是因为实际工作时需要用到了所以进行了学习使用，本人所在公司就我一人独苗连个交流讨论的人都没得，自己边学先做。

        要求是做一个多曲线图组合数据展示折线图：

这个就是需求，需要照着这个样子做出来，也使用其它技术做过但是没有实现最后换成了echarts。

xaml：

<Viewbox Stretch="Fill" StretchDirection="Both">
        <Grid Width="1500" Height="880">
            <Border BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="2" VerticalAlignment="Top" Height="40" Margin="2,2,4,0">
                <UniformGrid Columns="3">
                    <Button Content="添加曲线图" FontSize="15" Width="100" Height="25" Click="Button_Click_Add" />                    
                </UniformGrid>
            </Border>
            <WebBrowser Grid.Row="1" Name="Web" Margin="4,40,4,4"></WebBrowser>
        </Grid>
    </Viewbox>

截取的Viewbox里的代码，其它操作都是基本的就不往上贴了，我这里是在xaml页里嵌入的html页面，使用<WebBrowser>嵌入，其它xaml这里没啥好说的了。

Echarts:

        从官网下载后原文档我没有细研究直接使用的，在文档的

这个文件里复制出来直接使用。

html：

单独创建一个html页，html文件一定要设置始终复制，不设置生成后的程序找不到html文件。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0013)about:internet -->
<head>
    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=5,6,7,8,9,10,11, chrome=1" />
    <title>分析数据</title>
    <script src="../echarts.js"></script>

</head>
<body Width="1500" Height="880">
    <div id="Main" style="width:100%; height:800px;" />
</body>
</html>

我这里把echarts.js文件引用到了头部里，echarts文件引用进项目里并设置始终复制，也是和html一样，不设置就会找不到文档。

echarts.min.js没有用到不用引入。

html这里就是引用上echarts，然后弄一个框子放曲线图。

JS：

        js这里是操作重点，我花了几天在这里把echarts的常见几种图形实现学习了一下，就在js里绑死数据进行操作，实例中的难点是在绑数据上，中间走了不少弯路，网上查找的在js里添加曲线添加数据等一系列的操作，这些在html里调用没有问题，问题是出现在wpf给html传值这里，调用js方法一直报错，网上也没有什么直接见效的方法解决这些问题，只要你研究并想使用的时候都能遇到这些问题。

        series、yAxis、xAxis：数据曲线、y轴、x轴进行从无到有添加，html调用echartsApi添加没有问题，wpf的WebBrowser.InvokeScript调用报错和困难：wpf调试html和js有点困难，点击html页网站直接调试可以调试js，主要报错是：ECharts 报错 `resize` should not be called during main process，不应在主进程中调用.搞不明白这个报错，我直接另辟蹊径揭过这个问题了，就是直接在后台编写好option，js里的接口直接添加就避开了这个问题，上代码：

<script type="text/javascript">

    //给曲线添加数据
    function jsPushData(x, y) {
        option.xAxis[0].data.push(x);
        option.series[0].data.push(y);
        myChart.setOption(option);
    }
    //添加曲线
    function UpdateData(data) {
        var elements = JSON.parse(data);
    
        var dom = document.getElementById('Main');
    
        var myChart = echarts.init(dom, 'dark', {
          renderer: 'canvas',
          useDirtyRect: 'false'
        });
    
        if (elements && typeof elements === 'object') {
          myChart.setOption(elements);
        }
        window.addEventListener('resize', myChart.resize);
    }
    //测试功能实现接口
    function ceshi(){
        let data = '{"tooltip":{"trigger":"axis","axisPointer":{"animation":false}},"legend":{"left":10,"data":["曲线1","曲线2","曲线3","曲线4"]},"toolbox":{"feature":{"dataZoom":{"yAxisIndex":"none"},"restore":{},"saveAsImage":{}}},"axisPointer":{"link":[{"xAxisIndex":"all"}]},"dataZoom":[{"show":true,"type":"inside","realtime":true,"start":30,"end":70,"xAxisIndex":[0,1]},{"show":true,"type":"inside","realtime":true,"start":30,"end":70,"xAxisIndex":[0,1]}],"grid":[{"left":60,"right":50,"top":"","height":"35%"},{"left":60,"right":50,"top":"50%","height":"35%"}],"xAxis":[{"name":"xAxis1","gridIndex":0,"type":"category","boundaryGap":false,"axisLine":{"onZero":true},"position":"bottom","show":true,"data":["2009/6/12 12:01:00.1234","2009/6/12 12:01:01.1234","2009/6/12 12:01:02.1234","2009/6/12 12:01:03.1234","2009/6/12 12:01:04.1234","2009/6/12 12:01:05.1234","2009/6/12 12:01:06.1234","2009/6/12 12:01:07.1234","2009/6/12 12:01:08.1234","2009/6/12 12:01:09.1234","2009/6/12 12:01:10.1234","2009/6/12 12:01:11.1234","2009/6/12 12:01:12.1234","2009/6/12 12:01:13.1234","2009/6/12 12:01:14.1234","2009/6/12 12:01:15.1234","2009/6/12 12:01:16.1234","2009/6/12 12:01:17.1234","2009/6/12 12:01:18.1234","2009/6/12 12:01:19.1234","2009/6/12 12:01:20.1234","2009/6/12 12:01:21.1234","2009/6/12 12:01:22.1234","2009/6/12 12:01:23.1234","2009/6/12 12:01:24.1234","2009/6/12 12:01:25.1234","2009/6/12 12:01:26.1234","2009/6/12 12:01:27.1234","2009/6/12 12:01:28.1234","2009/6/12 12:01:29.1234","2009/6/12 12:01:30.1234","2009/6/12 12:01:31.1234","2009/6/12 12:01:32.1234","2009/6/12 12:01:33.1234","2009/6/12 12:01:34.1234","2009/6/12 12:01:35.1234","2009/6/12 12:01:36.1234","2009/6/12 12:01:37.1234","2009/6/12 12:01:38.1234","2009/6/12 12:01:39.1234","2009/6/12 12:01:40.1234","2009/6/12 12:01:41.1234","2009/6/12 12:01:42.1234","2009/6/12 12:01:43.1234","2009/6/12 12:01:44.1234","2009/6/12 12:01:45.1234","2009/6/12 12:01:46.1234","2009/6/12 12:01:47.1234","2009/6/12 12:01:48.1234","2009/6/12 12:01:49.1234","2009/6/12 12:01:50.1234","2009/6/12 12:01:51.1234","2009/6/12 12:01:52.1234","2009/6/12 12:01:53.1234","2009/6/12 12:01:54.1234","2009/6/12 12:01:55.1234","2009/6/12 12:01:56.1234","2009/6/12 12:01:57.1234","2009/6/12 12:01:58.1234","2009/6/12 12:01:59.1234","2009/6/12 12:02:00.1234","2009/6/12 12:02:01.1234","2009/6/12 12:02:02.1234","2009/6/12 12:02:03.1234","2009/6/12 12:02:04.1234","2009/6/12 12:02:05.1234","2009/6/12 12:02:06.1234","2009/6/12 12:02:07.1234","2009/6/12 12:02:08.1234","2009/6/12 12:02:09.1234","2009/6/12 12:02:10.1234","2009/6/12 12:02:11.1234","2009/6/12 12:02:12.1234","2009/6/12 12:02:13.1234","2009/6/12 12:02:14.1234","2009/6/12 12:02:15.1234","2009/6/12 12:02:16.1234","2009/6/12 12:02:17.1234","2009/6/12 12:02:18.1234","2009/6/12 12:02:19.1234","2009/6/12 12:02:20.1234","2009/6/12 12:02:21.1234","2009/6/12 12:02:22.1234","2009/6/12 12:02:23.1234","2009/6/12 12:02:24.1234","2009/6/12 12:02:25.1234","2009/6/12 12:02:26.1234","2009/6/12 12:02:27.1234","2009/6/12 12:02:28.1234","2009/6/12 12:02:29.1234","2009/6/12 12:02:30.1234","2009/6/12 12:02:31.1234","2009/6/12 12:02:32.1234","2009/6/12 12:02:33.1234","2009/6/12 12:02:34.1234","2009/6/12 12:02:35.1234","2009/6/12 12:02:36.1234","2009/6/12 12:02:37.1234","2009/6/12 12:02:38.1234","2009/6/12 12:02:39.1234","2009/6/12 12:02:40.1234","2009/6/12 12:02:41.1234","2009/6/12 12:02:42.1234","2009/6/12 12:02:43.1234","2009/6/12 12:02:44.1234","2009/6/12 12:02:45.1234","2009/6/12 12:02:46.1234","2009/6/12 12:02:47.1234","2009/6/12 12:02:48.1234","2009/6/12 12:02:49.1234","2009/6/12 12:02:50.1234","2009/6/12 12:02:51.1234","2009/6/12 12:02:52.1234","2009/6/12 12:02:53.1234","2009/6/12 12:02:54.1234","2009/6/12 12:02:55.1234","2009/6/12 12:02:56.1234","2009/6/12 12:02:57.1234","2009/6/12 12:02:58.1234","2009/6/12 12:02:59.1234","2009/6/12 12:03:00.1234","2009/6/12 12:03:01.1234","2009/6/12 12:03:02.1234","2009/6/12 12:03:03.1234","2009/6/12 12:03:04.1234","2009/6/12 12:03:05.1234","2009/6/12 12:03:06.1234","2009/6/12 12:03:07.1234","2009/6/12 12:03:08.1234","2009/6/12 12:03:09.1234","2009/6/12 12:03:10.1234","2009/6/12 12:03:11.1234","2009/6/12 12:03:12.1234","2009/6/12 12:03:13.1234","2009/6/12 12:03:14.1234","2009/6/12 12:03:15.1234","2009/6/12 12:03:16.1234","2009/6/12 12:03:17.1234","2009/6/12 12:03:18.1234","2009/6/12 12:03:19.1234","2009/6/12 12:03:20.1234","2009/6/12 12:03:21.1234","2009/6/12 12:03:22.1234","2009/6/12 12:03:23.1234","2009/6/12 12:03:24.1234","2009/6/12 12:03:25.1234","2009/6/12 12:03:26.1234","2009/6/12 12:03:27.1234","2009/6/12 12:03:28.1234","2009/6/12 12:03:29.1234","2009/6/12 12:03:30.1234","2009/6/12 12:03:31.1234","2009/6/12 12:03:32.1234","2009/6/12 12:03:33.1234","2009/6/12 12:03:34.1234","2009/6/12 12:03:35.1234","2009/6/12 12:03:36.1234","2009/6/12 12:03:37.1234","2009/6/12 12:03:38.1234","2009/6/12 12:03:39.1234","2009/6/12 12:03:40.1234","2009/6/12 12:03:41.1234","2009/6/12 12:03:42.1234","2009/6/12 12:03:43.1234","2009/6/12 12:03:44.1234","2009/6/12 12:03:45.1234","2009/6/12 12:03:46.1234","2009/6/12 12:03:47.1234","2009/6/12 12:03:48.1234","2009/6/12 12:03:49.1234","2009/6/12 12:03:50.1234","2009/6/12 12:03:51.1234","2009/6/12 12:03:52.1234","2009/6/12 12:03:53.1234","2009/6/12 12:03:54.1234","2009/6/12 12:03:55.1234","2009/6/12 12:03:56.1234","2009/6/12 12:03:57.1234","2009/6/12 12:03:58.1234","2009/6/12 12:04:59.1234","2009/6/12 12:04:00.1234","2009/6/12 12:04:01.1234","2009/6/12 12:04:02.1234","2009/6/12 12:04:03.1234","2009/6/12 12:04:04.1234","2009/6/12 12:04:05.1234","2009/6/12 12:04:06.1234","2009/6/12 12:04:07.1234","2009/6/12 12:04:08.1234","2009/6/12 12:04:09.1234","2009/6/12 12:04:10.1234","2009/6/12 12:04:11.1234","2009/6/12 12:04:12.1234","2009/6/12 12:04:13.1234","2009/6/12 12:04:14.1234","2009/6/12 12:04:15.1234","2009/6/12 12:04:16.1234","2009/6/12 12:04:17.1234","2009/6/12 12:04:18.1234","2009/6/12 12:04:19.1234","2009/6/12 12:04:20.1234","2009/6/12 12:04:21.1234","2009/6/12 12:04:22.1234","2009/6/12 12:04:23.1234","2009/6/12 12:04:24.1234","2009/6/12 12:04:25.1234","2009/6/12 12:04:26.1234","2009/6/12 12:04:27.1234","2009/6/12 12:04:28.1234","2009/6/12 12:04:29.1234","2009/6/12 12:04:30.1234","2009/6/12 12:04:31.1234","2009/6/12 12:04:32.1234","2009/6/12 12:04:33.1234","2009/6/12 12:04:34.1234","2009/6/12 12:04:35.1234","2009/6/12 12:04:36.1234","2009/6/12 12:04:37.1234","2009/6/12 12:04:38.1234","2009/6/12 12:04:39.1234","2009/6/12 12:04:40.1234","2009/6/12 12:04:41.1234","2009/6/12 12:04:42.1234","2009/6/12 12:04:43.1234","2009/6/12 12:04:44.1234","2009/6/12 12:04:45.1234","2009/6/12 12:04:46.1234","2009/6/12 12:04:47.1234","2009/6/12 12:04:48.1234","2009/6/12 12:04:49.1234","2009/6/12 12:04:50.1234","2009/6/12 12:04:51.1234","2009/6/12 12:04:52.1234","2009/6/12 12:04:53.1234","2009/6/12 12:04:54.1234","2009/6/12 12:04:55.1234","2009/6/12 12:04:56.1234","2009/6/12 12:04:57.1234","2009/6/12 12:04:58.1234","2009/6/12 12:04:59.1234","2009/6/12 12:05:00.1234","2009/6/12 12:05:01.1234","2009/6/12 12:05:02.1234","2009/6/12 12:05:03.1234","2009/6/12 12:05:04.1234","2009/6/12 12:05:05.1234","2009/6/12 12:05:06.1234","2009/6/12 12:05:07.1234","2009/6/12 12:05:08.1234","2009/6/12 12:05:09.1234","2009/6/12 12:05:10.1234","2009/6/12 12:05:11.1234","2009/6/12 12:05:12.1234","2009/6/12 12:05:13.1234","2009/6/12 12:05:14.1234","2009/6/12 12:05:15.1234","2009/6/12 12:05:16.1234","2009/6/12 12:05:17.1234","2009/6/12 12:05:18.1234","2009/6/12 12:05:19.1234","2009/6/12 12:05:20.1234","2009/6/12 12:05:21.1234","2009/6/12 12:05:22.1234","2009/6/12 12:05:23.1234","2009/6/12 12:05:24.1234","2009/6/12 12:05:25.1234","2009/6/12 12:05:26.1234","2009/6/12 12:05:27.1234","2009/6/12 12:05:28.1234","2009/6/12 12:05:29.1234","2009/6/12 12:05:30.1234","2009/6/12 12:05:31.1234","2009/6/12 12:05:32.1234","2009/6/12 12:05:33.1234","2009/6/12 12:05:34.1234","2009/6/12 12:05:35.1234","2009/6/12 12:05:36.1234","2009/6/12 12:05:37.1234","2009/6/12 12:05:38.1234","2009/6/12 12:05:39.1234","2009/6/12 12:05:40.1234","2009/6/12 12:05:41.1234","2009/6/12 12:05:42.1234","2009/6/12 12:05:43.1234","2009/6/12 12:05:44.1234","2009/6/12 12:05:45.1234","2009/6/12 12:05:46.1234","2009/6/12 12:05:47.1234","2009/6/12 12:05:48.1234","2009/6/12 12:05:49.1234","2009/6/12 12:05:50.1234","2009/6/12 12:05:51.1234","2009/6/12 12:05:52.1234","2009/6/12 12:05:53.1234","2009/6/12 12:05:54.1234","2009/6/12 12:05:55.1234","2009/6/12 12:05:56.1234","2009/6/12 12:05:57.1234","2009/6/12 12:05:58.1234","2009/6/12 12:05:59.1234"]},{"name":"xAxis2","gridIndex":1,"type":"category","boundaryGap":false,"axisLine":{"onZero":true},"position":"top","show":false,"data":["2009/6/12 12:01:00.1234","2009/6/12 12:01:01.1234","2009/6/12 12:01:02.1234","2009/6/12 12:01:03.1234","2009/6/12 12:01:04.1234","2009/6/12 12:01:05.1234","2009/6/12 12:01:06.1234","2009/6/12 12:01:07.1234","2009/6/12 12:01:08.1234","2009/6/12 12:01:09.1234","2009/6/12 12:01:10.1234","2009/6/12 12:01:11.1234","2009/6/12 12:01:12.1234","2009/6/12 12:01:13.1234","2009/6/12 12:01:14.1234","2009/6/12 12:01:15.1234","2009/6/12 12:01:16.1234","2009/6/12 12:01:17.1234","2009/6/12 12:01:18.1234","2009/6/12 12:01:19.1234","2009/6/12 12:01:20.1234","2009/6/12 12:01:21.1234","2009/6/12 12:01:22.1234","2009/6/12 12:01:23.1234","2009/6/12 12:01:24.1234","2009/6/12 12:01:25.1234","2009/6/12 12:01:26.1234","2009/6/12 12:01:27.1234","2009/6/12 12:01:28.1234","2009/6/12 12:01:29.1234","2009/6/12 12:01:30.1234","2009/6/12 12:01:31.1234","2009/6/12 12:01:32.1234","2009/6/12 12:01:33.1234","2009/6/12 12:01:34.1234","2009/6/12 12:01:35.1234","2009/6/12 12:01:36.1234","2009/6/12 12:01:37.1234","2009/6/12 12:01:38.1234","2009/6/12 12:01:39.1234","2009/6/12 12:01:40.1234","2009/6/12 12:01:41.1234","2009/6/12 12:01:42.1234","2009/6/12 12:01:43.1234","2009/6/12 12:01:44.1234","2009/6/12 12:01:45.1234","2009/6/12 12:01:46.1234","2009/6/12 12:01:47.1234","2009/6/12 12:01:48.1234","2009/6/12 12:01:49.1234","2009/6/12 12:01:50.1234","2009/6/12 12:01:51.1234","2009/6/12 12:01:52.1234","2009/6/12 12:01:53.1234","2009/6/12 12:01:54.1234","2009/6/12 12:01:55.1234","2009/6/12 12:01:56.1234","2009/6/12 12:01:57.1234","2009/6/12 12:01:58.1234","2009/6/12 12:01:59.1234","2009/6/12 12:02:00.1234","2009/6/12 12:02:01.1234","2009/6/12 12:02:02.1234","2009/6/12 12:02:03.1234","2009/6/12 12:02:04.1234","2009/6/12 12:02:05.1234","2009/6/12 12:02:06.1234","2009/6/12 12:02:07.1234","2009/6/12 12:02:08.1234","2009/6/12 12:02:09.1234","2009/6/12 12:02:10.1234","2009/6/12 12:02:11.1234","2009/6/12 12:02:12.1234","2009/6/12 12:02:13.1234","2009/6/12 12:02:14.1234","2009/6/12 12:02:15.1234","2009/6/12 12:02:16.1234","2009/6/12 12:02:17.1234","2009/6/12 12:02:18.1234","2009/6/12 12:02:19.1234","2009/6/12 12:02:20.1234","2009/6/12 12:02:21.1234","2009/6/12 12:02:22.1234","2009/6/12 12:02:23.1234","2009/6/12 12:02:24.1234","2009/6/12 12:02:25.1234","2009/6/12 12:02:26.1234","2009/6/12 12:02:27.1234","2009/6/12 12:02:28.1234","2009/6/12 12:02:29.1234","2009/6/12 12:02:30.1234","2009/6/12 12:02:31.1234","2009/6/12 12:02:32.1234","2009/6/12 12:02:33.1234","2009/6/12 12:02:34.1234","2009/6/12 12:02:35.1234","2009/6/12 12:02:36.1234","2009/6/12 12:02:37.1234","2009/6/12 12:02:38.1234","2009/6/12 12:02:39.1234","2009/6/12 12:02:40.1234","2009/6/12 12:02:41.1234","2009/6/12 12:02:42.1234","2009/6/12 12:02:43.1234","2009/6/12 12:02:44.1234","2009/6/12 12:02:45.1234","2009/6/12 12:02:46.1234","2009/6/12 12:02:47.1234","2009/6/12 12:02:48.1234","2009/6/12 12:02:49.1234","2009/6/12 12:02:50.1234","2009/6/12 12:02:51.1234","2009/6/12 12:02:52.1234","2009/6/12 12:02:53.1234","2009/6/12 12:02:54.1234","2009/6/12 12:02:55.1234","2009/6/12 12:02:56.1234","2009/6/12 12:02:57.1234","2009/6/12 12:02:58.1234","2009/6/12 12:02:59.1234","2009/6/12 12:03:00.1234","2009/6/12 12:03:01.1234","2009/6/12 12:03:02.1234","2009/6/12 12:03:03.1234","2009/6/12 12:03:04.1234","2009/6/12 12:03:05.1234","2009/6/12 12:03:06.1234","2009/6/12 12:03:07.1234","2009/6/12 12:03:08.1234","2009/6/12 12:03:09.1234","2009/6/12 12:03:10.1234","2009/6/12 12:03:11.1234","2009/6/12 12:03:12.1234","2009/6/12 12:03:13.1234","2009/6/12 12:03:14.1234","2009/6/12 12:03:15.1234","2009/6/12 12:03:16.1234","2009/6/12 12:03:17.1234","2009/6/12 12:03:18.1234","2009/6/12 12:03:19.1234","2009/6/12 12:03:20.1234","2009/6/12 12:03:21.1234","2009/6/12 12:03:22.1234","2009/6/12 12:03:23.1234","2009/6/12 12:03:24.1234","2009/6/12 12:03:25.1234","2009/6/12 12:03:26.1234","2009/6/12 12:03:27.1234","2009/6/12 12:03:28.1234","2009/6/12 12:03:29.1234","2009/6/12 12:03:30.1234","2009/6/12 12:03:31.1234","2009/6/12 12:03:32.1234","2009/6/12 12:03:33.1234","2009/6/12 12:03:34.1234","2009/6/12 12:03:35.1234","2009/6/12 12:03:36.1234","2009/6/12 12:03:37.1234","2009/6/12 12:03:38.1234","2009/6/12 12:03:39.1234","2009/6/12 12:03:40.1234","2009/6/12 12:03:41.1234","2009/6/12 12:03:42.1234","2009/6/12 12:03:43.1234","2009/6/12 12:03:44.1234","2009/6/12 12:03:45.1234","2009/6/12 12:03:46.1234","2009/6/12 12:03:47.1234","2009/6/12 12:03:48.1234","2009/6/12 12:03:49.1234","2009/6/12 12:03:50.1234","2009/6/12 12:03:51.1234","2009/6/12 12:03:52.1234","2009/6/12 12:03:53.1234","2009/6/12 12:03:54.1234","2009/6/12 12:03:55.1234","2009/6/12 12:03:56.1234","2009/6/12 12:03:57.1234","2009/6/12 12:03:58.1234","2009/6/12 12:04:59.1234","2009/6/12 12:04:00.1234","2009/6/12 12:04:01.1234","2009/6/12 12:04:02.1234","2009/6/12 12:04:03.1234","2009/6/12 12:04:04.1234","2009/6/12 12:04:05.1234","2009/6/12 12:04:06.1234","2009/6/12 12:04:07.1234","2009/6/12 12:04:08.1234","2009/6/12 12:04:09.1234","2009/6/12 12:04:10.1234","2009/6/12 12:04:11.1234","2009/6/12 12:04:12.1234","2009/6/12 12:04:13.1234","2009/6/12 12:04:14.1234","2009/6/12 12:04:15.1234","2009/6/12 12:04:16.1234","2009/6/12 12:04:17.1234","2009/6/12 12:04:18.1234","2009/6/12 12:04:19.1234","2009/6/12 12:04:20.1234","2009/6/12 12:04:21.1234","2009/6/12 12:04:22.1234","2009/6/12 12:04:23.1234","2009/6/12 12:04:24.1234","2009/6/12 12:04:25.1234","2009/6/12 12:04:26.1234","2009/6/12 12:04:27.1234","2009/6/12 12:04:28.1234","2009/6/12 12:04:29.1234","2009/6/12 12:04:30.1234","2009/6/12 12:04:31.1234","2009/6/12 12:04:32.1234","2009/6/12 12:04:33.1234","2009/6/12 12:04:34.1234","2009/6/12 12:04:35.1234","2009/6/12 12:04:36.1234","2009/6/12 12:04:37.1234","2009/6/12 12:04:38.1234","2009/6/12 12:04:39.1234","2009/6/12 12:04:40.1234","2009/6/12 12:04:41.1234","2009/6/12 12:04:42.1234","2009/6/12 12:04:43.1234","2009/6/12 12:04:44.1234","2009/6/12 12:04:45.1234","2009/6/12 12:04:46.1234","2009/6/12 12:04:47.1234","2009/6/12 12:04:48.1234","2009/6/12 12:04:49.1234","2009/6/12 12:04:50.1234","2009/6/12 12:04:51.1234","2009/6/12 12:04:52.1234","2009/6/12 12:04:53.1234","2009/6/12 12:04:54.1234","2009/6/12 12:04:55.1234","2009/6/12 12:04:56.1234","2009/6/12 12:04:57.1234","2009/6/12 12:04:58.1234","2009/6/12 12:04:59.1234","2009/6/12 12:05:00.1234","2009/6/12 12:05:01.1234","2009/6/12 12:05:02.1234","2009/6/12 12:05:03.1234","2009/6/12 12:05:04.1234","2009/6/12 12:05:05.1234","2009/6/12 12:05:06.1234","2009/6/12 12:05:07.1234","2009/6/12 12:05:08.1234","2009/6/12 12:05:09.1234","2009/6/12 12:05:10.1234","2009/6/12 12:05:11.1234","2009/6/12 12:05:12.1234","2009/6/12 12:05:13.1234","2009/6/12 12:05:14.1234","2009/6/12 12:05:15.1234","2009/6/12 12:05:16.1234","2009/6/12 12:05:17.1234","2009/6/12 12:05:18.1234","2009/6/12 12:05:19.1234","2009/6/12 12:05:20.1234","2009/6/12 12:05:21.1234","2009/6/12 12:05:22.1234","2009/6/12 12:05:23.1234","2009/6/12 12:05:24.1234","2009/6/12 12:05:25.1234","2009/6/12 12:05:26.1234","2009/6/12 12:05:27.1234","2009/6/12 12:05:28.1234","2009/6/12 12:05:29.1234","2009/6/12 12:05:30.1234","2009/6/12 12:05:31.1234","2009/6/12 12:05:32.1234","2009/6/12 12:05:33.1234","2009/6/12 12:05:34.1234","2009/6/12 12:05:35.1234","2009/6/12 12:05:36.1234","2009/6/12 12:05:37.1234","2009/6/12 12:05:38.1234","2009/6/12 12:05:39.1234","2009/6/12 12:05:40.1234","2009/6/12 12:05:41.1234","2009/6/12 12:05:42.1234","2009/6/12 12:05:43.1234","2009/6/12 12:05:44.1234","2009/6/12 12:05:45.1234","2009/6/12 12:05:46.1234","2009/6/12 12:05:47.1234","2009/6/12 12:05:48.1234","2009/6/12 12:05:49.1234","2009/6/12 12:05:50.1234","2009/6/12 12:05:51.1234","2009/6/12 12:05:52.1234","2009/6/12 12:05:53.1234","2009/6/12 12:05:54.1234","2009/6/12 12:05:55.1234","2009/6/12 12:05:56.1234","2009/6/12 12:05:57.1234","2009/6/12 12:05:58.1234","2009/6/12 12:05:59.1234"]}],"yAxis":[{"name":"电机电流值","gridIndex":0,"type":"value","inverse":false,"minInterval":1},{"name":"","gridIndex":1,"type":"value","inverse":false,"minInterval":1}],"series":[{"name":"曲线1","type":"line","xAxisIndex":0,"yAxisIndex":0,"symbolSize":4,"step":"","data":[0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0]},{"name":"曲线2","type":"line","xAxisIndex":1,"yAxisIndex":1,"symbolSize":4,"step":"end","data":[0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0]},{"name":"曲线3","type":"line","xAxisIndex":1,"yAxisIndex":1,"symbolSize":4,"step":"end","data":[0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0]},{"name":"曲线4","type":"line","xAxisIndex":1,"yAxisIndex":1,"symbolSize":4,"step":"end","data":[0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0]}]}';
        var elements = JSON.parse(data);
        option = elements;
    
        var dom = document.getElementById('Main');
        var myChart = echarts.init(dom, 'dark', {
          renderer: 'canvas'
        });
        if (elements && typeof elements === 'object') {
          myChart.setOption(elements);
        }
        window.addEventListener('resize', myChart.resize);
    
    }

</script>

可以拿着测试功能实现接口这个function做测试，我现在这样做就是相当于不在加载页面时生成曲线图了，后台拼接好后直接输出到页面既解决曲线轴线的添加问题页避开了渲染不应在主进程中调用的问题，jsPushData方法可以后续给已经有的曲线继续添加数据。

xaml.cs:

using System;
using System.IO;
using System.Runtime.InteropServices;
using System.Windows;
using System.Windows.Controls;
using Newtonsoft.Json;
using System.Text;
using System.Net;

namespace PTU.Xaml
{
    /// <summary>
    /// DoorController.xaml 的交互逻辑
    /// </summary>
    public partial class DoorController : Page 
    {
        static string[] timeData = new string[] {
    "2009/6/12 12:01:00.1234","2009/6/12 12:01:01.1234","2009/6/12 12:01:02.1234","2009/6/12 12:01:03.1234","2009/6/12 12:01:04.1234","2009/6/12 12:01:05.1234","2009/6/12 12:01:06.1234","2009/6/12 12:01:07.1234",
"2009/6/12 12:01:08.1234","2009/6/12 12:01:09.1234","2009/6/12 12:01:10.1234","2009/6/12 12:01:11.1234","2009/6/12 12:01:12.1234","2009/6/12 12:01:13.1234","2009/6/12 12:01:14.1234","2009/6/12 12:01:15.1234",
"2009/6/12 12:01:16.1234","2009/6/12 12:01:17.1234","2009/6/12 12:01:18.1234","2009/6/12 12:01:19.1234","2009/6/12 12:01:20.1234","2009/6/12 12:01:21.1234","2009/6/12 12:01:22.1234","2009/6/12 12:01:23.1234",
"2009/6/12 12:01:24.1234","2009/6/12 12:01:25.1234","2009/6/12 12:01:26.1234","2009/6/12 12:01:27.1234","2009/6/12 12:01:28.1234","2009/6/12 12:01:29.1234","2009/6/12 12:01:30.1234","2009/6/12 12:01:31.1234",
"2009/6/12 12:01:32.1234","2009/6/12 12:01:33.1234","2009/6/12 12:01:34.1234","2009/6/12 12:01:35.1234","2009/6/12 12:01:36.1234","2009/6/12 12:01:37.1234","2009/6/12 12:01:38.1234","2009/6/12 12:01:39.1234",
"2009/6/12 12:01:40.1234","2009/6/12 12:01:41.1234","2009/6/12 12:01:42.1234","2009/6/12 12:01:43.1234","2009/6/12 12:01:44.1234","2009/6/12 12:01:45.1234","2009/6/12 12:01:46.1234","2009/6/12 12:01:47.1234",
"2009/6/12 12:01:48.1234","2009/6/12 12:01:49.1234","2009/6/12 12:01:50.1234","2009/6/12 12:01:51.1234","2009/6/12 12:01:52.1234","2009/6/12 12:01:53.1234","2009/6/12 12:01:54.1234","2009/6/12 12:01:55.1234",
"2009/6/12 12:01:56.1234","2009/6/12 12:01:57.1234","2009/6/12 12:01:58.1234","2009/6/12 12:01:59.1234","2009/6/12 12:02:00.1234","2009/6/12 12:02:01.1234","2009/6/12 12:02:02.1234","2009/6/12 12:02:03.1234",
"2009/6/12 12:02:04.1234","2009/6/12 12:02:05.1234","2009/6/12 12:02:06.1234","2009/6/12 12:02:07.1234","2009/6/12 12:02:08.1234","2009/6/12 12:02:09.1234","2009/6/12 12:02:10.1234","2009/6/12 12:02:11.1234",
"2009/6/12 12:02:12.1234","2009/6/12 12:02:13.1234","2009/6/12 12:02:14.1234","2009/6/12 12:02:15.1234","2009/6/12 12:02:16.1234","2009/6/12 12:02:17.1234","2009/6/12 12:02:18.1234","2009/6/12 12:02:19.1234",
"2009/6/12 12:02:20.1234","2009/6/12 12:02:21.1234","2009/6/12 12:02:22.1234","2009/6/12 12:02:23.1234","2009/6/12 12:02:24.1234","2009/6/12 12:02:25.1234","2009/6/12 12:02:26.1234","2009/6/12 12:02:27.1234",
"2009/6/12 12:02:28.1234","2009/6/12 12:02:29.1234","2009/6/12 12:02:30.1234","2009/6/12 12:02:31.1234","2009/6/12 12:02:32.1234","2009/6/12 12:02:33.1234","2009/6/12 12:02:34.1234","2009/6/12 12:02:35.1234",
"2009/6/12 12:02:36.1234","2009/6/12 12:02:37.1234","2009/6/12 12:02:38.1234","2009/6/12 12:02:39.1234","2009/6/12 12:02:40.1234","2009/6/12 12:02:41.1234","2009/6/12 12:02:42.1234","2009/6/12 12:02:43.1234",
"2009/6/12 12:02:44.1234","2009/6/12 12:02:45.1234","2009/6/12 12:02:46.1234","2009/6/12 12:02:47.1234","2009/6/12 12:02:48.1234","2009/6/12 12:02:49.1234","2009/6/12 12:02:50.1234","2009/6/12 12:02:51.1234",
"2009/6/12 12:02:52.1234","2009/6/12 12:02:53.1234","2009/6/12 12:02:54.1234","2009/6/12 12:02:55.1234","2009/6/12 12:02:56.1234","2009/6/12 12:02:57.1234","2009/6/12 12:02:58.1234","2009/6/12 12:02:59.1234",
"2009/6/12 12:03:00.1234","2009/6/12 12:03:01.1234","2009/6/12 12:03:02.1234","2009/6/12 12:03:03.1234","2009/6/12 12:03:04.1234","2009/6/12 12:03:05.1234","2009/6/12 12:03:06.1234","2009/6/12 12:03:07.1234",
"2009/6/12 12:03:08.1234","2009/6/12 12:03:09.1234","2009/6/12 12:03:10.1234","2009/6/12 12:03:11.1234","2009/6/12 12:03:12.1234","2009/6/12 12:03:13.1234","2009/6/12 12:03:14.1234","2009/6/12 12:03:15.1234",
"2009/6/12 12:03:16.1234","2009/6/12 12:03:17.1234","2009/6/12 12:03:18.1234","2009/6/12 12:03:19.1234","2009/6/12 12:03:20.1234","2009/6/12 12:03:21.1234","2009/6/12 12:03:22.1234","2009/6/12 12:03:23.1234",
"2009/6/12 12:03:24.1234","2009/6/12 12:03:25.1234","2009/6/12 12:03:26.1234","2009/6/12 12:03:27.1234","2009/6/12 12:03:28.1234","2009/6/12 12:03:29.1234","2009/6/12 12:03:30.1234","2009/6/12 12:03:31.1234","2009/6/12 12:03:32.1234","2009/6/12 12:03:33.1234",
"2009/6/12 12:03:34.1234","2009/6/12 12:03:35.1234","2009/6/12 12:03:36.1234","2009/6/12 12:03:37.1234","2009/6/12 12:03:38.1234","2009/6/12 12:03:39.1234","2009/6/12 12:03:40.1234","2009/6/12 12:03:41.1234",
"2009/6/12 12:03:42.1234","2009/6/12 12:03:43.1234","2009/6/12 12:03:44.1234","2009/6/12 12:03:45.1234","2009/6/12 12:03:46.1234","2009/6/12 12:03:47.1234","2009/6/12 12:03:48.1234","2009/6/12 12:03:49.1234",
"2009/6/12 12:03:50.1234","2009/6/12 12:03:51.1234","2009/6/12 12:03:52.1234","2009/6/12 12:03:53.1234","2009/6/12 12:03:54.1234","2009/6/12 12:03:55.1234","2009/6/12 12:03:56.1234","2009/6/12 12:03:57.1234",
"2009/6/12 12:03:58.1234","2009/6/12 12:04:59.1234","2009/6/12 12:04:00.1234","2009/6/12 12:04:01.1234","2009/6/12 12:04:02.1234","2009/6/12 12:04:03.1234","2009/6/12 12:04:04.1234","2009/6/12 12:04:05.1234",
"2009/6/12 12:04:06.1234","2009/6/12 12:04:07.1234","2009/6/12 12:04:08.1234","2009/6/12 12:04:09.1234","2009/6/12 12:04:10.1234","2009/6/12 12:04:11.1234","2009/6/12 12:04:12.1234",
"2009/6/12 12:04:13.1234","2009/6/12 12:04:14.1234","2009/6/12 12:04:15.1234","2009/6/12 12:04:16.1234","2009/6/12 12:04:17.1234","2009/6/12 12:04:18.1234","2009/6/12 12:04:19.1234","2009/6/12 12:04:20.1234",
"2009/6/12 12:04:21.1234","2009/6/12 12:04:22.1234","2009/6/12 12:04:23.1234","2009/6/12 12:04:24.1234","2009/6/12 12:04:25.1234","2009/6/12 12:04:26.1234","2009/6/12 12:04:27.1234","2009/6/12 12:04:28.1234",
"2009/6/12 12:04:29.1234","2009/6/12 12:04:30.1234","2009/6/12 12:04:31.1234","2009/6/12 12:04:32.1234","2009/6/12 12:04:33.1234","2009/6/12 12:04:34.1234","2009/6/12 12:04:35.1234","2009/6/12 12:04:36.1234",
"2009/6/12 12:04:37.1234","2009/6/12 12:04:38.1234","2009/6/12 12:04:39.1234","2009/6/12 12:04:40.1234","2009/6/12 12:04:41.1234","2009/6/12 12:04:42.1234","2009/6/12 12:04:43.1234","2009/6/12 12:04:44.1234",
"2009/6/12 12:04:45.1234","2009/6/12 12:04:46.1234","2009/6/12 12:04:47.1234","2009/6/12 12:04:48.1234","2009/6/12 12:04:49.1234","2009/6/12 12:04:50.1234","2009/6/12 12:04:51.1234","2009/6/12 12:04:52.1234",
"2009/6/12 12:04:53.1234","2009/6/12 12:04:54.1234","2009/6/12 12:04:55.1234","2009/6/12 12:04:56.1234","2009/6/12 12:04:57.1234","2009/6/12 12:04:58.1234","2009/6/12 12:04:59.1234","2009/6/12 12:05:00.1234",
"2009/6/12 12:05:01.1234","2009/6/12 12:05:02.1234","2009/6/12 12:05:03.1234","2009/6/12 12:05:04.1234","2009/6/12 12:05:05.1234","2009/6/12 12:05:06.1234","2009/6/12 12:05:07.1234","2009/6/12 12:05:08.1234",
"2009/6/12 12:05:09.1234","2009/6/12 12:05:10.1234","2009/6/12 12:05:11.1234","2009/6/12 12:05:12.1234","2009/6/12 12:05:13.1234","2009/6/12 12:05:14.1234","2009/6/12 12:05:15.1234","2009/6/12 12:05:16.1234",
"2009/6/12 12:05:17.1234","2009/6/12 12:05:18.1234","2009/6/12 12:05:19.1234","2009/6/12 12:05:20.1234","2009/6/12 12:05:21.1234","2009/6/12 12:05:22.1234","2009/6/12 12:05:23.1234","2009/6/12 12:05:24.1234",
"2009/6/12 12:05:25.1234","2009/6/12 12:05:26.1234","2009/6/12 12:05:27.1234","2009/6/12 12:05:28.1234","2009/6/12 12:05:29.1234","2009/6/12 12:05:30.1234","2009/6/12 12:05:31.1234","2009/6/12 12:05:32.1234",
"2009/6/12 12:05:33.1234","2009/6/12 12:05:34.1234","2009/6/12 12:05:35.1234","2009/6/12 12:05:36.1234","2009/6/12 12:05:37.1234","2009/6/12 12:05:38.1234","2009/6/12 12:05:39.1234","2009/6/12 12:05:40.1234",
"2009/6/12 12:05:41.1234","2009/6/12 12:05:42.1234","2009/6/12 12:05:43.1234","2009/6/12 12:05:44.1234","2009/6/12 12:05:45.1234","2009/6/12 12:05:46.1234","2009/6/12 12:05:47.1234","2009/6/12 12:05:48.1234",
"2009/6/12 12:05:49.1234","2009/6/12 12:05:50.1234","2009/6/12 12:05:51.1234","2009/6/12 12:05:52.1234","2009/6/12 12:05:53.1234","2009/6/12 12:05:54.1234","2009/6/12 12:05:55.1234","2009/6/12 12:05:56.1234",
"2009/6/12 12:05:57.1234","2009/6/12 12:05:58.1234","2009/6/12 12:05:59.1234",
     };
        static int[] dt1 = new int[] { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 };
        static string xAxis1 = "曲线1";
        static string xAxis2 = "曲线2";
        static string[] legend = new string[] { "曲线1","曲线2", "曲线3", "曲线4" };

        static WebBrowser wb1 = new WebBrowser();
        public DoorController()
        {
            InitializeComponent();
            string path = Directory.GetCurrentDirectory() + "\\Xaml\\FenXiQuXian.html";
            var Url = new Uri(path);
            Web.ObjectForScripting = new CallbackClass();
            Web.Navigate(Url);
        }
        
        private void Button_Click_Add(object sender, RoutedEventArgs e)
        {
            try
            {
                var option = new
                {
                    title = new {
                        text = "",
                        left = "center"
                    },
                    tooltip = new {
                        trigger = "axis",
                        axisPointer = new {
                            animation = false
                        }
                    },
                    legend = new {
                        left = 10,
                        data = legend
                    },
                    toolbox = new {
                        feature = new {
                            dataZoom = new { yAxisIndex = "none" },
                            restore = new { },
                            saveAsImage = new { }
                        }
                    },
                    axisPointer = new {
                        link = new[] {
                            new { xAxisIndex = "all" }
                        }
                    },
                    dataZoom = new[] {
                        new
                        {
                            show = true,
                            type = "",
                            realtime = true,
                            start = 30,
                            end = 70,
                            xAxisIndex = new[] { 0, 1, 2 }
                        },
                        new
                        {
                            show = true,
                            type = "inside",
                            realtime = true,
                            start = 30,
                            end = 70,
                            xAxisIndex = new[] { 0, 1, 2 }
                        }
                    },
                    grid = new[] {
                        new {
                            left = 80,
                            right = 50,
                            top = "30px",
                            height = "300px"
                        },
                        new {
                            left = 80,
                            right = 50,
                            top = "48%",
                            height = "20px"
                        },
                        new {
                            left = 80,
                            right = 50,
                            top = "52%",
                            height = "20px"
                        }
                    },
                    xAxis = new[] {
                    new  {
                        name = "xAxis1",
                        gridIndex = 0,
                        type = "category",
                        boundaryGap = false,
                        axisLine = new { onZero = true },
                        position = "bottom",
                        show = true,
                        data= timeData
                    },
                    new  {
                        name = "xAxis2",
                        gridIndex = 1,
                        type = "category",
                        boundaryGap = false,
                        axisLine = new { onZero = true },
                        position = "top",
                        show = false,
                        data= timeData
                      },
                    new  {
                        name = "xAxis3",
                        gridIndex = 2,
                        type = "category",
                        boundaryGap = false,
                        axisLine = new { onZero = true },
                        position = "top",
                        show = false,
                        data= timeData
                      }
                    },
                    yAxis = new[]{
                        new {
                            name = "曲线1",
                            gridIndex = 0,
                            nameLocation = "center",
                            nameRotate = 0,// 将名称旋转90度，使其横向显示
                            nameTextStyle = new {
                                align = "right", // 设置文字对齐方式
                                verticalAlign = "middle", // 设置文字垂直对齐方式
                            },
                            type = "value",
                            inverse = false,
                            minInterval = 1
                        },
                        new {
                            name = "曲线2",
                            gridIndex = 1,
                            nameLocation = "center",
                            nameRotate = 0,// 将名称旋转90度，使其横向显示
                            nameTextStyle = new {
                                align = "right", // 设置文字对齐方式
                                verticalAlign = "middle", // 设置文字垂直对齐方式
                            },
                            type = "value",
                            inverse = false,
                            minInterval = 1
                        },
                        new {
                            name = "曲线3",
                            gridIndex = 2,
                            nameLocation = "center",
                            nameRotate = 0,// 将名称旋转90度，使其横向显示
                            nameTextStyle = new {
                                align = "right", // 设置文字对齐方式
                                verticalAlign = "middle", // 设置文字垂直对齐方式
                            },
                            type = "value",
                            inverse = false,
                            minInterval = 1
                        }
                    },
                    series = new[] {
                      new {
                        name= "曲线1", type= "line", xAxisIndex= 0, yAxisIndex= 0, symbolSize= 4,step= "",
                        data = dt1
                      },
                      new {
                        name= "曲线2", type= "line", xAxisIndex= 1, yAxisIndex= 1, symbolSize= 4,step= "end",
                        data = dt1
                      },
                      new {
                        name= "曲线3", type= "line", xAxisIndex= 2, yAxisIndex= 2, symbolSize= 4, step= "end",
                        data = dt1
                      },
                      new {
                        name= "曲线4", type= "line", xAxisIndex= 2, yAxisIndex= 2, symbolSize= 4, step= "end",
                        data = dt1
                      },
                    }
                };
                var data = JsonConvert.SerializeObject(option);
                Web.InvokeScript("UpdateData", data);
            }
            catch (Exception ex)
            {
                var msg = ex.Message;
            }            
        }

        private void Button_Click_Show(object sender, RoutedEventArgs e)
        {
            try
            {
                Web.InvokeScript("addLegend", "测试");
            }
            catch (Exception ex)
            {
                var msg = ex.Message;
            }
        }

        
        /// <summary>  
        /// 提供给HTML页面JS调用方法的类的实例  
        /// </summary>  
        [ComVisible(true)]
        public class CallbackClass
        {
            /// <summary>  
            /// JS页面调用的方法  
            /// </summary>  
            public void AddlegendAndAxis()
            {
                wb1.InvokeScript("jsPushData", legend);
                //new DoorController().text();
            }
        }


    }

}

以上就实现了多轴曲线图功能。

总结：

        自己一个人研究有点费劲，主要是没个交流的容易钻牛角尖还出不来，这里分享一下我的制作过程，虽然还是有好多的问题只是揭过去了，但是这里基本实现了后台处理数据并展示到页面的功能，做到这一步之后就可以使用循环添加轴线和曲线了，希望能帮助到需要使用这种功能或者正在学习使用echarts的你。

效果展示：

点击添加曲线按钮后添加到的页面，下面的拉动框可以放大缩小左右拖动，鼠标放到曲线上有具体数据展示，左上角的曲线名称电机可以隐藏或展示。

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
Web前端最全剑指Offer——Trie树(字典树)_节点中有多个字母的trie，面试官突击一问
实现使用SendInput函数来模拟键盘输入
基于SpringBoot的实习管理系统的设计与实现【源码+LW+部署讲解】
开源项目：创新与协作的时代浪潮
【Java】-- 接口
OpenCV 图像旋转和平移 数学和代码原理详解
nvm报错：Error retrieving “http://npm.taobao.org/mirrors/node/index.json“: HTTP Status 404
网站忘记管理员密码怎么办？
单总线数字传感器DS18B20使用总结
衡水二中2021清华北大高考成绩查询,前进中的衡水二中，2019清华北大106人，成功绝非偶然...
;