1.1：下拉框条件：后台取得ViewBag传给前台

  1. MonitorController: public ActionResult BigData():
  2.  
  3.     //下拉框筛选条件
  4.  
  5. var result = MonitorBLL.GetSoilPlantCountByCode(loginSoil);
  6.  
  7. var r = (object)result.data;
  8.  
  9. ViewBag.soilplantcount = r;
  10.  
  11. // loginSoil是登录用户
  12.  
  13. public static ResponseModel GetSoilPlantCountByCode(Farm_SoilModel loginSoil)
  14.  
  15.         {
  16.  
  17.             if (loginSoil.IsEmpty())
  18.  
  19.             {
  20.  
  21.                 return ResponseHelper.SetData(ResponseEnum.ParaError);
  22.  
  23.             }
  24.  
  25.             //  Log4.Write("传入参数：组织编号=" + soilcode);
  26.  
  27.             string sql = "";
  28.  
  29.             sql = "select  * from  Farm_SoilItem  where SoilCode='" + loginSoil.SoilCode + "'";
  30.  
  31.             Dictionary<string, string> Plant = new Dictionary<string, string>();
  32.  
  33.             var json = DapperDAL.QueryList(sql);//产量json近两个月的；
  34.  
  35.             for (var i = ; i < json.Count; i++)
  36.  
  37.             {
  38.  
  39.                 Plant.Add(json[i]["SoilItemCode"],json[i]["SoilItemName"]);
  40.  
  41.             }
  42.  
  43.             return ResponseHelper.SetData(ResponseEnum.Success, "获取成功", Plant);
  44.  
  45.         }
  46.  
  47. BigData.cshtml:
  48.  
  49.       <select id="selectID">
  50.  
  51.           @foreach (var item in ViewBag.soilplantcount)
  52.  
  53.             {
  54.  
  55.          <option id=" @item.Key" value=" @item.Key"> @item.Value</option>
  56.  
  57.              }
  58.  
  59. </select>

1.2点击下拉框事件:

  1.  //绑定下拉框change事件，当下来框改变时调用 SelectChange()方法
  2.  
  3. $("#selectID").change(function () { SelectChange(); });
  4.  
  5. function SelectChange() {
  6.  
  7.                 //获取下拉框选中项的text属性值
  8.  
  9.                 var selectText = $("#selectID").find("option:selected").text();
  10.  
  11.                alert(selectText);
  12.  
  13.                 $.ajax({
  14.  
  15.                     url: "/MonitorApi/GetSoilSeedCountYByCode", type: "post", dataType: "json",
  16.  
  17.                     data: { soilitemcode: selectText },
  18.  
  19.                     success: function (res) {
  20.  
  21.             //            //var cityName = $(this).text();不能这样写
  22.  
  23.                     },
  24.  
  25.                     error: function () {
  26.  
  27.                        alert("网络错误");
  28.  
  29.                     }
  30.  
  31.                 });
  32.  
  33.             }

