echarts 餅狀圖


 

說明:這是我做項目時自己寫的小例子,里面有冗余的參數。

開發環境 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; }
    }
View Code

4、js引用文件下載 

鏈接:https://pan.baidu.com/s/1ZUOmo5g_WU5Di3Rva7s7eQ
提取碼:wcf2


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM