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

最新推荐文章于 2021-09-07 14:11:40 发布

wanglikun132

最新推荐文章于 2021-09-07 14:11:40 发布

阅读量8.5k

点赞数 2

文章标签： echarts java eclipse ajax

本文链接：https://blog.csdn.net/wanglikun132/article/details/79151331

版权

一:

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>

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

wanglikun132

关注

2
点赞
踩
47

收藏

觉得还不错? 一键收藏
4
评论
在eclipse中使用ECharts配合ajax生成图表的入门级使用

一:2.3.新建一个jsp页面先导入jquery类库再导入echarts类库对jsp页面进行编写,写好controller路径,等下获取图表索要的数据在echarts官网复制想要生成图表的代码,此处以简单柱状图为例刚刚运行了一下,发现一个错误,导入类库的时候多了一个js,改一下就好了执行效果图如下
复制链接

扫一扫