echarts 饼状图

最新推荐文章于 2022-05-07 19:43:56 发布

转载最新推荐文章于 2022-05-07 19:43:56 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/net064/p/10250950.html

文章标签：

#c# #测试 #xhtml

说明：这是我做项目时自己写的小例子，里面有冗余的参数。

开发环境 vs2012 asp.net mvc4 c#

1、显示效果

2、HTML代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EchartsPic.aspx.cs" Inherits="MvcAppTest.EchartsPic" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="ewJS/jquery.js"></script>
    <script src="ewJS/echarts.js"></script>
    <script src="ewJS/echartPicObject.js"></script>
    <script type="text/javascript">
        var yearMax = 2017;
        $(function () {
            GetGSList();
        });
        function GetGSList() {
            var html = '';
            $.ajax({
                type: 'post',
                url: 'Home/GetEarthPartList',
                data: { yearId: yearMax },
                dataType: 'json',
                success: function (d) {
                    var legendText = new Array();
                    var maxInt = d.totalEH;
                    var title3 = "用地分阶段查询";
                    var serailData = new Array();
                    $.each(d, function (index, val) {

                        switch (index) {
                     
                            case 'wgEH':

                                legendText.push('A类用地(亩)');
                                var obj = { value: val, name: 'A类用地(亩)' };
                                serailData.push(obj);
                                break;
                            case 'wjEH':
                                legendText.push('B类用地(亩)');
                                var obj = { value: val, name: 'B类用地(亩)' };
                                serailData.push(obj);
                                break;
                     
                            case 'gsEH':
                                legendText.push('C类用地(亩)');
                                var obj = { value: val, name: 'C类用地(亩)' };
                                serailData.push(obj);
                                break;
                            case 'gxEH':
                                legendText.push('D类用地(亩)');
                                var obj = { value: val, name: 'D类用地(亩)' };
                                serailData.push(obj);
                                break;
                            case 'ysEH':
                                legendText.push('E类用地(亩)');
                                var obj = { value: val, name: 'E类用地(亩)' };
                                serailData.push(obj);
                                break;
                            case 'zjEH':
                                legendText.push('F类用地(亩)');
                                var obj = { value: val, name: 'F类用地(亩)' };
                                serailData.push(obj);
                                break;
                            default:

                                break;


                        }
                    });

                    var picObject = new CreatPicObject("工业用地分阶段统计", "单位：亩", legendText, maxInt, title3, serailData);
                    var myChart = echarts.init(document.getElementById('divPic'));
                    myChart.setOption(picObject);
              


                },
                error: function (d) { console.log(d); }
            });
        }
    </script>
</head>
<body>
<div id="divPic" style="width:500px;height:500px;">

</div>
</body>
</html>

3、Home控制器的代码

  public JsonResult GetEarthPartList(string yearId)
        {
            EPTHZValueModel hzvalueModel = new EPTHZValueModel();
            hzvalueModel.gsEH = 1200;
            hzvalueModel.gxEH = 800;
            hzvalueModel.plEH = 300;
            hzvalueModel.wgEH = 1300;
            hzvalueModel.wjEH = 2300;
            hzvalueModel.ysEH = 130;
            hzvalueModel.zjEH = 345;
          
            decimal[] myArray = new decimal[] { hzvalueModel.gsEH, hzvalueModel.gxEH, hzvalueModel.wgEH, hzvalueModel.wjEH, hzvalueModel.plEH, hzvalueModel.ysEH, hzvalueModel.zjEH };
            hzvalueModel.totalEH = MaxO(myArray);
            return Json(hzvalueModel, JsonRequestBehavior.DenyGet);
        }

View Code

    private decimal MaxO(decimal[] myList)
        {
            decimal a = 0, b = 0;
            for (int i = 0; i < myList.Length; i++)
            {
                a = b - myList[i];
                if (a < 0)
                {
                    b = myList[i];
                }
            }
            return b;
        }

View Code

   public class EPTHZValueModel
    {
        public System.Decimal totalEH { get; set; }
        public System.Decimal wgEH { get; set; }
        public System.Decimal wjEH { get; set; }
        public System.Decimal plEH { get; set; }
        public System.Decimal gsEH { get; set; }
        public System.Decimal gxEH { get; set; }
        public System.Decimal ysEH { get; set; }
        public System.Decimal zjEH { get; set; }
    }