本文主要是介绍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();}}}}
这篇关于Chart图表控件制作数据的饼状图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
