ECharts报表的使用
知道你们懒得手打网址，给你们贴上：http://echarts.baidu.com/echarts2/
1、下载并解压之后，找到echarts-2.2.7\build\dist\echarts-all.js
2、在工程里新建一个HTML页面，完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./js/echarts-all.js"></script>
<title>ECharts</title>
</head>
<body> <!-- 定义div区域 -->
<div id ="main" style="width:600px;height:400px"></div> <script type="text/javascript">
// 初始化echarts实例，并关联div
var myChart = echarts.init(document.getElementById('main'));
//配置报表的数据和参数
var option={
backgroundColor: '#2c343c',
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:400, name:'搜索引擎'},
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:274, name:'联盟广告'},
{value:235, name:'视频广告'}
],
roseType: 'angle', itemStyle: {
emphasis: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
} }
]
} // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); </script> </body>
</html>
注意ECharts的js的引入路径正确，即可
效果如下所示：
ECharts报表的使用的更多相关文章
- 使用ECharts报表统计公司考勤加班，大家加班多吗？
最近个项目已经连续加班1个月多,因为公司经常有在外面客户现场或出差的情况,人事每个月初会把上个月的份考勤打卡记录全部发出来,让我们对自己的考勤,突然想到可根据大家打卡时间记录统计每天工作时间,看大家是 ...
- vue组件之echarts报表
vue组件之echarts报表 将echarts报表封装成组件,动态传入数据,显示图表. 1.饼状图 父组件: <MPie :datas="piedata"></ ...
- echarts 报表使用
下载echats后,将下包中的js引入项目,\echarts-2.2.7\echarts-2.2.7\build\dist //在页面中建立宽高的区域,用来显示报表 <div style=&qu ...
- 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= ...
随机推荐
- 马尔科夫随机场模型（MRF-Markov Random Field）
原文: http://blog.sina.com.cn/s/blog_92c398b00102vs3q.html 马尔科夫过程 隐马尔科夫过程 与马尔科夫相比,隐马尔可夫模型则是双重随机过程,不 ...
- ros rviz 启动指定的rviz 文件
rviz -d rviz文件名 例如:rviz -d myname.rviz
- 常用 对象检测 api
isPrototypeOf() 判断某个 proptotype 对象和某个实例之间的关系 alert(Cat.prototype.isPrototypeOf(cat1)); //true ale ...
- Android AlarmManager 的使用
AlarmManager简介及使用场景: AlarmManager的使用机制有的称呼为全局定时器,有的称呼为闹钟.通过对它的使用,它的作用和Timer有点相似. 都有两种相似的用法: (1).在指定时 ...
- python数据持久存储-pickle模块
pickle模块实现了基本的数据序列和反序列化.pickle模块的序列化操作我们能够将程序中运行的对象信息保存到文件中去,通过pickle模块的反序列化操作,能够从文件中创建上一次程序保存的对象. 接 ...
- oralce表空间使用情况查询
SELECT UPPER(F.TABLESPACE_NAME) TABLESPACE_NAME, -- 表空间名, D.TOT_GROOTTE_MB TOT_GROOTTE_MB, -- 表空间大小( ...
- Windows Update 自动更新 设定 被锁（变灰）
估计是McAfee自动更改掉的. 真TM烦人. 方法 1 不过找到了回复方法了: http://www.askvg.com/how-to-change-windows-update-settings- ...
- aria2c --enable-rpc --rpc-listen-all -D
在后台启动的方法,如题, 用来配合 web-aria2
- LeetCode--136--只出现一次的数字
问题描述: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 示例 1: ...
- 百度安卓SDK秘钥Key错误
下载官方安卓地图demo,输入报名和sha1申请AK,发现key错误 构建的时候要指定生成的key 安卓定位BaiduLocDemo出现aapt.exe finished with non-zero ...