离线使用echarts及一些细节
最近要做图表,用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及一些细节的更多相关文章
- Python学习懒出极致——自备常用链接
linux: samba配置:http://blog.chinaunix.net/uid-23069658-id-3142052.html ubuntu: mysql启停:http://www.2ct ...
- python学习博客地址集合。。。
python学习博客地址集合... 老师讲课博客目录 http://www.bootcdn.cn/bootstrap/ bootstrap cdn在线地址 http://www.cnblogs. ...
- 老男孩老师的博客地址 - 转自devops1992
害怕他那天不让人看了,所以我就复制一份到我自己的博客里. http://www.bootcdn.cn/bootstrap/ bootstrap cdn在线地址 http://www.cnblogs. ...
- 安卓平台使用pocketSphinx离线语音识别
版权声明:本文为elecdog原创文章,可以转载,但必须在明确位置注明出处!谢谢合作. 关于语音识别,国内已经有比较好的公司推出相关的服务了,比如百度免费的离在线融合语音识别以及讯飞收费的在线和离线语 ...
- 聊一聊Redis的离线分析
背景 Redis 或许是我们大部分场景都会用到的一个利器,虽然是利器,用的姿势不对的话,终究还是会整出幺蛾子的. 比较常见的问题,不外乎内存暴增,慢查询等情况. 那么对于内存问题,可以借助redis自 ...
- UOJ Round #15 [构造 | 计数 | 异或哈希 kmp]
UOJ Round #15 大部分题目没有AC,我只是水一下部分分的题解... 225[UR #15]奥林匹克五子棋 题意:在n*m的棋盘上构造k子棋的平局 题解: 玩一下发现k=1, k=2无解,然 ...
- Sketch Measure
Sketch Measure 让创建规范成为开发者和团队协作的乐趣 http://sketch.im/plugins/1 安装 下载安装包 双击 Sketch Measure.sketchplugin ...
- echarts 地图 离线json包分享
最近,项目中需要用到地图,由于项目的特殊性,只能使用内网获取数据. 然而,echarts官网上的离线地图包(http://echarts.baidu.com/download-map.html)早在一 ...
- echarts 地图 免费离线js,json包分享
最近,项目中需要用到地图,由于项目的特殊性,只能使用内网获取数据. 然而,echarts官网上的离线地图包(http://echarts.baidu.com/download-map.html)早在一 ...
随机推荐
- MARKDOWN--介绍http://www.jianshu.com/p/q81RER
简 注册登录 添加关注 作者 简书2013.04.22 22:02* 写了267022字,被8398人关注,获得了9900个喜欢 献给写作者的 Markdown 新手指南 字数1600 阅 ...
- 学习tornado:安全
http://blog.csdn.net/siddontang/article/details/18053915
- 关于web.config中customErrors
<customErrors>节点用于定义一些自定义错误信息的信息.此节点有Mode和defaultRedirect两个属性,其中defaultRedirect属性是一个可选属性,表示应用程 ...
- Oracle数据库——数据库安全性管理
一.涉及内容 1.验证系统权限管理. 2.验证角色管理. 3.验证概要文件管理. 二.具体操作 (一) 1.根据以下要求进行系统权限的授予与回收操作. (1)创建用户user1,并为它授予create ...
- shell知识点
各个项目以实践为主.原理及更多细节介绍,请查看官方文档: 例如:bash,grub,postfix,pam,fastcgi,httpd,rsync等诸多项目. 各种总结表格 http://www.cn ...
- OpenJudge计算概论-短信计费
/*===================================== 短信计费 总时间限制: 1000ms 内存限制: 65536kB 描述 用手机发短信,一般一条短信资费为0.1元,但限定 ...
- 更简单的跨域解决方案 - CORS
跨域问题是前端开发经常遇到的了,大家可能常用的就是JSONP了, JSONP非常方便,只要前后端约定好一个方法名,就可以沟通了,但JSONP也有一定的局限,JSONP只支持GET请求,还有当你想提供一 ...
- javascript 毫秒转日期 日期时间转毫秒
js毫秒时间转换成日期时间 var oldTime = (new Date("2011/11/11 20:10:10")).getTime(); //得到毫秒数 大多数是用毫秒数除 ...
- java指针
import java.util.ArrayList; import java.util.List; public class TestPoint { public static void main( ...
- 会话控制:SESSION,COOKIE
1.http协议: HTTP—超文本传输协议,在TCP协议(长连接.像一个硬件)基础上; 特点:短连接,无状态协议,没法记录本次连接的状态;适用于静态页面的访问,对于后期某些页面是需要浏览器预知客户信 ...