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

开发环境 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. 标准C程序设计七---51

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  2. TStringList,快速解析 查找测试。。。很有用，再也不用 FOR 循环了

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABKAAAALHCAIAAAA2Gq0zAAAgAElEQVR4nOydeVgUV76wK5OZb5JJZi

  3. hdu 1565&hdu 1569(网络流--最小点权值覆盖)

    方格取数(1) Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  4. Go语言入门——数组、切片和映射（下）

    上篇主要介绍了Go语言里面常见的复合数据类型的声明和初始化. 这篇主要针对数组.切片和映射这些复合数据类型从其他几个方面介绍比较下. 1.遍历 不管是数组.切片还是映射结构,都是一种集合类型,要从这些 ...

  5. 初级Springboot（一）

    初级Springboot(一) 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 一.了解Springboot 做Java开发的小伙伴都知道,我们在做项目的时候,需要去写大量的配置文件 ...

  6. [Inside HotSpot] Java分代堆

    [Inside HotSpot] Java分代堆 1. 宇宙初始化 JVM在启动的时候会初始化各种结构,比如模板解释器,类加载器,当然也包括这篇文章的主题,Java堆.在hotspot源码结构中gc/ ...

  7. Network | NAT

    在计算机网络中,网络地址转换(Network Address Translation或简称NAT),也叫做网络掩蔽或者IP掩蔽(IP masquerading),是一种在IP封包通过路由器或防火墙时重 ...

  8. linux下kill某个应用

    linux命令行与桌面切换快捷键Ctr+Alt+F1,Ctr+Alt+F7 ps -e | grep abc sudo kill xyz

  9. luogu P1140 相似基因

    题目背景 大家都知道,基因可以看作一个碱基对序列.它包含了4种核苷酸,简记作A,C,G,T.生物学家正致力于寻找人类基因的功能,以利用于诊断疾病和发明药物. 在一个人类基因工作组的任务中,生物学家研究 ...

  10. kettle变量使用

    公司项目使用kettle重构之前的取数,先研究下日常的使用. 一.建立数据转换,表数据到表输出,其中表输入数据来自其他业务数据库,通过输入sql执行得到数据. 表输入: 表输出: 设置并行4个线程. ...