下载echats后,将下包中的js引入项目,
\echarts-2.2.7\echarts-2.2.7\build\dist //在页面中建立宽高的区域,用来显示报表

<div style="height: 500px;">
  <div id="cmain" style="height:339px;width: 100%;"></div>
  </div>

需要在jsp中引入echarts.js
<script src="/echarts/asset/js/echarts.js"></script>
1 //报表
require.config({
paths : {
echarts : '${basePath}/echarts/asset/js' //指向echarts所需js所在包的路径
}
});
require([ 'echarts', 'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表,此处引入了line折线图,bar柱状图
'echarts/chart/bar' ], function(ec) {
var myChart = ec.init(document.getElementById('cmain')); //初始化报表
var option = {
title : {
text : '图表名称',
subtext : ''
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '1人数', '2人数' ]
},
toolbox : {
show : true,
feature : {
mark : {
show : false
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
boundaryGap : false,
data :[2015-08-11,2015-08-12,2015-08-13,2015-08-14]
} ],
yAxis : [ {
type : 'value',
axisLabel : {
formatter : '{value}'
}
} ],
series : [ {
name : '1人数',
type : 'line',
data :[1,2,3,5]
},{
name:'2人数',
type:'line',
data:[2,3,5,5]
}]
}; myChart.setOption(option);
myChart.setTheme('macarons'); //设置样式主题
});

echarts 报表使用的更多相关文章

  1. 使用ECharts报表统计公司考勤加班,大家加班多吗?

    最近个项目已经连续加班1个月多,因为公司经常有在外面客户现场或出差的情况,人事每个月初会把上个月的份考勤打卡记录全部发出来,让我们对自己的考勤,突然想到可根据大家打卡时间记录统计每天工作时间,看大家是 ...

  2. vue组件之echarts报表

    vue组件之echarts报表 将echarts报表封装成组件,动态传入数据,显示图表. 1.饼状图 父组件: <MPie :datas="piedata"></ ...

  3. ECharts报表的使用

    知道你们懒得手打网址,给你们贴上:http://echarts.baidu.com/echarts2/ 1.下载并解压之后,找到echarts-2.2.7\build\dist\echarts-all ...

  4. echarts报表显示%+没有0

    function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...

  5. ECharts 报表事件联动系列四:柱状图,折线图,饼状图实现联动

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  6. ECharts 报表事件联动系列三:柱状图,饼状图实现联动

    源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  7. ECharts 报表事件联动系列二:柱状图,饼状图添加事件

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  8. ECharts 报表事件联动系列一:刷新页面

    本示例实现了以下功能: 1.点击刷新按钮,仅刷新柱状图,而不是整个页面 2.点击柱状内容刷新柱状图,并更新title 3.点击X轴,Y轴更新title,并弹出alert. 源码代码如下: <!D ...

  9. echarts报表

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

随机推荐

  1. java面试题最容易犯错

    1. static 和 final 的用法 static 的作用从三个方面来谈,分别是静态变量.静态方法.静态类. 静态变量:声明为 static 的静态变量实质上就是全局变量,当声明一个对象时,并不 ...

  2. STL笔试面试题总结(干货)(转)

    STL笔试面试题总结 一.STL有哪些组件? STL提供六大组件彼此此可以组合套用: 1.容器容器就是各种数据结构,我就不多说,看看下面这张图回忆一下就好了,从实现角度看,STL容器是一种class ...

  3. BZOJ5205 [CodePlus 2018 3 月赛]白金元首与莫斯科

    传送门 emm在雅礼集训的时候听到的一道题 上来就觉得是插头dp 最后果然是轮廓线状压233 我们简化一下题意. 有一个n*m的网格,每个格子是空地或障碍物,询问把每一个空地看成障碍物的情况下,用1* ...

  4. iSkysoft iMedia Converter Deluxe Mac如何制作视频?视频格式转换工具制作动图的方法

    使用iSkysoft iMedia Converter Deluxe Mac如何制作视频?使用视频格式转换工具,你可以轻松进行动图或视频的制作,也可以把你喜欢的视频的某一段提取出来,制作成你自己风格的 ...

  5. Delphi 访问https /SSL、OpenSSL

    访问 Web 网站,最简单用法直接使用 TIdHTTP 控件: 例如:AA := IdHTTP1.Get('www.baidu.com.'); 访问 https 的网站,需要 SSL 库. 在 Win ...

  6. js 微信公众号网页用户授权,获取微信code,access_tocken,用户信息

    第一次做微信网页授权,过程有点艰难,主要是不知道redirect_uri的地址要怎么写,刚开始我以为就是授权结束后要跳转到的首页地址,于是写成了uri = 'http://18i194c049.ias ...

  7. 【Bootstrapt】offset、push、pull

    实现方式的区别: col-md-offset-*,是利用margin-left实现的,col-md-push-*/col-md-pull-*是利用相对定位实现的. 效果的区别: col-md-offs ...

  8. 二分图最大权匹配——KM算法

    前言 这东西虽然我早就学过了,但是最近才发现我以前学的是假的,心中感慨万千(雾),故作此篇. 简介 带权二分图:每条边都有权值的二分图 最大权匹配:使所选边权和最大的匹配 KM算法,全称Kuhn-Mu ...

  9. OC学习篇之---@class关键字的作用以及#include和#import的区别

    前一篇文章说到了OC中类的三大特性:http://blog.csdn.net/jiangwei0910410003/article/details/41707161今天我们来看一下在学习OC的过程中遇 ...

  10. SQL执行计划详解explain

    1.使用explain语句去查看分析结果 如explain select * from test1 where id=1;会出现:id selecttype table type possible_k ...