学习来源：如何挑选数据可视化框架及平台 - 前端篇

数据可视化分析

可视化库：D3可视化界的jQuery，ECharts穷人的Highcharts，Highcharts小镇里的世界级组件，Vega图表也能低代码，Ｇ2/F2《The Grammar Of Graphics》的追随者，Chart.js顶级推广案例，AnyChart闷声赚钱的图表库，FusionCharts高中生的逆袭，amCharts唯一可以免费商用的商业图表库，Google Chart图表库的云服务。

虽然有很多开源图表库，但绝大部分不是已经弃坑就是将要弃坑了，目前真正能用的就只有ECharts，Ploty.js，Vega，Ｇ2.

D3

D3最早出现在Mike Bostock读博期间发表的一篇论文里，它的目的并不是做图标库，而是成为更低层的基础设施，简化数据可视化的开发，它在API设计方面参考了jQuery，使用，除了类似jQuery的链式调用，D3还有鲜明的特点是将功能拆得非常细，做到了函数级别，从数据解析，转换到布局算法都有提供，这使得开发者可以十分灵活地进行组合，实现各种可视化的展现，这使得D3非常适合拿来学习的可视化算法，而且还能很方便地将这些算法整合到自己的项目中。

D3的链式调用既是优点也是缺点，对于没有学过D3的人会完全看不懂，即便学过看都要花不少精力，如果只是想绘制常见图表，没必要直接用D3.

D3的接口基于DOM，用来操作SVG没问题，但不推荐直接用来操作Canvas和WebGL，这使得D3无法用于大数据量及需要像素级别操作的特效。

总的来说D3是一款成功的可视化基础设施，它的源码值得学习，但不推荐直接使用它例子开发图表，一方面基于它写的代码上手门槛高，另一方面是它的定位并非图标库。

ECharts

百度商业前端团队尝试基于canvas来开发图表库ECharts，比起SVG/VML，canvas虽然调试麻烦，但在大量数据点下性能更好。中文文档的优势。

Echarts有不少自己独特的功能，其中最亮点的就是Echarts-gl（基于WebGl做的真三维，可以配置光照，材质，阴影等，还有独家的后期特效功能。），能实现三维图表和地球的展示。

作为一个公司内的开源产品，Echarts从功能和文档方面都达到了商业产品的水平，还有主题编辑器和大量社区贡献的案例，而且Echarts团队在过去7年一直都有提交。

靠用户贡献的例子远远多于其他图表库，一定上缓解了API太多的学习成本，而且ECharts的Issues几乎都有回复。赶上商业质量的开源库。

Gallery

Echarts4.0提供了canvas和svg两种渲染方式，默认使用canvas渲染，而D3是以svg为主的。

echarts-学习笔记及扩展相关推荐

echarts学习笔记1
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. [外链图片转存失败,源站可 ...
数据可视化echarts学习笔记
文章目录 echarts 使用渐变色一些配置项 dataset与transform数据过滤 dataset transform 动态排序时间轴更新数据极坐标系 echarts 官网https: ...
ECharts 学习笔记
ECharts添加点击事件(基于饼图): var option = {... } myChart.setOption(option); myChart.on('click', function eCo ...
echarts学习笔记
主要记录option里面的相关知识官方文档:https://echarts.apache.org/zh/option.html#title 入门示例 option = {xAxis:{// 设置x轴 ...
华为云学院-人人学loT学习笔记及扩展- 第二章物联网平台OceanConnect
课程大纲 2.1解锁物联网平台,与OceanConnect相识一,物联网发展挑战 1,新业务上线周期长只能接入自己的平台产品开发周期长应用碎片化严重产品上市慢 2,标准不统一,集成困难终端 ...
2023-01-03 Echarts学习笔记(二) 常见Option配置项介绍:xAxis,yAxis,series,grid,toolbox,legend,tooltip,title,color等
Echarts的基础配置 1.color:调色盘颜色列表 2.title:标题组件 2.1.设置图表的标题 2.2.同时主标题和副标题(了解) 3.tooltip:提示框组件触发类型 4.legen ...
我的Echarts学习笔记(Update)
第一章下载echarts 1.源文件代码:https://www.jsdelivr.com/package/npm/echarts 里面4.8版本的dist文件夹下面的文件 2.地图数据网站:htt ...
mysql学习笔记-insert扩展
1.创建表 -利用已有表,创建表这样创建的缺点-- 主键会丢失 -- 创建表,表结构与数据与t_emptest 一致 CREATE TABLE t_emptest1 AS SELECT * FRO ...
ES6基础3（扩展）-学习笔记
文章目录 ES6基础3(扩展)-学习笔记字符串扩展数值扩展函数扩展扩展运算符 ES6基础3(扩展)-学习笔记字符串扩展 //扩展//字符串扩展charAt(); //返回指定索引位置的字符 ...
Yii学习笔记：利用setFlash和runController打造个性化的提示信息页面
为什么80%的码农都做不了架构师?>>> 在实现Yii::success()这样的调用方式之前,你可能需要阅读我的这篇博文: <Yii学习笔记:扩展YiiBase入口类& ...

echarts-学习笔记及扩展

D3

ECharts

echarts-学习笔记及扩展相关推荐

最新文章

热门文章