离线使用echarts及一些细节
2014-12-15 10:28
274 查看
最近要做图表,用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>
可以按照图表的要求设置各项属性
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及一些细节
- 一些.net 控件使用的小细节
- 使用CMake构建Ogre工程文件时的一些小细节
- java中使用session的一些细节
- php关于使用strpos方法判断字符串中是否存在字符串的一些细节说明
- eclipse 中添加自定义 classpath 的方法,以及 javac 和 java 的一些使用细节
- Path.Combine (合并两个路径字符串)方法的一些使用细节
- 【转】android中webview使用的一些细节
- Path.Combine (合并两个路径字符串)方法的一些使用细节
- SolrCloud 译文以及一些使用注意细节
- Path.Combine (合并两个路径字符串)方法的一些使用细节
- C语言中 sizeof 操作符使用时的一些细节 和 指针类型的大小
- Path.Combine (合并两个路径字符串)方法的一些使用细节
- 【xenclient】 使用小结 -- 安装过程及值得注意的一些细节
- Java transient关键字使用小结及一些需要注意的细节
- 使用powerdesigner的一些注意细节
- const的一些使用小细节
- 使用DataReader进行数据分页注意的一些细节
- 【IO流一些小细节】IO流中一些方法的使用
- 使用PHPExcel导出数据时Excel单元格数据格式的一些细节