• 需求:加一个下拉框选择条件改变饼图内外环 饼图:百度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 = 0; 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();
    
            };

  • 相关阅读:
    mysql将一个表的数据 重复复制多份到表中
    PHP中将指定文本内容导入到word中
    系统安全-SElinux
    通过身份证号码提取年龄,性别
    MySQL-获取某天的数据
    mysql-介绍、MySQL部署、数据类型、存储引擎
    监控系统-ELK
    监控系统-Grafana
    监控系统-zabbix
    监控系统-openfalcon
  • 原文地址:https://www.cnblogs.com/symkmk123/p/9010514.html
Copyright © 2020-2023  润新知