var chartOutChar = null;

 var option1 = {
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['蒸发量','降水量','平均温度']
},
xAxis: [
{
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis: [
{
type: 'value',
name: '水量',
min: ,
max: ,
interval: ,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: ,
max: ,
interval: ,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name:'蒸发量',
type:'bar',
data:[]
},
{
name:'降水量',
type:'bar',
data:[]
},
{
name:'平均温度',
type:'line',
yAxisIndex: ,
data:[]
}
]
}; function loadChartOut() {
$.getJSON('/maze/rest/view/rain.html', function (data) {
//上面这个url是重点,组成为:项目名/过滤前缀/Controller中mapping值,当页面加载此js时,它会向后台取数据,将后台的数据注入到echart中
if (data.success1) {
chartOutChar.showLoading({text: '正在努力的读取数据中...'});
chartOutChar.setOption({
series: [
{
name:'蒸发量',
data:data.c_eva
},
{
name:'降水量',
data:data.c_rain
},
{
name:'平均温度',
data:data.c_avgt
}
]
});
chartOutChar.hideLoading();
}else {
alert('提示', data.msg);
}
});
} //载入图表
$(function () {
chartOutChar = echarts.init(document.getElementById('showChart'));
chartOutChar.setOption(option1);
loadChartOut();
window.addEventListener('resize', function () {
chartOutChar.resize();
mychart.resize();
});
});

controllr

 @Controller
@RequestMapping(value = "/view")
public class EchartsController {
@Resource
private EchartService echartService; @RequestMapping(value = "/rain.html",method = RequestMethod.GET)
@ResponseBody
public Object showChart(){
Map<String, Object> map = new HashMap<String, Object>();
List<Float> clist1 = new ArrayList<Float>();
List<Float> clist2 = new ArrayList<Float>();
List<Float> clist3 = new ArrayList<Float>(); List<EcBar> chartList = echartService.listBar(); for(EcBar cl : chartList){
clist1.add(cl.getEvaporation());
clist2.add(cl.getRainfall());
clist3.add(cl.getAvgtemp());
}
map.put("c_eva",clist1);
map.put("c_rain",clist2);
map.put("c_avgt",clist3);
map.put("success1",true);
return map;
}
}

jsp页面

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<script type="text/javascript" src="hemi/js/echarts.js"></script>
<script type="text/javascript" src="hemi/js/showChart.js"></script>
<script type="text/javascript" src="hemi/js/funnelView.js"></script> <h3 class="page-title">
Echarts 展示 <small>可视化图表</small>
</h3>
</div> <div class="row">
<div class="col-lg-6 col-sm-12 col-xs-12 col-sm-12">
<div id="showChart" style="width:100%;height:600px;margin-left:0px;margin-right:6px;margin-bottom:8px;float:left;overflow:hidden;"></div>
</div> <div class="col-lg-6 col-sm-12 col-xs-12 col-sm-12">
<div id="showFunnelChart" style="width:100%;height:600px;margin-left:0px;margin-right:6px;margin-bottom:8px;float:left;overflow:hidden;"></div>
</div>
</div>

这种是采用js获取后台数据放入页面的所以是比较和谐的,可以使用html,也可以使用其他的

echart在jsp中使用另外的方法的更多相关文章

  1. JSP中声明变量、方法

    在JSP页面中声明局部变量,全局变量,方法等 代码示例: <%@ page language="java" contentType="text/html; char ...

  2. jsp中遇到Integer的方法valueOf()和parseInt()的区别.前者要求是对象类型,后者是数字型字符串

    他们有本质区别,Integer.valueof(String s)是将一个包装类是将一个实际值为数字的变量先转成string型再将它转成Integer型的包装类对象(相当于转成了int的对象)这样转完 ...

  3. jsp中引入JavaScript的方法

    1:在页面中直接嵌入JavaScript <script language="javascript">..........</script> 2:链接外部J ...

  4. IntelliJ IDEA的jsp中内置对象方法无法被解析的解决办法

    主要原因是因为缺乏依赖 可以通过添加依赖的方式 导入servlet-api.jar,jsp-api.jar,tomcat-api.jar 这三个jar即可 这三个jar在tomcat的lib目录下有 ...

  5. JSP中调用Spring的方法

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. JSP中getParameter和getAttribute区别

    (1)HttpServletRequest类有setAttribute()方法,而没有setParameter()方法 (2)当两个Web组件之间为链接关系时,被链接的组件通过getParameter ...

  7. 实验九 在JSP中使用数据库

    实验性质:验证性 实验学时: 1学时 实验地点: 一 .实验目的与要求 1. 掌握在JSP中使用数据库的方法. 2. 掌握JSP对数据库的基本操作:增.删.改.查. 二. 实验内容 1.JSP访问数据 ...

  8. jsp中 EL表达式 ${}

    原文位置:https://zhidao.baidu.com/question/711232806155434565.html jsp标签中的 ${表达式}用来输出或者计算一个表达式的内容,比如${3+ ...

  9. SpringMVC框架下实现JSON(类方法中回传数据到jsp页面,使用jQuery方法回传)

    JSON的实现,即将需要的数据回传到jsp页面: 1>.加入实现Json的三个架包到lib中:2>.目标方法上边加入注解,需要返回的值3>.在jsp页面中书写jQuery方法: ec ...

随机推荐

  1. 如何用CURL将文件下载到本地指定文件夹

    若直接调用下载文件的url有重定向,则需先调用第一个方法,获取到跳转后的url,才可直接下载.否则需要手动点击浏览器的下载确定按钮. 调用示例: $imgpath = "http://www ...

  2. random和os模块

    一.random模块 常用方法如下: #-*- coding:utf-8 -*- import random print(random.randint(1,100)) # 获取一个范围内的随机数,包含 ...

  3. 第01章 开发准备(对最新版的RN进行了升级)1-4 项目底部导航菜单开发

  4. 217. Contains Duplicate数组重复元素 123

    [抄题]: Given an array of integers, find if the array contains any duplicates. Your function should re ...

  5. GNU 和 g++(转)

    百度知道 GNU计划,又称革奴计划,是由Richard Stallman在1983年9月27日公开发起的.它的目标是创建一套完全自由的操作系统.Richard Stallman最早是在net.unix ...

  6. python3--列表生成式

    # Auther: Aaron Fan # 原始的写法:a = []for i in range(10): a.append(i*2)print(a) # 用列表生成式完成上面的写法:a = [i*2 ...

  7. Python3 Scrapy + Selenium + 阿布云爬取拉钩网学习笔记

    1 需求分析 想要一个能爬取拉钩网职位详情页的爬虫,来获取详情页内的公司名称.职位名称.薪资待遇.学历要求.岗位需求等信息.该爬虫能够通过配置搜索职位关键字和搜索城市来爬取不同城市的不同职位详情信息, ...

  8. 智能IC卡中的文件系统

    1.文件系统是COS的重要模块之一,它负责组织.管理.维护IC卡内存储的所有数据. 文件系统的设计和实现既是COS系统中最灵活.最有个性的部分,也是对系统整体结构影响最大的模块之一. 2.在IC卡内, ...

  9. FutureTask子任务取消执行的状态判断

    示例代码可以从github上获取 https://github.com/git-simm/simm-framework.git 一.业务场景: 系统中存在多种场景并发操作事务执行时互锁的情况,导致任务 ...

  10. Densely Connected Convolutional Networks(緊密相連卷積網絡)

    - Dense blocks where each layer is connected to every other layer in feedforward fashion(緊密塊是指每一個層與每 ...