user_zyx
/
B20_UV_LogPC


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!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 = [];
        ///初始化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["CSXL"];
            var myData2 = DataY["CSYL"];
            var myData3 = DataY["CSZL"];
            //console.log(myData1)
            //console.log(myData2)
            //console.log(myData3)
            //console.log(myData4)
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: titleText
                },
                legend: {},
                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: 'CSXL',
                        type: 'line',
                        showSymbol: false,
                        data: myData1
                    },
                    {
                        name: 'CSYL',
                        type: 'line',
                        showSymbol: false,
                        data: myData2
                    },
                    {
                        name: 'CSZL',
                        type: 'line',
                        showSymbol: false,
                        data: myData3
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。 没明白为啥需要配置两次，不然没曲线图，奇怪。
            myChart.setOption(option);
            myChart.setOption(option);
        }
        //var xdata = "['1', '2', '3', '4', '5']";
        //var ydata = "{ 'WSZ1': [1, 3, 3, 5, 6], 'WSZ2': [12, 13, 11, 15, 17], 'WSZ3': [23, 22, 24, 22, 21], 'WSZ4': [34, 36, 35, 33, 39] }";
        //Init("测试数据", xdata, ydata);
    </script>
</body>

</html>