数据可视化
mjzhang1993
风起于青萍之末
展开
-
在 React 项目中使用 ECharts
在 React 项目中使用 ECharts说明 重要文件版本“react”: “^16.2.0”“echarts”: “^4.0.2”“redux”: “^3.7.2”,“react-router-dom”: “^4.2.2”“react-router-redux”: “^5.0.0-alpha.9”“react-hot-loader”: “^4.0.0-beta...原创 2018-02-08 11:59:04 · 8154 阅读 · 0 评论 -
在 Vue 项目中使用 ECharts
在 Vue 项目中使用 ECharts说明 重要文件版本“vue”: “2.5.13”“vue-router”: “^3.0.1”“vuex”: “3.0.1”,“echarts”: “^4.0.2” 在 Vue 项目中使用 ECharts 只需要在 Vue 组件的 mounted 生命周期中 初始化 ECharts,然后在每次配置项有变更时调用 setOption() 方法更新配置即可原创 2018-02-08 14:07:19 · 8392 阅读 · 0 评论 -
ECharts 图表插件使用整理(图表配置实现)
ECharts 图表插件使用整理说明 ECharts 是一个 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器 IE 8 以上,是一个可高度个性化定制的数据可视化图表 ECharts 版本 –> 4.0.2 这篇文章只是对 ECharts 的 API 学习了一遍后,做的简单记录,结合 react 和 vue 的案例模板会在代码库中陆续实现。...原创 2018-02-01 15:38:14 · 15721 阅读 · 0 评论 -
D3.js 学习 - 1 - D3基本使用(d3-selection 选择集)
D3.js 学习 - 1 - D3基本使用 (d3-selection 选择集)D3 简介 D3 是一个 Javascript 库,用于创建数据可视化图形,全称 Data-Driven Documents 也就是数据驱动文档,文档指的就是基于 web 的文档,代表可以在浏览器中展示的一切,包括 SVG 以及 一般的 HTML , D3扮演的是一个驱动程序的角色,联系着数据和文档 ...原创 2018-07-27 17:13:30 · 9192 阅读 · 0 评论 -
D3.js 学习 - 0 - SVG 基础回顾
D3.js 学习 - 0 - SVG 基础回顾说明 D3 并没有一如一种新的视觉展现形式,图形方面的描述都是来源自 web 标准:HTML、SVG、CSS 图表仅仅是内部有一些形状的矩形,而D3提供的是一种让你通过操作图标或者你自己定义的图形来表达你想要展示数据的方式,它让你可以轻易的为图形添加可视化交互,定义你的 图形有怎样的行为。 SVG 是可缩放矢量图...原创 2018-07-25 17:48:57 · 668 阅读 · 0 评论 -
SVG动画
SVG – 动画1. 动画原理 动画实际上就是值 关于 时间 的函数from 起始值to 结束值duration 总时长timing-function 值关于时间的函数frame 帧 很小的时间段 interpolation 每一帧的差值2. SMIL - 定位动画目标1. 使用 xlink:href="url()" 定位<anmiate xlink:href="url(#rect1原创 2017-03-28 15:28:41 · 380 阅读 · 0 评论 -
SVG学习-2
SVG 学习笔记 - 2基本上是按照这套教程学习的SVG 中的坐标系统和坐标变换视野与世界 世界是无穷大的,视野是观察世界的一个矩形区域width height - 控制视窗,浏览器开辟出来用来渲染SVG内容的区域SVG 代码 - 定义世界viewBox, preserveAspectRatio - 控制视野,观看SVG的矩形区域红色代表视窗 <svg width="300" heig原创 2017-03-10 18:50:37 · 482 阅读 · 0 评论 -
SVG学习-1
SVG 学习笔记 - 11.简介 SVG 是 使用XML描述的矢量文件 ,使用 http://www.w3.org/2000/svg 这个链接来标识文件是 SVG 的命名空间,这个链接是一个标志而已,用来告诉打开文件的软件:这个文件是 SVG 文件,而不是把它当成 XML 文 件打开。 兼容性IE 9+Chrome 33.0+Firefox 28.0+Safari 7.0原创 2017-03-10 18:47:30 · 321 阅读 · 0 评论