echarts 报表使用
下载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 报表使用的更多相关文章
- 使用ECharts报表统计公司考勤加班,大家加班多吗?
最近个项目已经连续加班1个月多,因为公司经常有在外面客户现场或出差的情况,人事每个月初会把上个月的份考勤打卡记录全部发出来,让我们对自己的考勤,突然想到可根据大家打卡时间记录统计每天工作时间,看大家是 ...
- vue组件之echarts报表
vue组件之echarts报表 将echarts报表封装成组件,动态传入数据,显示图表. 1.饼状图 父组件: <MPie :datas="piedata"></ ...
- ECharts报表的使用
知道你们懒得手打网址,给你们贴上:http://echarts.baidu.com/echarts2/ 1.下载并解压之后,找到echarts-2.2.7\build\dist\echarts-all ...
- echarts报表显示%+没有0
function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...
- ECharts 报表事件联动系列四:柱状图,折线图,饼状图实现联动
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- ECharts 报表事件联动系列三:柱状图,饼状图实现联动
源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- ECharts 报表事件联动系列二:柱状图,饼状图添加事件
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- ECharts 报表事件联动系列一:刷新页面
本示例实现了以下功能: 1.点击刷新按钮,仅刷新柱状图,而不是整个页面 2.点击柱状内容刷新柱状图,并更新title 3.点击X轴,Y轴更新title,并弹出alert. 源码代码如下: <!D ...
- echarts报表
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
随机推荐
- java面试题最容易犯错
1. static 和 final 的用法 static 的作用从三个方面来谈,分别是静态变量.静态方法.静态类. 静态变量:声明为 static 的静态变量实质上就是全局变量,当声明一个对象时,并不 ...
- STL笔试面试题总结(干货)(转)
STL笔试面试题总结 一.STL有哪些组件? STL提供六大组件彼此此可以组合套用: 1.容器容器就是各种数据结构,我就不多说,看看下面这张图回忆一下就好了,从实现角度看,STL容器是一种class ...
- BZOJ5205 [CodePlus 2018 3 月赛]白金元首与莫斯科
传送门 emm在雅礼集训的时候听到的一道题 上来就觉得是插头dp 最后果然是轮廓线状压233 我们简化一下题意. 有一个n*m的网格,每个格子是空地或障碍物,询问把每一个空地看成障碍物的情况下,用1* ...
- iSkysoft iMedia Converter Deluxe Mac如何制作视频?视频格式转换工具制作动图的方法
使用iSkysoft iMedia Converter Deluxe Mac如何制作视频?使用视频格式转换工具,你可以轻松进行动图或视频的制作,也可以把你喜欢的视频的某一段提取出来,制作成你自己风格的 ...
- Delphi 访问https /SSL、OpenSSL
访问 Web 网站,最简单用法直接使用 TIdHTTP 控件: 例如:AA := IdHTTP1.Get('www.baidu.com.'); 访问 https 的网站,需要 SSL 库. 在 Win ...
- js 微信公众号网页用户授权,获取微信code,access_tocken,用户信息
第一次做微信网页授权,过程有点艰难,主要是不知道redirect_uri的地址要怎么写,刚开始我以为就是授权结束后要跳转到的首页地址,于是写成了uri = 'http://18i194c049.ias ...
- 【Bootstrapt】offset、push、pull
实现方式的区别: col-md-offset-*,是利用margin-left实现的,col-md-push-*/col-md-pull-*是利用相对定位实现的. 效果的区别: col-md-offs ...
- 二分图最大权匹配——KM算法
前言 这东西虽然我早就学过了,但是最近才发现我以前学的是假的,心中感慨万千(雾),故作此篇. 简介 带权二分图:每条边都有权值的二分图 最大权匹配:使所选边权和最大的匹配 KM算法,全称Kuhn-Mu ...
- OC学习篇之---@class关键字的作用以及#include和#import的区别
前一篇文章说到了OC中类的三大特性:http://blog.csdn.net/jiangwei0910410003/article/details/41707161今天我们来看一下在学习OC的过程中遇 ...
- SQL执行计划详解explain
1.使用explain语句去查看分析结果 如explain select * from test1 where id=1;会出现:id selecttype table type possible_k ...