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%" ...
随机推荐
- 【POJ1276】Cash Machine(多重背包单调队列优化)
大神博客转载http://www.cppblog.com/MatoNo1/archive/2011/07/05/150231.aspx多重背包的单调队列初中就知道了但一直没(不会)写二进制优化初中就写 ...
- 从反汇编看待C++ new
首先来看最简单的new操作 int main() { int *temp = new int; delete temp; } 反汇编结果:调用了operator new 00311C9E push 4 ...
- POJ - 2135最小费用流
题目链接:http://poj.org/problem?id=2135 今天学习最小费用流.模板手敲了一遍. 产生了一个新的问题:对于一条无向边,这样修改了正向边容量后,反向边不用管吗? 后来想了想, ...
- Gym 101917 E 简单计算几何,I 最大流
题目链接 https://codeforces.com/gym/101917 E 题意:给定一个多边形(n个点),然后逆时针旋转A度,然后对多边形进行规约,每个点的x规约到[0,w]范围内,y规约到[ ...
- Java 经典笔试题
这些题目对我的笔试帮助很大,有需要的朋友都可以来看看,在笔试中能遇到的题目基本上下面都会出现,虽然形式不同,当考察的基本的知识点还是相同的. 在分析中肯定有不足和谬误的地方还请大虾们能够给予及时的纠正 ...
- Sping、SpringMVC、SpringBoot的对比
原文链接:https://dzone.com/articles/spring-boot-vs-spring-mvc-vs-spring-how-do-they-compare 作者: Ranga Ka ...
- 洛谷——P2196 挖地雷
题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N<=20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之后,某人可以从任一处 ...
- POJ 3140 Contestants Division (树dp)
题目链接:http://poj.org/problem?id=3140 题意: 给你一棵树,问你删去一条边,形成的两棵子树的节点权值之差最小是多少. 思路: dfs #include <iost ...
- GDKOI賽前總結
@(賽前總結)[GDKOI2017] 提一些比賽時要注意的事項: 賽前先把讀入優化/輸出優化的模板調試好, 加入缺省源中. 注意不要出錯, 輸出為0或者負數的情況要特盤; 讀入輸出文件名不要搞錯; 由 ...
- Jackson对泛型的序列化和反序列化方法汇总
说明:Jackson对于简单泛型是可以正常操作的,但是如果对于太过于复杂的泛型类有时会不成功.目前还在找着更合适的Json库.不过这一点在dotnet原生方案JavaScriptSerializer可 ...