user_zyx
/
B20_UV_LogPC


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!DOCTYPE html>
<html lang="zh-cn" 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" />
    <link href="../CSS/Main.css" type="text/css" rel="stylesheet" />
    <script src="../JS/jquery.min.js" type="text/javascript"></script>
    <title>Test</title>
</head>

<body>
    <div class="Container_right_echartsDiv">
        <div id="Div_Main" class="echartsDiv"></div>
    </div>
    <script src="../JS/echarts.min.js" type="text/javascript"></script>
    <script src="../JS/walden.js" type="text/javascript"></script>
    <!-- 按照习惯应该将Script放到指定的js文件中并引用，但是测试发现WPF不便调用js文件中的function，却可以直接调用html中的。-->
    <script>
        console.log("Echarts Version:" + echarts.version);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('Div_Main'), 'walden');

        var myData1 = [];
        var myData2 = [];
        var myData3 = [];
        var myData4 = [];
        ///初始化chart数据。 
        function Init(titleText, jsonX, jsonY) {
            console.log(jsonX)
            console.log(jsonY)
            //处理json数据
            var DataX = eval('(' + jsonX + ')');
            var DataY = eval('(' + jsonY + ')');
            console.log(DataX)
            console.log(DataY)
            var myData1 = DataY["WSZ1"];
            var myData2 = DataY["WSZ2"];
            var myData3 = DataY["WSZ3"];
            var myData4 = DataY["WSZ4"];
            console.log(myData1)
            console.log(myData2)
            console.log(myData3)
            console.log(myData4)
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: titleText
                },
                toolbox: {
                    right: 10,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {}
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    splitLine: {
                        show: false
                    },
                    data: DataX
                },
                yAxis: {
                    type:'value',
                    axisLable:{
                        formatter:'{value}mm'
                    },
                    boundaryGap: [0, '50%'],
                    scale: true,
                    splitLine: {
                        show: false
                    }
                },
                series: [
                    {
                        name: 'WSZ1',
                        type: 'line',
                        showSymbol: false,
                        data: myData1
                    }, {
                        name: 'WSZ2',
                        type: 'line',
                        showSymbol: false,
                        data: myData2
                    }, {
                        name: 'WSZ3',
                        type: 'line',
                        showSymbol: false,
                        data: myData3
                    }, {
                        name: 'WSZ4',
                        type: 'line',
                        showSymbol: false,
                        data: myData4
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        Init("测试", "['2024-07-09 17:24:35','2024-07-09 17:27:08']", "{'WSZ1':[1,2],'WSZ2':[2,3],'WSZ3':[3,4],'WSZ4':[4,5]}");
    </script>
</body>

</html>