<!--
 * @Description: 这是***页面（组件）
 * @Date: 2021-04-02 15:30:32
 * @Author: Tao
 * @LastEditors: Tao
 * @LastEditTime: 2021-04-02 15:59:52
-->
<!--
 * @Description: 这是饼图页面（组件）
 * @Date: 2021-03-02 16:27:32
 * @Author: Tao
 * @LastEditors: Tao
 * @LastEditTime: 2021-04-02 13:25:45
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    // 离开页面保存功能代码(移动至此处)
    if (window.location.host.indexOf('127.0.0') === -1) {
        // 测试 && 开发：sycdev.com
        // 正式： shengyc.com
        document.domain = 'shengyc.com' || '';
    }
</script>
<link rel="stylesheet" href="../css/clearCss.css" type="text/css"/>
<script src="../layui/layui.all.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../css/柱形图.css" type="text/css"/>
<link rel="stylesheet" href="../css/饼图.css">

<style type="text/css">
  .layui-form-checkbox i{
    border-left:-1px;
  }
  .layui-form-checkbox{
      margin-right:0px;
  }
  .layui-form-radio{
      margin:0;
  }
  button[colorpicker-events="clear"]{
      display: none;
  }
  html,head,body{
      height: 100%;;
  }
 
</style>
<body>
    <div class="BarChart">
        <div class="Barchart_conter clearfix">
            <div class="BarChart_left left">
                <div class="BarChart_var clearfix">
                    <div class="left var_left">
                        <div style="margin-top:12px;margin-bottom:14px;font-size:14px">数据</div>
                        <div>
                            <form class="layui-form formBox">
                                <div style="margin-bottom:10px;font-size:14px">数据关联：</div>
                                <div class="showLin" style="margin-left:20px;width:400px;height: 32px;">
                                    <select lay-filter="data" name="city" id="data-relate" lay-verify="required">
                                        <option value="实时数据">实时数据</option>
                                        <option value="历史数据">历史数据</option>
                                        <!-- <option value="统计数据">统计数据</option> -->
                                        <option value="业务数据">业务数据</option>
                                      </select>
                                </div>
                            </form>
                            <form class="layui-form formBox" lay-filter="form-data" style="padding-top: 0; display: none;" id="data-sheet" >
                                <div style="margin-bottom:10px;font-size:14px">数据表：</div>
                                <div class="showLin" style="margin-left:20px;width:400px;height: 32px;">
                                    <select lay-filter="chart-data" name="city" id="chart-table" lay-verify="required">
                                        <!-- <option value="实时数据">实时数据</option>
                                        <option value="历史数据">历史数据</option>
                                        <option value="业务数据">业务数据</option> -->
                                      </select>
                                </div>
                            </form>
                        </div>
                        <div id="varTitle" class="varTitle">维度(3/10)</div>
                        <div class="table formBox1">
                            <table class="layui-hide" id="demo" lay-filter="demo"></table>
                            <div id ="pieAddTable" class="newAdd">
                                <i class="layui-icon layui-icon-add-1" style="color:rgba(64, 158, 255, 1)"></i>
                                新增
                            </div>
                        </div>
                        <!-- <div class="varTitle">横轴/维度</div>
                        <div class="varType">
                            <form class="layui-form">
                                <div style="width:90px;height: 32px;padding-bottom:14px">
                                    <select lay-filter="data" name="city" lay-verify="required">
                                        <option value="时间" selected>时间</option>
                                        <option value="变量">变量</option>
                                    </select>
                                </div>
                                <div>
                                    <div class="showLin" style="margin-right:24px">时间设值</div>
                                    <div class="showLin" style="margin-right:10px">最近</div>
                                    <div class="showLin" style="width:90px;height: 32px;">
                                        <input type="text" name="title" required  lay-verify="required" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="showLin" style="width:200px;height:32px">
                                        <select lay-filter="data" name="city" lay-verify="required">
                                            <option value="时间" selected>时间</option>
                                            <option value="变量">变量</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div> -->
                        <div id="realTime" style="display: block">
                            <div class="varTitle">指标</div>
                                <div class="varType" id="ax-variable" >
                                    <form class="layui-form">
                                        <div class="showLin" style="margin-right:24px">变量</div>
                                        <div class="showLin" style="width:200px;height:32px">
                                            <select lay-filter="data-variable" id="pie-data-time" name="city" placeholder="请选择" lay-verify="required">
                                            </select>
                                        </div>
                                    </form>
                                </div>
                                <!-- 第二个表格 -->
                                <div class="ax-table" id="ax-table" >
                                    <div class="table formBox1">
                                        <table class="layui-hide" id="table-demo" lay-filter="table-demo"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="valueAxis">
        <!-- 取值 -->
        <div class="selectAxis">
            <select lay-event="type" class="select" value="d.rangevalue" lay-ignore>
                    {{# for(let i=0;i<d.valueAxisArr.length;i++){ }}
                        {{# if(d.valueAxisArr[i].value == d.rangevalue){ }}
                        <option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option>
                        {{# }else{ }}
                        <option value="{{i}}">{{d.valueAxisArr[i].name}}</option>
                        {{# } }}
                    {{# } }}
            </select>
    </div>
    </script>
    <script src="../js/moment.js"></script>
    <script src="../js/jquery-1.10.2.min.js"></script>
    <!-- 引入axiox -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
    <script src="../utils/request.js"></script>
    <!-- <script src="../js/echarts.js"></script>
    <script src="../js/ecStat.js"></script> -->
    <script src="../js/dropdown.js"></script>
    <script>
        var echartsType = 'pie'
    </script>
    <script type="text/html" id="titleTpl">
        <!-- 变量配置 -->
        <div style="position:absolute;top:0;left:0;width:78%;height:100%">
            <input lay-event="var" id="varIpt" name="selsectVar" class="varSelect layui-input"  value="{{d.selsectVar}}">
            <div class="varSelectBox">...</div>
        </div>
    </script>
    <script type="text/html" id="titleColor">
        <!-- 颜色选择器 -->
        <div id="color{{d.NO}}" class="colorBlock1 colorBlock2"></div>
        <!-- <div lay-event="delete" class="DataDelete">
            <i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i>
        </div> -->
        {{# if(d.NO === 1){ }}
            <span></span>
        {{# }else{ }}
            <div lay-event="delete" class="DataDelete">
                <i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i>
            </div>
        {{# } }}
    </script>
    <script src="../js/color.js"></script>
    <script src="./饼图.js"></script>
    <script src="../js/varEcharts.js"></script>
</body>
</html>