Layui下拉框和ECharts图表动态结合

实例图片

 图表根据日期的切换 ，数据也实时变化。

代码

前提是先引入layui，echarts，jQuery的js文件

	<div class="layui-form" lay-filter="myDiv" >
		<div class="layui-form-item" style=" padding-left: 35%">
			<div class="layui-inline">
				<label class="layui-form-label" style="width: 100px">最近七天日期</label>
				<div class="layui-input-inline">
		<select  name="company_name" id="select_company" lay-filter="mySelect" >
		</select>
				</div>
			</div>
		</div>
	</div>
	<div id="byCompany" style="width: 1200px;height: 400px"></div>

获取数据之后，装入echarts图表的代码我写的很垃圾，全是冗余代码，你可以更好的处理，我是以实现功能为主

<script>
//提前声明对象，下拉框切换时重置echarts图表使用
	var myChart;
	//ajax获取最近七天日期数据（下拉框内容的装载）
        $(document).ready(function(){
            loadDate();
        });
        function loadDate(){
                $.ajax({
                    type: "POST",
                    url: "/gain/loadAllGainForSelect",
                    dataType: "json",
                    success: function (data) {
                        var nameOpt = "";
                        for (var i = data.data.length-1; i>=data.data.length-7; i--) {
							nameOpt+="<option value='"+data.data[i].datenow+"' >"+data.data[i].datenow+"</option>";
                        }
                        $('#select_company').html(nameOpt);
                    }
                });
        }
