Menu button01页面

qinbo

2021-09-16 47e10b936ccf6f1cf54a6cf69362474a2ec238c1

 widgetsTS/widget_/viewRight.html

@@ -4,16 +4,156 @@
<head>
    <script type="text/javascript" src="echart/echarts4.0.js"></script>
    <link href="echart/theme/shine.js" rel="stylesheet" />
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <script type="text/javascript" src="../../lib/jquery/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui.js"></script>
    <style>
        #top10Div {
            width: 100%;
            height: 50%;
            /* background-color: hotpink; */
            /* margin-bottom: 80px; */
            /* margin-top: 50px; */
        }

        #top10Div>table {
            width: 100%;
            height: 50%;
            background-color: rgba(0, 0, 0, 0);
            /* border-collapse:collapse; */
            /* color: aqua; */
            /* font: italic 400 16px "宋体"; */
            /* border-radius: 10px; */
        }

        .no_bgc_table{
            width: 100%;
            height: 50%;
            background-color: rgba(0, 0, 0, 0);
            color:rgba(255,255,255,.7);
        }
        
        .no_bgc_table_head{
            background-color: rgba(0, 0, 0, 0);
            color:rgba(255,255,255,.7);
        }
        table>tr>th {
            border-radius: 5px;
            background-color: rgba(0, 0, 0, 0);
            color:white;
        }

        .top_10_table tr {
            border-bottom: 1px solid rgba(77,255,255,.5);
        }

        .my_sep{
            width: 96%;
            /* text-align: center; */
            height: 2px;
            margin-left: 2%;
        }

    </style>
</head>

<body cl>
<!-- <body style="padding:5px;text-align:center;background-color: azure;"> -->

<div id="chart" style="width:100%;height:310px;"></div>
<!-- <div id="chart" style="width:100%;height:310px;"></div> -->
<div class="layui-row">
    <span class="layui-breadcrumb" lay-separator="|"  >
        <a href="#"></a>
        <a href="#" style="color: white!important;">历史折线图</a>
        <a href="#"></a>
      </span>
</div>
<div class="layui-row">
    <div id="echart" style="width:100%;height:300px;"></div>
</div>
<hr class="layui-border-blue my_sep">
<div class="layui-row">
    <span class="layui-breadcrumb" lay-separator="|"  >
        <a href="#"></a>
        <a href="#" style="color: white!important;">详细指标</a>
        <a href="#"></a>
      </span>
</div>
<div class="layui-row" style="padding-left:1%;padding-right:1%;">
    <table id="" class="layui-table no_bgc_table top_10_table"  lay-skin="nob">
        <thead>
            <tr style="background-color: rgba(0, 0, 0, 0); color: #FF5722;">
                <th style="font-weight: bold;">ID</th>
                <th style="font-weight: bold;">指标编码</th>
                <th style="font-weight: bold;">指标名称</th>
                <th style="font-weight: bold;">指标数值</th>
                <th style="font-weight: bold;">指标单位</th>
            </tr> 
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>01</td>
            <td>PM2.5</td>
            <td>30</td>
            <td>mg/m³</td>
        </tr>
        <tr>
            <td>1</td>
            <td>01</td>
            <td>PM2.5</td>
            <td>30</td>
            <td>mg/m³</td>
        </tr>
        <tr>
            <td>1</td>
            <td>01</td>
            <td>PM2.5</td>
            <td>30</td>
            <td>mg/m³</td>
        </tr>
        <tr>
            <td>1</td>
            <td>01</td>
            <td>PM2.5</td>
            <td>30</td>
            <td>mg/m³</td>
        </tr>
        <tr>
            <td>1</td>
            <td>01</td>
            <td>PM2.5</td>
            <td>30</td>
            <td>mg/m³</td>
        </tr>
        <tr>
            <td>1</td>
            <td>01</td>
            <td>PM2.5</td>
            <td>30</td>
            <td>mg/m³</td>
        </tr>
        <tr>
            <td>1</td>
            <td>01</td>
            <td>PM2.5</td>
            <td>30</td>
            <td>mg/m³</td>
        </tr>
        <tr>
            <td>1</td>
            <td>01</td>
            <td>PM2.5</td>
            <td>30</td>
            <td>mg/m³</td>
        </tr>
        </tbody>
    </table>   
</div>

<div id="echart" style="width:100%;height:300px;"></div>

<div id="indexDetail" style="width:100%;height:300px;">
    
</div>
<script>
    //对应widget.js中MyWidget实例化后的对象
    var thisWidget
@@ -514,11 +654,14 @@
    };


    var myChart = echarts.init(document.getElementById('chart'));
    //var myChart = echarts.init(document.getElementById('chart'));
    var myCharts = echarts.init(document.getElementById('echart'));

    myChart.setOption(option);
    //myChart.setOption(option);
    myCharts.setOption(options);
    function test(){
        console.log("left call right")
    }
</script>