赞
踩
图表根据日期的切换 ，数据也实时变化。
前提是先引入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快乐！