您的位置：首页 > 编程语言 > Java开发

在eclipse中使用ECharts配合ajax生成图表的入门级使用

2018-01-24 17:02 519 查看
一:



2.


3.新建一个jsp页面

先导入jquery类库 再导入echarts类库



对jsp页面进行编写,写好controller路径,等下获取图表索要的数据



在echarts官网复制想要生成图表的代码,此处以简单柱状图为例











刚刚运行了一下,发现一个错误,导入类库的时候多了一个js,改一下就好了



执行效果图如下



附上js代码

<%@ page language="java" pageEncoding="UTF-8"%>

    <%@ include file="../../baselist.jsp"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="${ctx }/js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="${ctx }/js/echarts.min.js"></script>

<script type="text/javascript">

$(function() {
$.get("${ctx}/cargo/chat/factoryRecord",function(data){

// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
//定义参数,用来替换图表所需要的参数
//数组
    var titles = new Array();
var numbers= new Array();
//对data进行便历,获取参数
for (var i = 0; i < data.length; i++) {
titles[i]=data[i].factory_name;
numbers[i]=data[i].countnum;
}

option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : titles,
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'销量',
            type:'bar',
            barWidth: '60%',
            data:numbers
        }
    ]
};
  // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
})

  

})

</script>

</head>

<body>

<div class="textbox" id="centerTextbox">
<div class="textbox-header">
<div class="textbox-inner-header">
<div class="textbox-title">厂家销售记录</div>
</div>
</div>
</div>

 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

  <div id="main" style="width: 1000px;height:400px;"></div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  echarts java eclipse ajax
相关文章推荐
新的分享
章节导航