user_zyx
/
B20_UV_LogPC


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
							<!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["CSXR"];
            var myData2 = DataY["CSYR"];
            var myData3 = DataY["CSZR"];
            //console.log(myData1)
            //console.log(myData2)
            //console.log(myData3)
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: titleText
                },
                legend: {},
                toolbox: {
                    right: 10,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {}
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                axisPointer: {
                    link: { xAxisIndex: 'all' }
                },
                grid: [{
                    height: '35%'
                }, {
                    top: '55%',
                    height: '35%'
                }],
                xAxis: [
                    {
                        type: 'category',
                        splitLine: {
                            show: false
                        },
                        data: DataX
                    },
                    {
                        gridIndex: 1,
                        type: 'category',
                        splitLine: {
                            show: false
                        },
                        data: DataX,
                        position: 'bottom'
                    }],
                yAxis: [
                    {
                        type: 'value',
                        name: '单位：mm',
                        scale: true,
                        //splitLine: {
                        //    show: false
                        //}
                    },
                    {
                        gridIndex: 1,
                        type: 'value',
                        name: '单位：度',
                        scale: true,
                        //splitLine: {
                        //    show: false
                        //}
                    }
                ],

                series: [
                    {
                        name: 'CSXR',
                        type: 'line',
                        showSymbol: false,
                        data: myData1
                    },
                    {
                        name: 'CSYR',
                        type: 'line',
                        showSymbol: false,
                        data: myData2
                    },
                    {
                        name: 'CSZR',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        showSymbol: false,
                        data: myData3
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。 没明白为啥需要配置两次，不然没曲线图，奇怪。
            myChart.setOption(option);
            myChart.setOption(option);
        }
        //var xdata = "['1', '2', '3', '4', '5']";
        //var ydata = "{ 'CSXR': [1, 3, 3, 5, 6], 'CSYR': [12, 13, 11, 15, 17], 'CSZR': [23, 22, 24, 22, 21] }";
        //Init("测试数据", xdata, ydata);
    </script>
</body>

</html>