【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作~
今天小编为大家推荐一个神奇的酷站。ECharts,一个纯 Javascript 的图表库。
在首页有完整的说明,也专门的例子进行讲解,如果有一定前端基础,可以很快上手。而没有经验的,照模画样也可以弄出来。
一般性的例子里面包含了常用的一般性表格,点击进去就可以看到代码。修改后点击刷新就能得到修改后的样子
特别例子: http://echarts.baidu.com/examples.html#chart-type-graph画廊: http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
在特别例子和画廊里,有官方的精美例子,而Gallery里面则是用户自己制作的一些精美图形来进行分享。你所需要做的,就是过去拷贝代码拿来用。
大家可以欣赏欣赏特效案例:
![]()
![]()
![]()
![]()
![]()
![]()
![]()
还可以进行立体像素风案例制作:
选一张色彩丰富的颜料图作为原始素材

接下来就是见证奇迹的时刻~
![]()
可以通过鼠标拖动来改变视角,通过滚轮来放大缩小图像~~
![]()
是不是超酷呢?再调整一下参数试试~~
![]()
简直整容术~~再稍微调整一下,然后只需要在画面中心右键,图片另存为,大功告成~~
![]()
![]()
1、开源软件,并且我们提供了非常炫酷的图形界面,特色是地图,另外还提供了柱状图、折线图、饼图、气泡图及四象限图等;
2,使用简单,在官网中为我们封装了js,只要会引用就会得到完美的展示效果;
3,种类多,echarts实现简单,各类图形都有;相应的模板,还有丰富的API及文档说明,非常详细;
【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作~的更多相关文章
- sChart.js:一个小型简单的图表库
介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图.折线图.饼状图和环形图四种基本的图表.麻雀虽小,五脏俱全.sChart.js 基本可以满足这四种图表的需求.而它 ...
- 准备开发一个基于canvas的图表库,记录一些东西(一)
开源的图表库已经有很多了,这里从头写个自己的,主要还是 提高自己js的水平,增加复杂代码组织的经验 首先写一个画图的库,供以后画图表使用.经过2天的开发,算是能拿出点东西了,虽然功能还很弱,但是有了一 ...
- 分享一个CSS+JavaScript框架materializecss
一.内容: CSS+JavaScript框架materializecss. 二.网址:http://materializecss.com 三.图片:
- 分享一个纯css制作的动画化,在网页(手机)载入等的时候能够引用!
CSS代码例如以下: /* Custom Stylesheet */ body, html { margin: 0; -webkit-font-smoothing: antialiased; back ...
- gRaphael——JavaScript 矢量图表库:两行代码实现精美图表
gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库.你只需要编写几行简单的代码就能创建出精美的条形图.饼图.点图和曲 ...
- 前端开发者常用的9个JavaScript图表库
当前,数据可视化已经成为数据科学领域非常重要的一部分.不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析. 对任何一个组织来说,如果能够充分的获取数据.可视化数据和分 ...
- 轻量高效的开源JavaScript插件和库 【转】
图片 布局 轮播图 弹出层 音频视频 编辑器 字符串 表单 存储 动画 时间 其它 加载器 构建工具 测试 包管理器 CDN 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果 ...
- ECharts JavaScript图表库 ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
- JavaScript 加解密库(crypto-js)
1. 概述 1.1 说明 crypto-js(GitHub)是谷歌开发的一个纯JavaScript的加密算法类库,可以非常方便的在前端进行其所支持的加解密操作.目前crypto-js已支持的算法有:M ...
随机推荐
- HDU2586How far away? LCA
去博客园看该题解 题意 给出一棵树,以及每条边的权值,给出一些询问,每个询问是2个节点,求每个询问对应的2个节点的距离. 算法 LCA_Tarjan 代码 #include <cstring&g ...
- 数仓1.4 |业务数仓搭建| 拉链表| Presto
电商业务及数据结构 SKU库存量,剩余多少SPU商品聚集的最小单位,,,这类商品的抽象,提取公共的内容 订单表:周期性状态变化(order_info) id 订单编号 total_amount 订单金 ...
- request和session的区别
request多用于表单提交,表单数据等 session用于服务器端的记录变量,比如用户的登陆和登出啊 request 资源占用小,安全性较高,但是不持续性 session 资源消耗较大,安全性较低, ...
- 在controller中将timestamp类型的数据通过toString()方法变成字符串
然后在miniui里面将dateFormat="yyyy-MM-dd",变成想要的格式.
- Create-react-app+Antd-mobile+Less配置(学习中的记录)
(参考别人结合自己的整理得出,若有错误请大神指出) Facebook 官方推出Create-React-App脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能. 详 ...
- hdu5745(dp+bitset)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5745 C++ bitset的用法:https://www.cnblogs.com/magisk/p/880 ...
- Activity插件化解决方案
--摘自<android插件化开发指南> 1.宿主App加载插件中的类 2.最简单的插件化方案就是在宿主的androidmanifest.xml中申明插件中的四大组件 把插件dex合并到宿 ...
- inner join 内联与left join 左联
今天老板把我叫过去,给我分析了一下我写的存储过程[捂脸羞愧中...],因为又临时加了个需求需要关联另外一个视图,我写成了内联,所以读取出来的数据少了好多. select t1.MOTCARRIERNA ...
- BZOJ.1132.[POI2008]Tro(极角排序)
BZOJ 洛谷 考虑暴力,每次枚举三个点,答案就是\(\frac12\sum_{k<j<i}(i-k)\times(j-k)\). 注意到叉积有分配率,所以固定\(k\),枚举\(i,j\ ...
- BZOJ.3453.tyvj 1858 XLkxc(拉格朗日插值)
BZOJ 题意即求\[\sum_{i=0}^n\sum_{j=1}^{a+id}\sum_{x=1}^jx^k\] 我们知道最后一个\(\sum\)是自然数幂和,设\(f(n)=\sum_{x=1}^ ...