离线使用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)早在一 ...
随机推荐
- Android开发常用的一些第三方网站
聚合数据-免费数据调用 https://www.juhe.cn/ 有赞- 免费的微商城 http://youzan.com/ 秀米微信图文编辑器 http://xiumi.us/ 禅道项目管理软件 h ...
- SHOW OPEN TABLES – what is in your table cache
One command, which few people realize exists is SHOW OPEN TABLES – it allows you to examine what tab ...
- Jquery easyui的validatebox控件和正则表达式
http://blog.csdn.net/dandanzmc/article/details/36421465 仔细观察jquery.validatebox.js文件,会发现它的验证其实还是采用的正则 ...
- CSS中:display:none与visible:hidden的区别
display:none视为不存在且不加载,即,不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. visibility:hidden隐藏,但在浏览时保留位置,即,使对象在网页上不可见,但该对 ...
- CentOS6.4系统启动失败故障排查
转:http://www.centoscn.com/CentosBug/osbug/2014/1028/4011.html 操作系统启动失败如下图报错: 故障现象: 从图中可以看到,操作系统启动的过程 ...
- 2016国赛B题小区数据爬取软件
-------------------------请以任何方式留言给作者,否则视为窃取----------------------------- 看你们找数据找的那么辛苦 我就苦逼的花了1个小时写了个 ...
- 不透明度(兼容IE8,chrome,firefox)
background-color: rgba(0, 0, 0, 0.2); background-color: black; opacity: 0.2; filter: Alpha(opacity=2 ...
- mysqldump: Got error: 1556: You can't use locks with log tables. when using LOCK TABLES
mysqldump: Got error: 1556: You can't use locks with log tables. when using LOCK TABLES 我是把一些mysqldu ...
- Android 网络编程 Socket
1.服务端开发 创建一个Java程序 public class MyServer { // 定义保存所有的Socket,与客户端建立连接得到一个Socket public static List< ...
- 【solr】 solr 5.4.1 和tomcat 基础环境搭建
下载省略; solr下载地址:http://www.apache.org/dyn/closer.cgi/lucene/solr/ tomcat 下载安装(省略). solr5.4.1 默认在jetty ...