1.3套到饼图中ajax加载

  1. $("#selectID").change(function () { SelectChange1(); });
  2.  
  3.         var name;
  4.  
  5.     var val;
  6.  
  7. function SelectChange1() {
  8.  
  9.             var selectText = $("#selectID").find("option:selected").val();
  10.  
  11.             //alert(selectText);
  12.  
  13.             //获取下拉框选中项的text属性值
  14.  
  15.             //劳动及产品统计（年）
  16.  
  17.             var worldMapContainer = document.getElementById('box3');
  18.  
  19.             box03 = document.getElementById("box03");
  20.  
  21.             box03_h = box03.offsetHeight;
  22.  
  23.             box03_w = box04.offsetWidth;
  24.  
  25.             //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
  26.  
  27.             var resizeWorldMapContainer = function () {
  28.  
  29.                 worldMapContainer.style.width = box03_w * 1 + 'px';
  30.  
  31.                 worldMapContainer.style.height = box03_h * 0.8 + 'px';
  32.  
  33.             };
  34.  
  35.             //设置容器高宽
  36.  
  37.             resizeWorldMapContainer();
  38.  
  39.             // 基于准备好的dom，初始化echarts实例
  40.  
  41.             var myChart = echarts.init(worldMapContainer);
  42.  
  43.             // 指定图表的配置项和数据
  44.  
  45.             var option = {
  46.  
  47.                 tooltip: {
  48.  
  49.                     trigger: 'item',
  50.  
  51.                     formatter: "{a} <br/>{b}: {c} ({d}%)"
  52.  
  53.                 },
  54.  
  55.                 grid: {
  56.  
  57.                     height: '40%',
  58.  
  59.                     y: '5%',
  60.  
  61.                     x: '14%'
  62.  
  63.                 },
  64.  
  65.                 legend: {
  66.  
  67.                     x: 'center',
  68.  
  69.                     y: 'bottom',
  70.  
  71.                     textStyle: {
  72.  
  73.                         color: '#ccc'
  74.  
  75.                     },
  76.  
  77.                     data: null,//res.data.legendList3
  78.  
  79.                 },
  80.  
  81.                 series: [{
  82.  
  83.                     color: ['#7627cb', '#259fd2', '#e26021', '#c7353a', '#f5b91e'],
  84.  
  85.                     name: '肥料及产品数量',
  86.  
  87.                     type: 'pie',
  88.  
  89.                     selectedMode: 'single',
  90.  
  91.                     radius: '40%',
  92.  
  93.                     center: ['50%', '40%'],
  94.  
  95.                     label: {
  96.  
  97.                         normal: {
  98.  
  99.                             position: 'inner'
  100.  
  101.                         }
  102.  
  103.                     },
  104.  
  105.                     labelLine: {
  106.  
  107.                         normal: {
  108.  
  109.                             show: true
  110.  
  111.                         }
  112.  
  113.                     },
  114.  
  115.                     data: function () {
  116.  
  117.                         var serie = [];
  118.  
  119.                         //$.ajax({
  120.  
  121.                         //    url: "/AdminApi/GetTotalCount",
  122.  
  123.                         //    data: { dateType: 'YRAR' },
  124.  
  125.                         //    //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 }] },
  126.  
  127.                         //    type: "get",
  128.  
  129.                         //    dataType: "json",
  130.  
  131.                         //    async: false,
  132.  
  133.                         //    success: function (dataJson) {
  134.  
  135.                         //        //serie = [
  136.  
  137.                         //        //    { name: '产品数量', value: dataJson[1].TotalCount },
  138.  
  139.                         //        //    { name: '化肥', value: dataJson[4].TotalCount },
  140.  
  141.                         //        //    { name: '农药', value: dataJson[5].TotalCount }
  142.  
  143.                         //        //];
  144.  
  145.                         //        serie = [
  146.  
  147.                         //            { name: '产品数量', value: dataJson[1].TotalCount },
  148.  
  149.                         //            { name: '化肥', value: dataJson[4].TotalCount },
  150.  
  151.                         //            { name: '农药', value: dataJson[5].TotalCount }
  152.  
  153.                         //        ];
  154.  
  155.                         //    }
  156.  
  157.                         //});
  158.  
  159. $.ajax({
  160.  
  161.                             url: "/MonitorApi/GetSoilSeedCountYByCode?soilitemcode=" + selectText, type: "post", dataType: "json",
  162.  
  163.                             async: false,
  164.  
  165.                             data: { dateType: 'YRAR' },
  166.  
  167.                             success: function (res) {
  168.  
  169.                                 // var serie = [];
  170.  
  171.                                 for (var i in res.data) {
  172.  
  173.                                     var item = {
  174.  
  175.                                         name: i,
  176.  
  177.                                         value: res.data[i]
  178.  
  179.                                     };
  180.  
  181.                                     serie.push(item);
  182.  
  183.                                 }
  184.  
  185.                                 // return serie1
  186.  
  187.                             },
  188.  
  189.                             error: function () {
  190.  
  191.                                 alert("网络错误");
  192.  
  193.                             }
  194.  
  195.                         });
  196.  
  197.                         //for(var i = 0; i < res.data.titleList4.length; i++) {
  198.  
  199.                         // var item = {
  200.  
  201.                         //    name: res.data.titleList4[i],
  202.  
  203.                         //    value: res.data.dataList4[i]
  204.  
  205.                         // };
  206.  
  207.                         // serie.push(item);
  208.  
  209.                         //}
  210.  
  211.                         //var item = { name: '', value: '' };
  212.  
  213.                         return serie;
  214.  
  215.                     }()
  216.  
  217.                 },
  218.  
  219.                 {
  220.  
  221.                     name: '劳动统计(次)',
  222.  
  223.                     type: 'pie',
  224.  
  225.                     center: ['50%', '40%'],
  226.  
  227.                     radius: ['50%', '65%'],
  228.  
  229.                     color: ['#d9a503', '#2551bb', '#81b740', '#da70d6', '#ff7f50'],
  230.  
  231.                     data: function () {
  232.  
  233.                         var serie1 = [];
  234.  
  235.                         var serie = [];
  236.  
  237.                         //$.ajax({
  238.  
  239.                         //    url: "/AdminApi/GetTotalCount",
  240.  
  241.                         //    data: { dateType: 'YRAR' },
  242.  
  243.                         //    type: "get",
  244.  
  245.                         //    dataType: "json",
  246.  
  247.                         //    async: false,
  248.  
  249.                         //    success: function (dataJson) {
  250.  
  251.                         //        serie = [
  252.  
  253.                         //            { name: '常规农作', value: dataJson[6].TotalCount },
  254.  
  255.                         //            { name: '施肥', value: dataJson[7].TotalCount },
  256.  
  257.                         //            { name: '撒药', value: dataJson[8].TotalCount }
  258.  
  259.                         //        ];
  260.  
  261.                         //    }
  262.  
  263.                         //});
  264.  
  265.                         $.ajax({
  266.  
  267.                             url: "/MonitorApi/GetSoilPlantlinkYByCode?soilitemcode=" + selectText, type: "post", dataType: "json",
  268.  
  269.                             async: false,
  270.  
  271.                             data: { dateType: 'YRAR' },
  272.  
  273.                             success: function (res) {
  274.  
  275.                                 // var serie = [];
  276.  
  277.                                 for (var i in res.data) {
  278.  
  279.                                     //serie = [
  280.  
  281.                                     //    { name: i, value: res.data[i] }
  282.  
  283.                                     //];
  284.  
  285.                                     var item = {
  286.  
  287.                                         name:i,
  288.  
  289.                                         value: res.data[i]
  290.  
  291.                                     };
  292.  
  293.                                     serie.push(item);
  294.  
  295.                                 }
  296.  
  297.                                // return serie1
  298.  
  299.                             },
  300.  
  301.                             error: function () {
  302.  
  303.                                 alert("网络错误");
  304.  
  305.                             }
  306.  
  307.                         });
  308.  
  309.                         //var serie = [];
  310.  
  311.                         //for(var i = 0; i < res.data.titleList3.length; i++) {
  312.  
  313.                         // var item = {
  314.  
  315.                         //    name: res.data.titleList3[i],
  316.  
  317.                         //    value: res.data.dataList3[i]
  318.  
  319.                         // };
  320.  
  321.                         // serie.push(item);
  322.  
  323.                         //}
  324.  
  325.                         return serie;
  326.  
  327.                     }()
  328.  
  329.                 }
  330.  
  331.                 ]
  332.  
  333.             };
  334.  
  335. // 使用刚指定的配置项和数据显示图表。
  336.  
  337.             myChart.setOption(option);
  338.  
  339.             //用于使chart自适应高度和宽度
  340.  
  341.             window.onresize = function () {
  342.  
  343.                 //重置容器高宽
  344.  
  345.                 resizeWorldMapContainer8();
  346.  
  347.                 myChart.resize();
  348.  
  349.             };
  350.  
  351.             //--------------------------------------------------
  352.  
  353.             //月
  354.  
  355.             //劳动及产品统计（月）
  356.  
  357.             var worldMapContainer = document.getElementById('boxes3');
  358.  
  359.             box03 = document.getElementById("box03");
  360.  
  361.             box03_h = box03.offsetHeight;
  362.  
  363.             box03_w = box04.offsetWidth;
  364.  
  365.             //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
  366.  
  367.             var resizeWorldMapContainer = function () {
  368.  
  369.                 worldMapContainer.style.width = box03_w * 1 + 'px';
  370.  
  371.                 worldMapContainer.style.height = box03_h * 0.8 + 'px';
  372.  
  373.             };
  374.  
  375.             //设置容器高宽
  376.  
  377.             resizeWorldMapContainer();
  378.  
  379.             // 基于准备好的dom，初始化echarts实例
  380.  
  381.             var myChart = echarts.init(worldMapContainer);
  382.  
  383.             // 指定图表的配置项和数据
  384.  
  385.             var option = {
  386.  
  387.                 tooltip: {
  388.  
  389.                     trigger: 'item',
  390.  
  391.                     formatter: "{a} <br/>{b}: {c} ({d}%)"
  392.  
  393.                 },
  394.  
  395.                 grid: {
  396.  
  397.                     height: '40%',
  398.  
  399.                     y: '5%',
  400.  
  401.                     x: '14%'
  402.  
  403.                 },
  404.  
  405.                 legend: {
  406.  
  407.                     x: 'center',
  408.  
  409.                     y: 'bottom',
  410.  
  411.                     textStyle: {
  412.  
  413.                         color: '#ccc'
  414.  
  415.                     },
  416.  
  417.                     data: null,//res.data.legendList3
  418.  
  419.                 },
  420.  
  421.                 series: [{
  422.  
  423.                     color: ['#7627cb', '#259fd2', '#e26021', '#c7353a', '#f5b91e'],
  424.  
  425.                     name: '肥料及产品',
  426.  
  427.                     type: 'pie',
  428.  
  429.                     selectedMode: 'single',
  430.  
  431.                     radius: '40%',
  432.  
  433.                     center: ['50%', '40%'],
  434.  
  435.                     label: {
  436.  
  437.                         normal: {
  438.  
  439.                             position: 'inner'
  440.  
  441.                         }
  442.  
  443.                     },
  444.  
  445.                     labelLine: {
  446.  
  447.                         normal: {
  448.  
  449.                             show: true
  450.  
  451.                         }
  452.  
  453.                     },
  454.  
  455.                     data: function () {
  456.  
  457.                         //                  var serie = [
  458.  
  459.                         //                      { name: '产品数量', value: 1 },
  460.  
  461.                         //                      { name: '化肥', value: 2 },
  462.  
  463.                         //                      { name: '农药', value: 3 }
  464.  
  465.                         //                  ];
  466.  
  467.                         ////var serie = [];
  468.  
  469.                         ////for(var i = 0; i < res.data.titleList4.length; i++) {
  470.  
  471.                         ////  var item = {
  472.  
  473.                         ////      name: res.data.titleList4[i],
  474.  
  475.                         ////      value: res.data.dataList42[i]
  476.  
  477.                         ////  };
  478.  
  479.                         ////  serie.push(item);
  480.  
  481.                         ////}
  482.  
  483.                         var serie = [];
  484.  
  485.                         $.ajax({
  486.  
  487.                             url: "/AdminApi/GetTotalCount",
  488.  
  489.                             data: { dateType: 'MONTH' },
  490.  
  491.                             type: "get",
  492.  
  493.                             dataType: "json",
  494.  
  495.                             async: false,
  496.  
  497.                             success: function (dataJson) {
  498.  
  499.                                 serie = [
  500.  
  501.                                     { name: '产品数量', value: dataJson[1].TotalCount },
  502.  
  503.                                     { name: '化肥', value: dataJson[4].TotalCount },
  504.  
  505.                                     { name: '农药', value: dataJson[5].TotalCount }
  506.  
  507.                                 ];
  508.  
  509.                             }
  510.  
  511.                         });
  512.  
  513.                         return serie;
  514.  
  515.                     }()
  516.  
  517.                 },
  518.  
  519.                 {
  520.  
  521.                     name: '劳动统计(次)',
  522.  
  523.                     type: 'pie',
  524.  
  525.                     center: ['50%', '40%'],
  526.  
  527.                     radius: ['50%', '65%'],
  528.  
  529.                     color: ['#d9a503', '#2551bb', '#81b740', '#da70d6', '#ff7f50'],
  530.  
  531.                     data: function () {
  532.  
  533.                         var serie = [];
  534.  
  535.                         $.ajax({
  536.  
  537.                             url: "/AdminApi/GetTotalCount",
  538.  
  539.                             data: { dateType: 'MONTH' },
  540.  
  541.                             type: "get",
  542.  
  543.                             dataType: "json",
  544.  
  545.                             async: false,
  546.  
  547.                             success: function (dataJson) {
  548.  
  549.                                 serie = [
  550.  
  551.                                     { name: '常规农作', value: dataJson[6].TotalCount },
  552.  
  553.                                     { name: '施肥', value: dataJson[7].TotalCount },
  554.  
  555.                                     { name: '撒药', value: dataJson[8].TotalCount }
  556.  
  557.                                 ];
  558.  
  559.                             }
  560.  
  561.                         });
  562.  
  563.                         //var serie = [];
  564.  
  565.                         //for(var i = 0; i < res.data.titleList3.length; i++) {
  566.  
  567.                         // var item = {
  568.  
  569.                         //    name: res.data.titleList3[i],
  570.  
  571.                         //    value: res.data.dataList32[i]
  572.  
  573.                         // };
  574.  
  575.                         // serie.push(item);
  576.  
  577.                         //}
  578.  
  579.                         return serie;
  580.  
  581.                     }()
  582.  
  583.                 }
  584.  
  585.                 ]
  586.  
  587.             };
  588.  
  589.             // 使用刚指定的配置项和数据显示图表。
  590.  
  591.             myChart.setOption(option);
  592.  
  593.             //用于使chart自适应高度和宽度
  594.  
  595.             window.onresize = function () {
  596.  
  597.                 //重置容器高宽
  598.  
  599.                 resizeWorldMapContainer();
  600.  
  601.                 myChart.resize();
  602.  
  603.             };
  604.  
  605.         }
  606.  
  607.        //-------------------------------------------------------------
  608.  
  609.         //用于使chart自适应高度和宽度
  610.  
  611.         window.onresize = function () {
  612.  
  613.             //重置容器高宽
  614.  
  615.             resizeWorldMapContainer();
  616.  
  617.             myChart.resize();
  618.  
  619.         };

