需求：加一个下拉框选择条件改变饼图内外环 饼图：百度echarts提供
1.1：下拉框条件：后台取得ViewBag传给前台
MonitorController: public ActionResult BigData():
//下拉框筛选条件
var result = MonitorBLL.GetSoilPlantCountByCode(loginSoil);
var r = (object)result.data;
ViewBag.soilplantcount = r;
// loginSoil是登录用户
public static ResponseModel GetSoilPlantCountByCode(Farm_SoilModel loginSoil)
{
if (loginSoil.IsEmpty())
{
return ResponseHelper.SetData(ResponseEnum.ParaError);
}
// Log4.Write("传入参数：组织编号=" + soilcode);
string sql = "";
sql = "select * from Farm_SoilItem where SoilCode='" + loginSoil.SoilCode + "'";
Dictionary<string, string> Plant = new Dictionary<string, string>();
var json = DapperDAL.QueryList(sql);//产量json近两个月的；
for (var i = ; i < json.Count; i++)
{
Plant.Add(json[i]["SoilItemCode"],json[i]["SoilItemName"]);
}
return ResponseHelper.SetData(ResponseEnum.Success, "获取成功", Plant);
}
BigData.cshtml:
<select id="selectID">
@foreach (var item in ViewBag.soilplantcount)
{
<option id=" @item.Key" value=" @item.Key"> @item.Value</option>
}
</select>
1.2点击下拉框事件:
//绑定下拉框change事件，当下来框改变时调用 SelectChange()方法
$("#selectID").change(function () { SelectChange(); });
function SelectChange() {
//获取下拉框选中项的text属性值
var selectText = $("#selectID").find("option:selected").text();
alert(selectText);
$.ajax({
url: "/MonitorApi/GetSoilSeedCountYByCode", type: "post", dataType: "json",
data: { soilitemcode: selectText },
success: function (res) {
// //var cityName = $(this).text();不能这样写
},
error: function () {
alert("网络错误");
}
});
}
1.3套到饼图中ajax加载
$("#selectID").change(function () { SelectChange1(); });
var name;
var val;
function SelectChange1() {
var selectText = $("#selectID").find("option:selected").val();
//alert(selectText);
//获取下拉框选中项的text属性值
//劳动及产品统计（年）
var worldMapContainer = document.getElementById('box3');
box03 = document.getElementById("box03");
box03_h = box03.offsetHeight;
box03_w = box04.offsetWidth;
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = box03_w * 1 + 'px';
worldMapContainer.style.height = box03_h * 0.8 + 'px';
};
//设置容器高宽
resizeWorldMapContainer();
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(worldMapContainer);
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
grid: {
height: '40%',
y: '5%',
x: '14%'
},
legend: {
x: 'center',
y: 'bottom',
textStyle: {
color: '#ccc'
},
data: null,//res.data.legendList3
},
series: [{
color: ['#7627cb', '#259fd2', '#e26021', '#c7353a', '#f5b91e'],
name: '肥料及产品数量',
type: 'pie',
selectedMode: 'single',
radius: '40%',
center: ['50%', '40%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: true
}
},
data: function () {
var serie = [];
//$.ajax({
// url: "/AdminApi/GetTotalCount",
// data: { dateType: 'YRAR' },
// //data: { [{ "TotalCount": 384 }, { "TotalCount": 1000 }, { "TotalCount": 176 }, { "TotalCount": 43 }, { "TotalCount": 72 }, { "TotalCount": 359 }, { "TotalCount": 293 }, { "TotalCount": 148 }, { "TotalCount": 112 }, { "TotalCount": 7 }, { "TotalCount": 270 }, { "TotalCount": 17 }, { "TotalCount": 5 }] },
// type: "get",
// dataType: "json",
// async: false,
// success: function (dataJson) {
// //serie = [
// // { name: '产品数量', value: dataJson[1].TotalCount },
// // { name: '化肥', value: dataJson[4].TotalCount },
// // { name: '农药', value: dataJson[5].TotalCount }
// //];
// serie = [
// { name: '产品数量', value: dataJson[1].TotalCount },
// { name: '化肥', value: dataJson[4].TotalCount },
// { name: '农药', value: dataJson[5].TotalCount }
// ];
// }
//});
$.ajax({
url: "/MonitorApi/GetSoilSeedCountYByCode?soilitemcode=" + selectText, type: "post", dataType: "json",
async: false,
data: { dateType: 'YRAR' },
success: function (res) {
// var serie = [];
for (var i in res.data) {
var item = {
name: i,
value: res.data[i]
};
serie.push(item);
}
// return serie1
},
error: function () {
alert("网络错误");
}
});
//for(var i = 0; i < res.data.titleList4.length; i++) {
// var item = {
// name: res.data.titleList4[i],
// value: res.data.dataList4[i]
// };
// serie.push(item);
//}
//var item = { name: '', value: '' };
return serie;
}()
},
{
name: '劳动统计(次)',
type: 'pie',
center: ['50%', '40%'],
radius: ['50%', '65%'],
color: ['#d9a503', '#2551bb', '#81b740', '#da70d6', '#ff7f50'],
data: function () {
var serie1 = [];
var serie = [];
//$.ajax({
// url: "/AdminApi/GetTotalCount",
// data: { dateType: 'YRAR' },
// type: "get",
// dataType: "json",
// async: false,
// success: function (dataJson) {
// serie = [
// { name: '常规农作', value: dataJson[6].TotalCount },
// { name: '施肥', value: dataJson[7].TotalCount },
// { name: '撒药', value: dataJson[8].TotalCount }
// ];
// }
//});
$.ajax({
url: "/MonitorApi/GetSoilPlantlinkYByCode?soilitemcode=" + selectText, type: "post", dataType: "json",
async: false,
data: { dateType: 'YRAR' },
success: function (res) {
// var serie = [];
for (var i in res.data) {
//serie = [
// { name: i, value: res.data[i] }
//];
var item = {
name:i,
value: res.data[i]
};
serie.push(item);
}
// return serie1
},
error: function () {
alert("网络错误");
}
});
//var serie = [];
//for(var i = 0; i < res.data.titleList3.length; i++) {
// var item = {
// name: res.data.titleList3[i],
// value: res.data.dataList3[i]
// };
// serie.push(item);
//}
return serie;
}()
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
resizeWorldMapContainer8();
myChart.resize();
};
//--------------------------------------------------
//月
//劳动及产品统计（月）
var worldMapContainer = document.getElementById('boxes3');
box03 = document.getElementById("box03");
box03_h = box03.offsetHeight;
box03_w = box04.offsetWidth;
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = box03_w * 1 + 'px';
worldMapContainer.style.height = box03_h * 0.8 + 'px';
};
//设置容器高宽
resizeWorldMapContainer();
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(worldMapContainer);
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
grid: {
height: '40%',
y: '5%',
x: '14%'
},
legend: {
x: 'center',
y: 'bottom',
textStyle: {
color: '#ccc'
},
data: null,//res.data.legendList3
},
series: [{
color: ['#7627cb', '#259fd2', '#e26021', '#c7353a', '#f5b91e'],
name: '肥料及产品',
type: 'pie',
selectedMode: 'single',
radius: '40%',
center: ['50%', '40%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: true
}
},
data: function () {
// var serie = [
// { name: '产品数量', value: 1 },
// { name: '化肥', value: 2 },
// { name: '农药', value: 3 }
// ];
////var serie = [];
////for(var i = 0; i < res.data.titleList4.length; i++) {
//// var item = {
//// name: res.data.titleList4[i],
//// value: res.data.dataList42[i]
//// };
//// serie.push(item);
////}
var serie = [];
$.ajax({
url: "/AdminApi/GetTotalCount",
data: { dateType: 'MONTH' },
type: "get",
dataType: "json",
async: false,
success: function (dataJson) {
serie = [
{ name: '产品数量', value: dataJson[1].TotalCount },
{ name: '化肥', value: dataJson[4].TotalCount },
{ name: '农药', value: dataJson[5].TotalCount }
];
}
});
return serie;
}()
},
{
name: '劳动统计(次)',
type: 'pie',
center: ['50%', '40%'],
radius: ['50%', '65%'],
color: ['#d9a503', '#2551bb', '#81b740', '#da70d6', '#ff7f50'],
data: function () {
var serie = [];
$.ajax({
url: "/AdminApi/GetTotalCount",
data: { dateType: 'MONTH' },
type: "get",
dataType: "json",
async: false,
success: function (dataJson) {
serie = [
{ name: '常规农作', value: dataJson[6].TotalCount },
{ name: '施肥', value: dataJson[7].TotalCount },
{ name: '撒药', value: dataJson[8].TotalCount }
];
}
});
//var serie = [];
//for(var i = 0; i < res.data.titleList3.length; i++) {
// var item = {
// name: res.data.titleList3[i],
// value: res.data.dataList32[i]
// };
// serie.push(item);
//}
return serie;
}()
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
resizeWorldMapContainer();
myChart.resize();
};
}
//-------------------------------------------------------------
//用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
resizeWorldMapContainer();
myChart.resize();
};
需求：加一个下拉框选择条件改变饼图内外环 饼图：百度echarts提供的更多相关文章
- echarts异步数据加载(在下拉框选择事件中异步更新数据)
接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了.在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载 ...
- select下拉框选择触发事件
我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...
- PHP下拉框选择的实现方法
实现 第一种PHP下拉框实现方法: < ?php //提交下拉框; //直接饱触发onchange事件的结果 $id=$_GET['myselect']; // myselect 为locati ...
- 前端下拉框选择和动态生成调用div
进入到一个项目期中,一边做项目,一边学习其中用到的知识.这些知识都是零碎的,有数据库,有html,有js,还有django.趁周末时间,整理前面遇到过的前端相关的知识点. 下拉框选择 <html ...
- 将select的默认小三角替换成别的图片，且实现点击图片出现下拉框选择option
最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...
- Python+selenium之获取文本值和下拉框选择数据
Python+selenium之获取文本值和下拉框选择数据 一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...
- jquery根据下拉框选择的值显示输入框
原理就是根据下拉框选择的值来控制显示那个输入框: html代码: 首先定义一个下拉框,$serviceTypeList就是后台传过来的所有属性, <div class="uk-form ...
- Selenium3 + Python3自动化测试系列八——警告框处理和下拉框选择
警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...
- 使用 jQuery 实现页面背景色的更换，通过下拉框选择对应的颜色，页面背景会随着选中的颜色进行更换
查看本章节 查看作业目录 需求说明: 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换 实现思路: 在页面中添加 <select> 标签 ...
随机推荐
- spring cloud config配置
参考: http://www.ityouknow.com/springcloud/2017/05/22/springcloud-config-git.html http://www.ityouknow ...
- Java中执行.exe文件
public static void main(String args[]){ try { String command ="notepad"; // 笔记本 Process ch ...
- Linux学习---Linux安装ftp组件
1 安装vsftpd组件 安装完后,有/etc/vsftpd/vsftpd.conf 文件,是vsftp的配置文件. [root@bogon ~]# yum -y install vsftpd 2 添 ...
- C# 方法与参数 常见命名空间汇总 using的使用 main方法参数
本文主要讲 C# 常见命名空间 using static 指令 && 调用静态方法 嵌套命名空间&&作用域 别名 Main() 方法 C# 常见命名空间 命名空间 作用 ...
- MapReduce Design Patterns(chapter 1)(一)
Chapter 1.Design Patterns and MapReduce MapReduce 是一种运行于成百上千台机器上的处理数据的框架,目前被google,Hadoop等多家公司或社区广泛使 ...
- [零基础学JAVA]Java SE面向对象部分.面向对象基础（04）
2.代码块 1.内部类 3.链表 2.代码块: 1.) 普通代码块. 2.)静态代码块. 3.)构造代码块. 4.)同步代码块. class Test{//构造块 { Syste ...
- canvas抛物线运动demo
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Debian下Cannot set LC_CTYPE to default locale: No such file or directory解决方法
把语言环境变量改为英文 将Ubuntu系统语言环境改为英文的en_US.UTF-8 查看当前系统语言环境 locale 编辑配置文件,将zh_US.UTF-8改为en_US.UTF-8,zh改为en ...
- burpsuit常用功能
1.生成GET数据包:复制url -> 打开burp -> repeater -> 右键paste url as request 2.生成POST数据包:生成一个GET数据包 -&g ...
- vector详讲(一)
<vector>头文件里带有两个类型参数的类模板,第一个参数是需要指定的数据类型,第二个是分配器(allocator)类型 template<class T, class Alloc ...