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

        };

原文地址:https://www.cnblogs.com/symkmk123/p/9010514.html