需求：加一个下拉框选择条件改变饼图内外环 饼图：百度echarts提供的更多相关文章

  1. echarts异步数据加载(在下拉框选择事件中异步更新数据)

    接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了.在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载 ...

  2. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

  3. PHP下拉框选择的实现方法

    实现 第一种PHP下拉框实现方法: < ?php //提交下拉框; //直接饱触发onchange事件的结果 $id=$_GET['myselect']; // myselect 为locati ...

  4. 前端下拉框选择和动态生成调用div

    进入到一个项目期中,一边做项目,一边学习其中用到的知识.这些知识都是零碎的,有数据库,有html,有js,还有django.趁周末时间,整理前面遇到过的前端相关的知识点. 下拉框选择 <html ...

  5. 将select的默认小三角替换成别的图片，且实现点击图片出现下拉框选择option

    最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...

  6. Python+selenium之获取文本值和下拉框选择数据

    Python+selenium之获取文本值和下拉框选择数据 一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...

  7. jquery根据下拉框选择的值显示输入框

    原理就是根据下拉框选择的值来控制显示那个输入框: html代码: 首先定义一个下拉框,$serviceTypeList就是后台传过来的所有属性, <div class="uk-form ...

  8. Selenium3 + Python3自动化测试系列八——警告框处理和下拉框选择

    警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...

  9. 使用 jQuery 实现页面背景色的更换，通过下拉框选择对应的颜色，页面背景会随着选中的颜色进行更换

    查看本章节 查看作业目录 需求说明: 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换 实现思路: 在页面中添加 <select> 标签 ...

