最近要做图表,用js起来太麻烦,所以就找些开源的库来用,发现echarts挺不错,

echarts的文档把所有东西都说的很明白了,直接下载zip包,要是想离线使用的话只需要引用下载包里面的dist文件夹即可

首先把下载的包放到项目文件夹,这里使用  ./ 来引用

直接在配置中引用:

<script type="text/JavaScript" src="./echarts-2.2.0/dist/echarts-all.js"> </script> 
<script type="text/javascript" src="./echarts-2.2.0/dist/echarts.js"> </script>

    require.config({
paths: {
//echarts: 'http://echarts.baidu.com/build/dist'
echarts:'./echarts-2.2.0/dist/'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],

其中注释掉的是在线引用百度的echarts,下面则是引用离线的,我把 D:\Download\echarts-2.1.10\build\source路径里的文件都放到我项目的echarts文件夹下就可以正常使用了

可以按照图表的要求设置各项属性

var option = {
backgroundColor:'#888888', //设置图表的背景颜色
title : {
text: '版本最高覆盖率',
textStyle:
{
color: '#888888',
},
},
tooltip: {
show: true
},
/*
legend: {
data:['覆盖率']
},
*/
xAxis : [
{
type : 'category',
name : '版本名称',
data : versionnames,
axisLine :
{ // 轴线
show: true,
lineStyle: {
color: 'white',
//type: 'solid',
width: 2}
}
}
],
yAxis : [
{
type : 'value',
name : '覆盖率(%)',
min : 0,
max : 100,
axisLine :
{ // 轴线
show: true,
lineStyle: {
color: 'white',
//type: 'solid',
width: 2}
}
}
],
series : [
{
name : '覆盖率',
type: 'bar',
data : coverages,
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
/*
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
*/
return colo[params.dataIndex];
},
label : {show: true,position:'top',formatter:'{c} %'}
}},
}
]
};

设置背景颜色,设置数据,设置数据颜色等等,还是很方便的

离线使用echarts及一些细节的更多相关文章

  1. Python学习懒出极致——自备常用链接

    linux: samba配置:http://blog.chinaunix.net/uid-23069658-id-3142052.html ubuntu: mysql启停:http://www.2ct ...

  2. python学习博客地址集合。。。

    python学习博客地址集合...   老师讲课博客目录 http://www.bootcdn.cn/bootstrap/  bootstrap cdn在线地址 http://www.cnblogs. ...

  3. 老男孩老师的博客地址 - 转自devops1992

    害怕他那天不让人看了,所以我就复制一份到我自己的博客里. http://www.bootcdn.cn/bootstrap/  bootstrap cdn在线地址 http://www.cnblogs. ...

  4. 安卓平台使用pocketSphinx离线语音识别

    版权声明:本文为elecdog原创文章,可以转载,但必须在明确位置注明出处!谢谢合作. 关于语音识别,国内已经有比较好的公司推出相关的服务了,比如百度免费的离在线融合语音识别以及讯飞收费的在线和离线语 ...

  5. 聊一聊Redis的离线分析

    背景 Redis 或许是我们大部分场景都会用到的一个利器,虽然是利器,用的姿势不对的话,终究还是会整出幺蛾子的. 比较常见的问题,不外乎内存暴增,慢查询等情况. 那么对于内存问题,可以借助redis自 ...

  6. UOJ Round #15 [构造 | 计数 | 异或哈希 kmp]

    UOJ Round #15 大部分题目没有AC,我只是水一下部分分的题解... 225[UR #15]奥林匹克五子棋 题意:在n*m的棋盘上构造k子棋的平局 题解: 玩一下发现k=1, k=2无解,然 ...

  7. Sketch Measure

    Sketch Measure 让创建规范成为开发者和团队协作的乐趣 http://sketch.im/plugins/1 安装 下载安装包 双击 Sketch Measure.sketchplugin ...

  8. echarts 地图 离线json包分享

    最近,项目中需要用到地图,由于项目的特殊性,只能使用内网获取数据. 然而,echarts官网上的离线地图包(http://echarts.baidu.com/download-map.html)早在一 ...

  9. echarts 地图 免费离线js,json包分享

    最近,项目中需要用到地图,由于项目的特殊性,只能使用内网获取数据. 然而,echarts官网上的离线地图包(http://echarts.baidu.com/download-map.html)早在一 ...

随机推荐

  1. MARKDOWN--介绍http://www.jianshu.com/p/q81RER

    简       注册登录 添加关注 作者 简书2013.04.22 22:02* 写了267022字,被8398人关注,获得了9900个喜欢 献给写作者的 Markdown 新手指南 字数1600 阅 ...

  2. 学习tornado:安全

    http://blog.csdn.net/siddontang/article/details/18053915

  3. 关于web.config中customErrors

    <customErrors>节点用于定义一些自定义错误信息的信息.此节点有Mode和defaultRedirect两个属性,其中defaultRedirect属性是一个可选属性,表示应用程 ...

  4. Oracle数据库——数据库安全性管理

    一.涉及内容 1.验证系统权限管理. 2.验证角色管理. 3.验证概要文件管理. 二.具体操作 (一) 1.根据以下要求进行系统权限的授予与回收操作. (1)创建用户user1,并为它授予create ...

  5. shell知识点

    各个项目以实践为主.原理及更多细节介绍,请查看官方文档: 例如:bash,grub,postfix,pam,fastcgi,httpd,rsync等诸多项目. 各种总结表格 http://www.cn ...

  6. OpenJudge计算概论-短信计费

    /*===================================== 短信计费 总时间限制: 1000ms 内存限制: 65536kB 描述 用手机发短信,一般一条短信资费为0.1元,但限定 ...

  7. 更简单的跨域解决方案 - CORS

    跨域问题是前端开发经常遇到的了,大家可能常用的就是JSONP了, JSONP非常方便,只要前后端约定好一个方法名,就可以沟通了,但JSONP也有一定的局限,JSONP只支持GET请求,还有当你想提供一 ...

  8. javascript 毫秒转日期 日期时间转毫秒

    js毫秒时间转换成日期时间 var oldTime = (new Date("2011/11/11 20:10:10")).getTime(); //得到毫秒数 大多数是用毫秒数除 ...

  9. java指针

    import java.util.ArrayList; import java.util.List; public class TestPoint { public static void main( ...

  10. 会话控制:SESSION,COOKIE

    1.http协议: HTTP—超文本传输协议,在TCP协议(长连接.像一个硬件)基础上; 特点:短连接,无状态协议,没法记录本次连接的状态;适用于静态页面的访问,对于后期某些页面是需要浏览器预知客户信 ...