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%" ...

随机推荐

p标签注意事项
<p> 哈哈,我是一个段落哦! <div id="box">我是一个萌萌的div</div> </p> 这样写的后果: 注意: p标 ...
IOS-<input>表单元素只能读，设置readonly时光标仍然可见的解决办
在HTML中,如果把一个<input>的readonly属性设置为"readonly",表示这个表单元素不能编辑. 但是,鼠标点击之后,这个表单元素还是有光标存在的. ...
js -“=”“==”和“===”的区别
这个问题再面试中经常被问到,说实话我都是懵的,一个“=”和两个“==”等的区别我还是知道的,就是三个“===”我完全是不知道的,因为我基本上都没有遇到过且用到过,所以再这个问题上我是没分的,人家考官就 ...
es6 --数组--Array.from() 、Array.isArray()、Array.of()、find()、findIndex()、fill()、entries() 、keys() ，values()
将两类对象转为真正的数组 Array.from()方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Se ...
netframework中等待多个子线程执行完毕并计算执行时间
本文主要描述在.netframework中(实验环境.netframework版本为4.6.1)提供两种方式等待多个子线程执行完毕. ManualResetEvent 在多线程中,将ManualRes ...
洛谷——P1126 机器人搬重物
P1126 机器人搬重物题目描述机器人移动学会(RMI)现在正尝试用机器人搬运物品.机器人的形状是一个直径1.6米的球.在试验阶段,机器人被用于在一个储藏室中搬运货物.储藏室是一个N*M的网格,有 ...
char *argv[] 与 char **argv
#include<stdio.h> #include<string.h> int main(int argc,char *argv[])//同int main(int argc ...
Tavas and Malekas
题面题目描述给你两个字符串a和b,告诉所有你b在a中一定匹配的位置,求有中不同的字符串a.a的长度为n,b的长度为m,一定匹配的位置有p个.若b在a中的一定匹配的位置为x,说明a[x-x+m-1] ...
结构体和类中属性定义需要static地方
private function Readxxx:Integer;static; public class property XXX:Integer read ReadXXx; Txxx =recor ...
Go -- LRU算法(缓存淘汰算法)(转)
1. LRU1.1. 原理 LRU(Least recently used,最近最少使用)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高”. ...

echarts 饼状图

echarts 饼状图的更多相关文章

随机推荐

热门专题