需求：加一个下拉框选择条件改变饼图内外环 饼图：百度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> 标签 ...
随机推荐
- ERP行业销售如何挖掘潜在客户？
要看不同阶段,小企业发展到一定程度,第一个需求是单体财务系统.因为这个时候财务忙不过来了.在大一点就需要业务系统了,就是生产+进销存.有分公司就有集团级软件需求,接着就是oa啊HR啊上下游管理啊等等. ...
- SparkRDD函数详解
1.RDD操作详解 启动spark-shell spark-shell --master spark://hdp-node-01:7077 1.1 基本转换 1) map map是对RDD中的每个元素 ...
- [翻译] ZFTokenField
ZFTokenField 本人视频教程系类 iOS中CALayer的使用 效果图: iOS custom view that let you add token view inside like ...
- React学习笔记（六）事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- Java学习---Map的学习
1. Map 1.1. map中的方法 1.2. Map.Entry 对于集合来讲,就是把kye-value的数据保存在了Map.Entry的实例之后,再在Map集合中插入了一个Map.Entry的实 ...
- INSERT CLAUSE
a.single table insert INSERT INTO jobs(job_id,job_title,min_salary,Max_Salary) VALUES('IT_PM','PROJE ...
- php中的mysql_fetch_row，mysql_fetch_array，mysql_fetch_object
1.mysql_fetch_row mysql_fetch_row,这个函数是从结果集中取一行作为枚举数据,从和指定的结果标识关联的结果集中取得一行数据并作为数组返回.每个结果的列储存在一个数组的单元 ...
- 41、Thead线程 System.Thread与互斥体Mutex
Thead线程 System.Thread 使用Thread类可以创建和控制线程.下面的代码是创建和启动一个新线程的简单例子.Thread 类的构造函数重载为接受ThreadStart和Paramet ...
- 大屏FAQ
1. 大屏可以分为哪几类?帆软有哪些大屏硬件合作商?编辑 拼接屏:通常由单个46-55寸的液晶显示屏组成屏幕墙,存在拼缝,借助矩阵.屏控系统来进行信号的输入与输出控制,可以实现屏幕墙上多个屏幕的组合. ...
- 报错 Filtered offsite request
用scrapy框架迭代爬取时报错 scrapy日志: 在 setting.py 文件中 设置 日志 记录等级 LOG_LEVEL= 'DEBUG' LOG_FILE ='log.txt' 观察 scr ...