【JSP】Echarts作图必备代码|JS

【JSP】Echarts作图必备代码|JS

案例内容是在JSP中获取数据库数据后，调用JS代码实现Echarts作图。

1.JSP获取数据，使用Java代码调用程序

<!-- JSP获取mysql数据  -->
<%
	ArrayList<Integer> arr = new ArrayList<Integer>();//存储数据列表
	String sql_nan="select count(*) from yonghuxinxi where xingbie="+"'男'";
	int nan = connDbBean.executeSQL(sql_nan);
	arr.add(nan);
	String sql_nv="select count(*) from yonghuxinxi where xingbie="+"'女'";
	int nv = connDbBean.executeSQL(sql_nv);
	arr.add(nv);
%>

2.在HTML5页面中，需要添加一层div，作用是放置后面JS程序生成的Echarts图像。

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px; height: 400px;">
</div>

3.使用JS生成Echarts图像，E-charts需要对图像进行属性设置，如"x"则是标题的居中情况，JS里的<%=变量%>使用的JSP的语法。

<script type="text/javascript">
        function print_echarts(type){
        	if(type==="性别"){
        		var myChart = echarts.init(document.getElementById('main')); // 基于准备好的dom，初始化echarts实例
                // 指定图表的配置项和数据
                var option = {
                    title: {text: '用户性别分布图',
                    	"x":"center",
                    },
                    tooltip: {},
                    textStyle: {"fontSize": 18},
                    legend: {data:["","男","女"],"orient": "vertical","right": "right"},
                    //xAxis: {data: ["男","女"]},
                    //yAxis: {},
                    series: [{"name": "数量","type":"pie",
                    	"data":[
                    		{"name": "男","value":<%=arr.get(0)%>},
                    		{"name": "女","value":<%=arr.get(1)%>},
                    	],"center":["50%", "50%"],
                    }
                    ]
                };
              	
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
        	}
        		
        }
        print_echarts("性别");
        
    </script>