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

            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 饼状图的更多相关文章

Echarts 饼状图自定义颜色
今天给饼状图着色问题,找了好久终于找到了话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...
jquery echarts 饼状图
var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...
echarts 饼状图调节 label和labelLine的位置
原理使用一个默认颜色为透明的,并且只显示labelLine的饼状图然后通过调节这个透明的饼状图以达到修改labelLine的位置 echarts地址 https://gallery.echart ...
canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）
本章建议学习时间4小时学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
ECharts饼状图添加事件
和柱状图添加事件没有区别,详情如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...
vue+element+echarts饼状图+可折叠列表
html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...
echarts 饼状图改变折线长度
$(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...
Echarts饼状图
<head> <meta charset="utf-8"> <title>ECharts</title> <script sr ...
echarts饼状图位置设置
series: { name: "流量占比分布", type: "pie", radius: ["40%", "60%" ...

随机推荐

C#精髓第四讲 GridView 72般绝技
原文发布时间为:2008-08-03 -- 来源于本人的百度文章 [由搬家工具导入] 原文地址：http://blog.csdn.net/21aspnet/archive/2007/03/25/154 ...
batch.bat explaination
1.Echo 命令打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置. 语法 echo [{on|off}] [message] Sample篅echo of ...
Python Challenge 第五关
进入第五关,一张图和一行提示: pronounce it.右键源代码,只有一行注释:  peak hell 听起来熟 ...
AC日记——Number Sequence hdu 1711
Number Sequence Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
js-随机生成16进制颜色
<body onload="color()"></body> <script> function color(){ 方法一: document. ...
cmake ccmake
下载libqrencode源码编译过程 git clone https://github.com/fukuchi/libqrencode.git 2001 mkdir build 2002 cd ...
K&R——第五章指针与数组
#include <stdio.h> #define maxsize 5000 char buf[maxsize]; char *head = buf; char *new(int siz ...
Druid连接池工具类
package cn.zmh.PingCe; import com.alibaba.druid.pool.DruidDataSourceFactory; import javax.sql.DataSo ...
IntelliJ IDEA导入包的顺序调整和按包类型分类（保持和Eclipse一致）
调整的内容如下: 空行 import java.* 空行 import javax.* 空行 import com.* 空行 import all other imports 空行 import st ...
一道简单DP题
问题: 给定一个整数的数组,相邻的数不能同时选,求从该数组选取若干整数,使得他们的和最大,要求只能使用o(1)的空间复杂度.要求给出伪码. 解答: int maxSum(vector<int&g ...

echarts 饼状图

echarts 饼状图的更多相关文章

随机推荐

热门专题