<!DOCTYPE html>
<head>
meta charset="utf-8"title>ECharts</headbody<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
div id="main" style="height:400px"></div>
script src="echarts/esl.js"script>
src="echarts/jquery.min.js" 路径配置
// 路径配置
require.config({
paths:{
‘echarts‘ : ‘echarts/echarts‘,‘echarts/chart/bar‘ : ‘echarts/echarts‘
}
});
最后是使用：以下代码是官网上的，红色部分的data数据等一下我们修改一下从数据库
中去读取
// 使用
require(
[
‘echarts‘,‘echarts/chart/bar‘ // 使用柱状图就加载bar模块，按需加载
],function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById(‘main‘));
var option = {
tooltip: {
show: true
},legend: {
data:[‘销量‘]
},xAxis : [
{
type : ‘category‘, data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],yAxis : [
{
type : ‘value‘
}
],series : [
{
"name":"销量","type":"bar",0)"> "data":[5,20,40,10,20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
整个前段页面的代码如下：主要就是修改了option中的xAxis的data和series中的data,这2个data在官网的demo中都是直接写死的,这里我们采用AJAX发送post请求
来自百度CDN
type="text/javascript">
// 路径配置
require.config({
paths:{
‘echarts : echarts/echarts,echarts/chart/bar
}
});
使用
require(
[
‘ 使用柱状图就加载bar模块，按需加载
],drewEcharts
);
function drewEcharts(ec) {
基于准备好的dom，初始化echarts图表
myChart = ec.init(document.getElementById(main));
var option {
tooltip: {
show: true
},legend: {
data:[
销量]
},xAxis : [
{
type : category(){
arr[];
$.ajax({
type :
"postfalse同步执行
url : bar.dodata : {},dataType :
json返回数据形式为json
success : (result) {
if (result) {
for( i0;i<result.length;i++){
console.log(result[i].name);
arr.push(result[i].name);
}
}
},error : (errorMsg) {
alert(不好意思，大爷，图表请求数据失败啦!);
myChart.hideLoading();
}
})
return arr;
})()
}
],yAxis : [
{
value
}
],series : [
{
name:typebardata:((){
[];
$.ajax({
){
console.log(result[i].num);
arr.push(result[i].num);
}
}
},245)">);
myChart.hideLoading();
}
})
arr;
})()
}
]
};
为echarts对象加载数据
myChart.setOption(option);
}
3.在前一步中AJAX的POST请求的路径是url : "bar.do"在web.xml中配置以下映射如下图：
servletservlet-name>helloBarservlet-class>com.helloBar>
servlet-mappingurl-pattern>/bar.doservlet-mapping 这样，通过bar.do就会找到com这个包下面的helloBar这个servlet.这个servlet的主要作用是向数据库读取数据并返回给前段页面，这里我用的是局部数据源去链接，关于局部数据源怎么连这里我就不讲述了，不会的同学可以在我的博客中找到。当然也可以使用最基本的JDBC去连接。
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
//创建了一个bardao的对象，barDAO主要是对数据库的连接和对数据库的操作
barDAO bardao=new barDAO();
//调用bardao的select_all()方法把从数据库中读取所有的数据返回的是一个ArrayList，ArrayList里面放的是一个barBean
ArrayListbarBean> array = bardao.select_all();
//设置返回时的编码格式
response.setContentType("text/html; charset=utf-8");
//调用JSONArray.fromObject方法把array中的对象转化为JSON格式的数组
JSONArray json=JSONArray.fromObject(array);
System.out.println(json.toString());
//返回给前段页面
PrintWriter out = response.getWriter();
out.println(json);
out.flush();
out.close();
}
数据库的bar表格式如下图：
barBean的代码：
import java.io.Serializable;
import java.sql.Date;
public class barBean {
private String name;
private int num;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
}
barDAO的代码：
public class barDAO {
private static InitialContext context = null;
private DataSource dataSource = null;
private static final String SELECT_ALL = "SELECT*FROM bar ";
public barDAO(){
try{
if(context == null){
context = new InitialContext();
}
dataSource = (DataSource)context.lookup("java:comp/env/jdbc/sampleDS");
}catch(NamingException e2){
}
}
public Connection getConnection(){
Connection conn = null;
try{
conn = dataSource.getConnection();
}catch(SQLException e){}
return conn;
}
public ArrayList select_all()
{
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rst = null;
try{
conn = dataSource.getConnection();
pstmt = conn.prepareStatement(SELECT_ALL);
rst = pstmt.executeQuery();
ArrayList> array = new ArrayList();
while(rst.next())
{
barBean bar = new barBean();
bar.setName(rst.getString("name"));
bar.setNum(rst.getInt("num"));
array.add(bar);
}
pstmt.close();
rst.close();
return array;
}catch(SQLException e){
System.out.println("Error occured at barDAO->select_all()");
return new ArrayList();
}finally{
try{
conn.close();
}catch(SQLException e){
System.out.println("Error occured at closing connection in barDAO");
}
}
}
}
4.前段的页面在确认ajax请求success以后，读取返回后的数组的内容。就可以显示了。
echarts通过ajax向服务器发送post请求,布布扣,bubuko.com
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
