Chart图表控件制作数据的饼状图

Chart图表控件制作数据的饼状图

前台：

    <asp:HiddenField ID="jnum" runat="server" />
     <asp:HiddenField ID="lnum" runat="server" />
     <asp:HiddenField ID="snum" runat="server" />
     <asp:HiddenField ID="znum" runat="server" />

      <div class="count">
           <div class="lay1">  <asp:Label ID="Jcount" runat="server"></asp:Label></div>
           <div class="lay2"> <asp:Label ID="Label3" runat="server" Text="计算机类(册)"></asp:Label></div>           
    </div>
     <div class="count1">
           <div class="lay1">  <asp:Label ID="Lcount" runat="server"></asp:Label></div>
           <div class="lay2"> <asp:Label ID="Label2" runat="server" Text="历史类(册)"></asp:Label></div>           
    </div>
     <div class="count2">
           <div class="lay1">  <asp:Label ID="Scount" runat="server"></asp:Label></div>
           <div class="lay2"> <asp:Label ID="Label5" runat="server" Text="散文类(册)"></asp:Label></div>           
    </div>
     <div class="count3">
           <div class="lay1">  <asp:Label ID="Zcount" runat="server"></asp:Label></div>
           <div class="lay2"> <asp:Label ID="Label7" runat="server" Text="哲学类(册)"></asp:Label></div>           
    </div>
    <div id="main-bing" style="width: 100%; height: 400px;"></div>

</form>
<script src="../js/jquery.min.js"></script>
<script src="../layui/echarts.min.js"></script>
<script>
    var Jnum = $(':hidden[id$=jnum]').val();
    var Lnum = $(':hidden[id$=lnum]').val();
    var Snum = $(':hidden[id$=snum]').val();
    var Znum = $(':hidden[id$=znum]').val();


    var chart = echarts.init(document.getElementById('main-bing'));

    // 配置
    chart.setOption({
        title: {
            text: '图书种类分布',
            subtext: 'xxxxxxxxx'
        },
        tooltip: {
            trigger: '图书种类分布',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                name: '图书种类分布',
                type: 'pie',
                radius: '70%',
                center: ['50%', '65%'],
                data: [
                    { value: Jnum, name: '计算机' },
                    { value: Lnum, name: '历史' },
                    { value: Snum, name: '散文' },
                    { value: Znum, name: '哲学' }
                ],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: '{b} : {c} ({d}%)'
                        },
                        labelLine: { show: true }
                    }
                }
            }
        ]
    });
</script>

.cs/// 获取页面中饼状图所需要的数据

     protected void Page_Load(object sender, EventArgs e)
    {
        //获取各类图书的数量
        using (SqlConnection conn = new SqlConnection(connString))
        {
            using (SqlCommand cmd = conn.CreateCommand())
            {
                try
                {
                    //调用存储过程
                    cmd.CommandType = System.Data.CommandType.StoredProcedure;
                    cmd.CommandText = "BookTypeCount";
                    conn.Open();
                    //用SqlDataAdapter执行
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    //创建一张表
                    DataTable table = new DataTable();
                    //填充表
                    da.Fill(table);
                    conn.Close();
                    //获取计算机类图书数量
                      string Jnum = table.Rows[0][0].ToString();
                    //获取历史类图书数量
                    string Lnum = table.Rows[1][0].ToString();
                    //获取散文类图书数量
                    string Snum = table.Rows[2][0].ToString();
                    //获取哲学类图书数量
                    string Znum = table.Rows[3][0].ToString();
                    //计算机类图书数量值赋值给隐藏控件元素
                    jnum.Value = Jnum.ToString();
                    //历史类图书数量值赋值给隐藏控件元素
                    lnum.Value = Lnum.ToString();
                    //散文类图书数量值赋值给隐藏控件元素
                     snum.Value = Snum.ToString();
                    //哲学类图书数量值赋值给隐藏控件元素
                    znum.Value = Znum.ToString();
                    //计算机类图书数量值赋值给页面显示控件控件元素
                    Jcount.Text = Jnum.ToString();
                    //历史类图书数量值赋值给页面显示控件控件元素
                    Lcount.Text = Lnum.ToString();
                    //散文类图书数量值赋值给页面显示控件控件元素
                    Scount.Text = Snum.ToString();
                    //哲学类图书数量值赋值给页面显示控件控件元素
                    Zcount.Text = Znum.ToString();
                          }
                //有异常时，执行数据库连接关闭操作
                catch
                {
                    conn.Close();
                }
            }
        }
    }