需求：加一个下拉框选择条件改变饼图内外环 饼图：百度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> 标签 ...
随机推荐
- UltraISO制作U盘启动盘教程
Step 1: 首先需要安装UltraISO,完成安装后打开软碟通,文件->打开,打开我们的iso镜像 安装包可以百度搜索 Step 2:然后选择我们的U盘 Step 3:然后点击启动-> ...
- 如何递归执行view的动画
如何递归执行view的动画 效果: 山寨的源头: 图片素材: 源码: // // ViewController.m // RepeatAnimationView // // Created by Yo ...
- [翻译] IQAudioRecorderController
IQAudioRecorderController IQAudioRecorderController is a drop-in universal library allows to record ...
- Mysql学习---使用Python执行存储过程
使用Python执行存储过程 使用Python执行存储过程[2部分]: 1.执行存储过程,获取存储过程的结果集 2.将返回值设置给了 @_存储过程名_序号 = #!/usr/bin/env pyt ...
- Linux 下shell中exec解析
exec和source都属于bash内部命令(builtins commands),在bash下输入man exec或man source可以查看所有的内部命令信息. bash shell ...
- 初始python（一）
一.python特性概要 1. python是解释性脚本语言. 2. python特性总结 2.1 字节码 2.2 动态语义 在赋值是确定数据类型 2.3 缩进(4个空格) 3. python定义编码 ...
- c# winform文本框数字，数值校验
文本框数字,数值校验 public void DigitCheck_KeyPress(object sender, KeyPressEventArgs e) { e.Handled = !char.I ...
- Spring的IoC与AOP的理解
1.Spring它到底是什么? Spring是一个开源的Java应用程序开发框架,为了解决企业应用开发的复杂性而创建的. 在spring中,它会认为一切Java类都是资源,而资源就是Bean,容纳 ...
- Redis命令、数据结构场景、配置文件总结
本文大纲 一.常用数据类型简介二.redis操作命令三.redis配置文件详解四.redis数据类型使用场景 一.常用数据类型简介 redis常用五种数据类型:string,hash,list,set ...
- ZooKeeper学习之路 （六）ZooKeeper API的简单使用（二）级联删除与创建
编程思维训练 1.级联查看某节点下所有节点及节点值 2.删除一个节点,不管有有没有任何子节点 3.级联创建任意节点 4.清空子节点 ZKTest.java public class ZKTest { ...