<%@ Page Title="" Language="C#" MasterPageFile="~/Book/Book.master" AutoEventWireup="true" CodeBehind="Chart.aspx.cs" Inherits="Book.Book.Chart" %>
<%@ Register src="../UserControls/area.ascx" tagname="area" tagprefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cont_form" runat="server">
    <script src="../Javascript/echarts/roomchart.js"></script>
    
     <div class="well"> 
          <uc1:area ID="area1" runat="server" OnAreaChanged="area1_changed" />
     </div>



   <div id="main" style="height:500px;border:1px solid #ccc;padding:10px; width:1000px"></div>




    <script>
        dataSource = <%=dataSource%>;
        function FormateData() {
            var categories = [];
            var datas = [];
            var _value = "0";
            var _name = "";
            for (var i = 0; i < dataSource.length; i++) {
                _name = dataSource[i].name + "";
                _value = dataSource[i].value;
                categories.push(_name);
                datas.push([{ name: _name, value: _value, itemStyle: labelTop }, { name: 'remain', value: (100 - _value), itemStyle: labelBottom }]);
            }
            return { category: categories, data: datas };
        };
        formatDataSource=FormateData(dataSource);
            


    </script>
       

      <script src="../Javascript/echarts/echarts.js"></script>
       

    <script type="text/javascript">
        require.config({
            packages: [
                {
                    name: 'echarts',
                    location: '../Javascript/echarts',
                    main: 'echarts'
                }
            ]
        });
         



        

        function PieOption() { 
            var _data = formatDataSource;
            var pie_category = _data.category;
            var pie_datas = _data.data;
            var length = pie_category.length;


            var items = [];

            for (var i = 0; i < length; i++) {
                var x = 0;
                var y = 0;
                var pointx = 10;
                var pointy = 30;

                var Mod = i % 5;
                var Remain = parseInt(i / 5);
                x = 20 * Mod;
                y = 55 * Remain;

                pointx = pointx + 20 * Mod;
                pointy = pointy + 40 * Remain;

                var item = {
                    type: 'pie',
                    center: [pointx + '%', pointy + '%'],
                    radius: radius,
                    y: y + '%',
                    x: x + '%',
                    itemStyle: labelFromatter,
                    data: pie_datas[i]
                };


                items.push(item); 
            }

            return items;
        }



        _option = {
            title: {
                text: '会议室使用状态图',
                x: 'center'
            },

            legend: {
                x: 'center',
                y: 'center',
                data: formatDataSource.category
            },

            toolbox: {
                show: false
            },
            series: PieOption()
        };




        require(
        [
            'echarts',
            'echarts/chart/pie' 
        ],

        function (ec) { 
            option = _option; 
            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption(  option  ); 
        }
    );
    </script>

   



</asp:Content>