//引入layui对象们
        layui.use(['form','element','layer','jquery'],function() {
            var form = layui.form, layer = layui.layer;
            //获取加载页面时 下拉框的日期
            var dateSelected = $('select[name="company_name"] option:selected').text();
            form.render('select');
            $(document).ready(function () {
                // select下拉框变化触发事件
                form.on("select", function (data) {
                //下拉框变化时候重置图表
                    myChart.dispose();
                //下拉框变化后，将变化后的值赋值给变量
                    dateSelected = data.value;
                    echarts1(dateSelected);
                });
                //页面刚加载时候调用的方法
                echarts1(dateSelected);

            } );
            function echarts1 (dateSelected) {
                var dataTwo =[] ;
                var dataThree =[] ;
                var dataOne =[] ;

                $.ajax({
                    type:"POST",
                    url:"/gain/SoldByCompany",
                    //将下拉框取值传入后端 作为查询的条件
                    data:{"shijian":dateSelected},
                    dataType:"json",
                    async:false,
                    success:function (result) {

                        for (var i = 0; i < result.data.length; i++){
                            if(i==0){
                                dataTwo=result.data[i];
							}else if(i==1){
                                dataThree=result.data[i];
							}else if(i==2){
                                dataOne=result.data[i];
							}
                        }
                    }
                })
                //ajax获取的json数据处理，装入你的echarts图表中
                var chartDom = document.getElementById('byCompany');
                myChart = echarts.init(chartDom);
                var option;
                var data1 = [{
                    name: '旺仔牛奶',
                    value: dataTwo.wznn
                }, {
                    name: '冰红茶',
                    value: dataTwo.bhc
                }, {
                    name: 'QQ星',
                    value: dataTwo.qqx
                }, {
                    name: '蛋黄派',
                    value: dataTwo.dhp
                }, {
                    name: '八宝粥',
                    value: dataTwo.bbz
                }, {
                    name: '纯牛奶',
                    value: dataTwo.cnn
                }, {
                    name: '哇哈哈',
                    value: dataTwo.whh
                }, {
                    name: '小洋人',
                    value: dataTwo.xyr
                } ,{
                    name: '旺旺海苔',
                    value: dataTwo.wwht
                },{
                    name: '旺旺雪饼',
                    value: dataTwo.wwxb
                }];
                var data2 = [{
                    name: '旺仔牛奶',
                    value: dataThree.wznn
                }, {
                    name: '冰红茶',
                    value: dataThree.bhc
                }, {
                    name: 'QQ星',
                    value: dataThree.qqx
                }, {
                    name: '蛋黄派',
                    value: dataThree.dhp
                }, {
                    name: '八宝粥',
                    value: dataThree.bbz
                }, {
                    name: '纯牛奶',
                    value: dataThree.cnn
                }, {
                    name: '哇哈哈',
                    value: dataThree.whh
                }, {
                    name: '小洋人',
                    value: dataThree.xyr
                } ,{
                    name: '旺旺海苔',
                    value: dataThree.wwht
                },{
                    name: '旺旺雪饼',
                    value: dataThree.wwxb
                }];
                var data3 = [{
                    name: '旺仔牛奶',
                    value: dataOne.wznn
                }, {
                    name: '冰红茶',
                    value: dataOne.bhc
                }, {
                    name: 'QQ星',
                    value: dataOne.qqx
                }, {
                    name: '蛋黄派',
                    value: dataOne.dhp
                }, {
                    name: '八宝粥',
                    value: dataOne.bbz
                }, {
                    name: '纯牛奶',
                    value: dataOne.cnn
                }, {
                    name: '哇哈哈',
                    value: dataOne.whh
                }, {
                    name: '小洋人',
                    value: dataOne.xyr
                } ,{
                    name: '旺旺海苔',
                    value: dataOne.wwht
                },{
                    name: '旺旺雪饼',
                    value: dataOne.wwxb
                }];
                option = {
                    title: [ {
                        subtext: [ '金爵万象红太阳公司'],
                        left: '16.67%',
                        top: '75%',
                        textAlign: 'center'
                    }, {
                        subtext: '金爵万象大菠萝公司',
                        left: '50%',
                        top: '75%',
                        textAlign: 'center'
                    }, {
                        subtext: '金爵万象物业部',
                        left: '83.33%',
                        top: '75%',
                        textAlign: 'center'
                    }],
					tooltip: {
                        show: true
                    },
                    formatter: '{b} : {c} ({d}%)',
                    color:["#5470c6",
                        "#91cc75",
                        "#fac858",
                        "#ee6666",
                        "#73c0de",
                        "#3ba272",
                        "#fc8452",
                        "#9a60b4",
                        "#ea7ccc",
                        "#3D96AE"],
                    series: [{
                        type: 'pie',
                        radius: '35%',
                        center: ['50%', '50%'],

                        data: data1,
                        emphasis: {focus: 'data'},
                        itemStyle:{
                            normal:{
                                label:{
                                    show: true,
                                    formatter: '{b} :({d}%)'
                                },
                                labelLine :{show:true}
                            }
                        },
                        label: {
                            position: 'outer',
                            alignTo: 'none',
                            bleedMargin: 5
                        },
                        left: 0,
                        right: '66.6667%',
                        top: 0,
                        bottom: 0
                    }, {
                        type: 'pie',
                        radius: '35%',
                        center: ['50%', '50%'],
                        data: data2,
                        emphasis: {focus: 'data'},
                        label: {
                            position: 'outer',
                            alignTo: 'labelLine',
                            bleedMargin: 5
                        },
                        itemStyle:{
                            normal:{
                                label:{
                                    show: true,
                                    formatter: '{b} :({d}%)'
                                },
                                labelLine :{show:true}
                            }
                        },
                        left: '33.3333%',
                        right: '33.3333%',
                        top: 0,
                        bottom: 0
                    }, {
                        type: 'pie',
                        radius: '35%',
                        center: ['50%', '50%'],
                        data: data3,
						emphasis: {focus: 'data'},
                        label: {
                            position: 'outer',
                            alignTo: 'edge',
                            margin: 20
                        },
                        itemStyle:{
                            normal:{
                                label:{
                                    show: true,
                                    formatter: '{b} :({d}%)'
                                },
                                labelLine :{show:true}
                            }
                        },
                        left: '66.6667%',
                        right: 0,
                        top: 0,
                        bottom: 0
                    }]
                };
                myChart.setOption(option);

			}
        });

	</script>

后端代码

我是mybatis-plus框架

 /**
     * 以公司为单位统计售出
     * @return
     */
    @RequestMapping("SoldByCompany")
    public DataGridView SoldByCompany(GainCompanyVo gainCompanyVo,@RequestParam("shijian") String shijian){
        IPage<GainCompany> page = new Page<GainCompany>(gainCompanyVo.getPage(),gainCompanyVo.getLimit());
        System.out.println(shijian);
        QueryWrapper<GainCompany> queryWrapper = new QueryWrapper<GainCompany>();
        queryWrapper.in("createdate",shijian);
        gainCompanyService.page(page,queryWrapper);
        return new DataGridView(page.getTotal(),page.getRecords());
    }

2021快乐！