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

开发环境 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. UVa11424 GCD - Extreme (I)

    直接两重循环O(n^2)算gcd……未免太耗时 枚举因数a和a的倍数n,考虑gcd(i,n)==a的i数量(i<=n) 由于gcd(i,n)==a等价于gcd(i/a,n/a)==1,所以满足g ...

  2. 【MFC】Button控件和Picture Control的鼠标事件执行顺序

    1.Button控件鼠标事件执行顺序 (1) WM_LBUTTONDOWN (2) WM_LBUTTONUP (3) OnBnClickedButton1(); 2.Picture Control的鼠 ...

  3. error C2253: pure specifier or abstract override specifier only allowed on virtual

    1.用Visual Studio 2012编译下面代码时出现的错误: #define RTC_DISALLOW_COPY_AND_ASSIGN(TypeName) \ TypeName(const T ...

  4. 标准C程序设计七---75

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

  5. 反汇编角度->C++ const

    #include<iostream> #include<stdlib.h> using namespace std; const int &add( const int ...

  6. Scrapy学习-11-Selector对象使用

    Selector使用 使用背景 我需要使用类似spider项目中,response使用的xpath和css获取页面指定数据,但因为爬取页面较小我们不想创建一个spider项目时,就可以使用scrapy ...

  7. configure: error: off_t undefined; check your library configuration

    configure: error: off_t undefined; check your library configuration 发生背景: 编译PHP时出现的提示,报错信息为: configu ...

  8. LeetCode OJ--Search for a Range

    http://oj.leetcode.com/problems/search-for-a-range/ 要求复杂度为O(lgn),用二分查找的思想. #include <iostream> ...

  9. HDU 5794 A Simple Chess（杨辉三角+容斥原理+Lucas定理）

    题目链接 A Simple Chess 打表发现这其实是一个杨辉三角…… 然后发现很多格子上方案数都是0 对于那写可能可以到达的点(先不考虑障碍点),我们先叫做有效的点 对于那些障碍,如果不在有效点上 ...

  10. F#周报2019年第21期

    新闻 F#在GitHub上的开发仓库现在变为dotnet/fsharp Ionide 4.0路线图 Fable的五月公告 Visual Studio 2019版本16.1 WinUI 3.0路线图 欢 ...