随机推荐

  1. PyCharm2018 安装及破解方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012278016/article/details/81738676 目录 1>. 安装 2& ...

  2. 哪个HTML5内建对象用于在画布上绘制？（）

    哪个HTML5内建对象用于在画布上绘制?() getContent getContext getGraphics getCanvas 我的理解: A.C.D不存在HTML5,,js方法中 HTML 5 ...

  3. YII+DWZ三级城市联动挂件

    挂件PHP文件 class CountryCityCombox extends RXWidget { public $provinceId = 2; public $cityId = 3687; pu ...

  4. js实现查找字符串出现最多的字符和次数

    代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...

  5. SparkRDD函数详解

    1.RDD操作详解 启动spark-shell spark-shell --master spark://hdp-node-01:7077 1.1 基本转换 1) map map是对RDD中的每个元素 ...

  6. 关于Ubuntu16.04下phpmyadmin出现mbstring错误的正解

    1.打开终端,输入php -i | grep extension_dir 查看extension_dir的绝对路径 2.查看phpinfo,php.ini的绝对路径 3.打开php.ini文件. 设置 ...

  7. innerHTML,innerText,textContent,outerHTML的用法以及区别

    innerHTML获取的是对象起始的位置到终止位置全部内容,包含html标签. innerText和textContent结果是一样的,不包含标签,直接获取标签内的内容,区别是两者浏览器的兼容性. o ...

  8. Exchange2016 & Skype for business 集成之一配置合作伙伴应用程序

    准备条件 为Skype for Business Server和Exchange Server之间建立服务器到服务器的身份验证,您必须做两件事:1)您必须为每台服务器分配合适的证书(详细参考文档htt ...

  9. 等待事件P1 P2 P3含义

    从以下两个视图中查到的session中,有P1,P2,P3参数select * from v$sessionselect * from v$session_waitselect * from v$se ...

  10. php非空验证

    我想说这种方法是不是很常用的非空验证,现在的普遍使用的是javascript来验证非空,但是作为学习php的一些知识点,还是可以看看的. 先来看看commit.php中的方法 <?php $db ...