需求：加一个下拉框选择条件改变饼图内外环 饼图：百度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> 标签 ...
随机推荐
- 初识Spark程序
执行第一个spark程序 普通模式提交任务: bin/spark-submit \ --class org.apache.spark.examples.SparkPi \ --master spark ...
- 为exchange 2010 owa 添加验证码
微软给了exchange owa页面加固的方案,如有需要,请查看. https://partnersupport.microsoft.com/zh-hans/par_servplat/forum/pa ...
- August 02nd 2017 Week 31st Wednesday
Love means never having to say you are sorry. 爱就是永远不必说对不起. If there is ture love, you will never do ...
- JVM垃圾收集算法的选择
1. 介绍 JVM提供了多种垃圾收集器,应该根据应用选择一种合适的垃圾收集器. 垃圾回收管理内存通过如下操作: 在年轻代分配对象,把年龄大的对象晋升到老年代. 当年老代超过阈值的时候,并发标记收集. ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 如何实现本机Windows连接虚拟机中的CentOS
1.确定CentOS的IP地址,命令为 ifconfig,由此可知,LinuxIP地址为 192.168.85.128 2.WIndows的IP地址为192.168.16.1, 3.保证CentOS和 ...
- #npm install# MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 "4.0"。
0.问题描述 Windows 10 最近使用npm install安装项目依赖包,当自动执行至node-gyp rebuild时报错: C:\Users\dsl\Desktop\Pros\ant-de ...
- 联想Thinkpad 遇到双系统 uefi Ubuntu无法进入的引导问题解决方案
最近因为许多课程设计的需要,安装了Ubuntu双系统,但是一开始遇到了安装好了以后无法进入的问题,后来弄好后手残又把引导项给删了又要弄回去,反反复复很多次,网上的很多经验都十分过时,要么对最新的uef ...
- Linux调整系统时间
1.yum search ntp(搜索可安装的ntpn) 2.yum install ntp.x86_64 3.service ntpd start 4.ps -ef | grep ntpd 5.da ...
- Object-C中对“引用(reference)”的理解
http://blog.csdn.net/csz0102/article/details/25984275 注:以下讨论都是在ARC模式下 我们在iOS开发中最经常碰到的“引用(reference)” ...