[Echartsの入门级+SpringMvc提供异步数据接口]

最新推荐文章于 2024-04-29 18:42:59 发布

Twenty__Seven

最新推荐文章于 2024-04-29 18:42:59 发布

阅读量186

点赞数

分类专栏： ECharts 文章标签： javascript

本文链接：https://blog.csdn.net/qq_40959340/article/details/104314347

版权

ECharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.Echarts的渲染:

给图标建立一个DIV,将其放在里面,

<div id="sex_count" style="width:40%;height:50%; class="layui-card-body">

</div>

2.Javascript进行渲染

 <script type="text/javascript">
    //********************************性别统计
        // 基于刚才准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('sex_count'));

        //想后端发送get请求,请求数据                                回调函数 data中携带数据
        $.get('${pageContext.request.contextPath}/admin/EChartsTest', function (data) {
            myChart.setOption({
            	tooltip: {//鼠标放在图形上会出现提示信息
            		trigger: 'item',  // item--数据项图形触发   axis--bar,line图形触发
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
            	},//tooltip end
            	legend: {
                    orient: 'vertical',//垂直放置
                    left: 'right',//居左
                    data: ['男','女']
                },//legend end
                series : [
                    {
                        name: '性别',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data:data.data_pie //后端给的数据接口
                    }
                ],//series end
                itemStyle: {//样式
                    emphasis: {
                        shadowBlur: 10,  
                        shadowOffsetX: 0,  //阴影 x轴偏移量
                        shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影颜色
                    }
                }//itemStyle end
            });//setOption end
        });//get end
        
      
    </script>

3.SpingMVC

/*****************
	 * @return  性别统计图 Echart扇形统计图
	 */
	@RequestMapping("/admin/EChartsTest")
	@ResponseBody
	public Map<String, List<Echart>> EChartsTest(){
		
		int boyNum=schoolarshipApplicationFormService.getBoyNum();//查询男孩数量
		int all=schoolarshipApplicationFormService.getApplyNum();//查询所有人数量
		int girlNum=all-boyNum;//总人数-男孩数量=女孩数量
		
		Echart echart1=new Echart();
		echart1.setValue(boyNum);
		echart1.setName("男");
		
		Echart echart2=new Echart();
		echart2.setName("女");
		echart2.setValue(girlNum);
		
		List<Echart> list=new ArrayList<Echart>();
		list.add(echart1);
		list.add(echart2);
		
		Map<String,List<Echart>> map=new HashMap<String,List<Echart>>();
		map.put("data_pie", list);//前端从这里取值
		return map;
	}

EChart类中为JavaBean,其中包含 String name.int value以及对应的Getter(),Setter(),toString()

展示结果: