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

开发环境 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 = ;

            hzvalueModel.gxEH = ;

            hzvalueModel.plEH = ;

            hzvalueModel.wgEH = ;

            hzvalueModel.wjEH = ;

            hzvalueModel.ysEH = ;

            hzvalueModel.zjEH = ;

            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);

        }
    private decimal MaxO(decimal[] myList)

        {

            decimal a = , b = ;

            for (int i = ; i < myList.Length; i++)

            {

                a = b - myList[i];

                if (a < )

                {

                    b = myList[i];

                }

            }

            return b;

        }
   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; }

    }

4、js引用文件下载

链接：https://pan.baidu.com/s/1ZUOmo5g_WU5Di3Rva7s7eQ
提取码：wcf2

echarts 饼状图的更多相关文章

  1. Echarts 饼状图自定义颜色

    今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...

  2. jquery echarts 饼状图

    var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...

  3. echarts 饼状图调节 label和labelLine的位置

    原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...

  4. canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  5. ECharts饼状图添加事件

    和柱状图添加事件没有区别,详情如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  6. vue+element+echarts饼状图+可折叠列表

    html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...

  7. echarts 饼状图 改变折线长度

    $(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...

  8. Echarts饼状图

    <head> <meta charset="utf-8"> <title>ECharts</title> <script sr ...

  9. echarts饼状图位置设置

    series: { name: "流量占比分布", type: "pie", radius: ["40%", "60%" ...

随机推荐

  1. 视音频数据处理入门：RGB、YUV像素数据处理【转】

    转自:http://blog.csdn.net/leixiaohua1020/article/details/50534150 ==================================== ...

  2. RSA 公钥加密算法

    RSA公钥加密算法是1977年由Ron Rivest.Adi Shamirh和LenAdleman在(美国麻省理工学院)开发的. 这个算法的名字也是他们三个人名字首字母,RSA算法基于一个十分简单的数 ...

  3. java 8 LocalDateTime 20 例

    http://www.importnew.com/15637.html 伴随lambda表达式.streams以及一系列小优化,Java 8 推出了全新的日期时间API,在教程中我们将通过一些简单的实 ...

  4. cmake使用（CMakeList.txt）

    set(CMAKE_INCLUDE_CURRENT_DIR ON)#CMAKE_INCLUDE_CURRENT_DIR equal to INCLUDE_DIRECTORY(${CMAKE_CURRE ...

  5. luogu P1310 表达式的值

    题目描述 对于1 位二进制变量定义两种运算: 运算的优先级是: 先计算括号内的,再计算括号外的. “× ”运算优先于“⊕”运算,即计算表达式时,先计算× 运算,再计算⊕运算.例如:计算表达式A⊕B × ...

  6. [Bzoj3687]简单题（bitset）

    3687: 简单题 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1150  Solved: 565[Submit][Status][Discuss] ...

  7. Python 实现二维码生成和识别

    今天突然想给自己自己做个头像,然后还是二维码的形式,这样只要扫一扫就可以访问我的主页.然后就开始自己的苦逼之路... 其实实现二维码java,c#,C++等都可以实现:由于自己正在学python,所以 ...

  8. HttpClient通过Post方式发送Json数据

    服务器用的是Springmvc,接口内容: @ResponseBody @RequestMapping(value="/order",method=RequestMethod.PO ...

  9. Linux/ visual studio 编译使用Poco

    1. 下载源码包.在POCO的官方网站下载最新的POCO源码包.http://pocoproject.org/download/index.html2.解压源码包.下载的文件名是“poco-1.6.0 ...

  10. CSDN - 进程结束后new出的内存会回收吗？

    http://blog.csdn.net/stanjiang2010/article/details/5386647     关键词:内存回收