echarts 卡_图表太丑怎么破,ECharts神器带你飞!

一、前言

在本专栏或文集中,我曾多次使用ECharts绘制图表、进行可视化,也渐渐积累了30多个实例,本文对此前用过的所有图表和代码进行整理并分享,以给想绘制精美图表的人一点绵薄的帮助。其中全部实例已上传ECharts3官网的个人主页,如果觉得网页上一个个代码查看太麻烦,可以看评论区,去某号后台自取,全部代码和原图轻松到手,妈妈再也不用担心你的图丑破天际了,(逃)。

一只“治愈”的猫(微博)

二、喵喵喵

2.1、bug/词云/韦恩图

所有实例均是参考官网的作品实现的,本人对JavaScript此外无过多涉猎,若有不规范的地方,请批评性看待。实例中涉及动态交互的部分可能会有莫名其妙的地方,因为此前都是为了拿到静态图表,如果你也只是想拿个图,那问题倒是不大。

词云不是ECharts绘制的,而是由下面的网站生成的,可选择多个主题、配色、形状等等。

韦恩图只能在ECharts2里运行成功,故没有搬到ECharts3里:

2.2、JavaScript语法

“//”:可注释掉一行代码,类似python中的“#”;

“/*....*/”:可将中间多行、整块的代码注释掉,类似python里的三引号('''....''');

导出图片(saveAsImage),数据视图(dataView),动态类型切换(magicType),数据区域缩放(brush),重置(restore)五个工具。均在图表的右上角,导出图片均添加了,其他不需要的可以用“//”注释掉。

其他内容,可参考官网“配置项”详细内容,新手可以对照简单的图表实例,一点点啃。

2.3、教程

W3Cschool:《ECharts教程》

以上教程都没怎么完整看过,还是推荐新手简单熟悉后,对照官网实例进行钻研。其中ECharts有2.0版和3.0版:ECharts2 官网:实例、ECharts3 官网:实例。其中,官网实例里图表很多,点开可能会卡,+10s 就好了......

三、实例

讲了这一车的话,对于不明真相的读者来说,可能最好奇的就是到底都有哪些图表呢,到底能把自己丑爆的图碾压到什么程度呢,以下有针对性的罗列下部分实例和对应的文章:

3.1.1 金字塔图

备注:张佳玮138万+知乎关注者的分布情况。

注意:设置series里的min和max为数据集的最小值和最大值。缺点是上几层文字显示不佳。

3.1.2 柱形图和饼图(组合图)

备注:张佳玮138万+知乎关注者之100+关注者的性别情况。

注意:组合图只需在series下面多加几个“{...}”的数据集,然后移动到合适位置进行展示即可。本实例原本是ECharts2里的,局部修改后也搬到ECharts3里的。此外每个实例均可“切换主题”,改变配色方案。

3.1.3 分布地图

备注:张佳玮138万+知乎关注者之1w+关注者国内分布情况。

注意:绘制时需要加载地图脚本(/dep/echarts/map/js/china.js)。也需要将手头的城市数据转换成对应的经纬度。

3.1.4 南丁格尔玫瑰图

备注:张佳玮138万+知乎关注者之Top20学校和行业情况。

注意:南丁格尔玫瑰图有面积模式和半径模式,具体区别有待专业人士指导,自己完全是那么好看用的那个。

备注:张佳玮138万+知乎关注者之Top20公司和职业情况。

3.1.5 饼图

备注:张佳玮138万+知乎关注者之认证信息。

注意:内圈和外圈数据要一致。外圈作为内圈的细分。

3.1.6 散点图

备注:张佳玮138万+知乎关注者之优秀回答者贡献情况。

3.2.1 日历热图(calendar heatmap)

备注:老树画画历年发布微博情况。

链接:三年图:

3.2.2 散点图

备注:老树画画微博之评论、转发与点赞情况。

注意:可与上面单组数据对照,看看两组数据时对应的代码异同之处。

3.3.1 柱形图

备注:一则微博转发数随时间变化情况。

3.4.1 气泡图

备注:我的简书一月记之点赞分布图。

注意:此处的时间为时间戳,而非一般的小时、分钟、秒数。气泡大小代表点赞用户自身的粉丝数。

备注:我的简书一月记之关注分布图。

注意:气泡大小统一。

3.4.2 单轴气泡图

备注:我的简书一月记之20170827-20170829复盘。

注意:20170828当天粉丝数猛然增长,单日涨粉170人次,同样的获赞数也增长了很多,于是复盘下前后三天的反馈信息,细分到每小时的情况。ECharts里还有事件流的图表,或许更合适这类复盘,但了解的还不错。

3.5.1 柱形图和玫瑰图(组合图)

备注:简书热门文章之年度月份分布情况。

注意:相同年份设置为同一颜色,颜色选择很关键。

3.6.1 柱形图和饼图(组合图)

备注:简书26万用户数据之ID分布情况。

注意:指定好各部分的颜色。否则容易混乱。

3.6.2 瀑布图

备注:简书26万用户信息之粉丝分布情况。

注意:data里总数值和净数值。前者从0开始。

3.6.3 金字塔图和饼图(组合图)

备注:简书26万用户信息之粉丝情况。

3.7.1 瀑布图

备注:我的简书两月记之获赞数变化情况。

注意:同上的瀑布图。

3.7.2 折线图(一)

备注:我的简书两月记之粉丝数和获赞数每日变化情况。

3.7.3 折线图(二)

备注:我的简书两月记之粉丝数每日变化情况。

注意:折线和横坐标没对齐,bug。

3.7.4 折线图(三)

备注:我的简书两月记之Top5 文章获赞情况。

四、小结

以上所有实例均已上传至ECharts3官网的个人主页,如果觉得网页上一个个代码查看太麻烦,可以看评论区,去某号后台自取,全部代码和原图轻松到手,妈妈再也不用担心你的图丑破天际了(逃)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/357006.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache Lucene基础教程

课程大纲 Apache Lucene是一个免费/开源信息检索软件库,它提供基于Java的索引和搜索技术,以及拼写检查,命中突出显示和高级分析/令牌化功能。 Lucene是完全用Java编写的高性能,功能齐全的文本搜索引擎库。 它是一项适用于几乎所有…

使用CSDN云服务搭建一个WordPress 个人站点(视频教程)

目录 前言 视频教程 文字版教程 云主机体验地址 官方文档 前言 六一儿童节体验了一下CSDN云主机相关的服务,感觉最近官方最近变化很大,业务范围很广,这里简单体验了一下云主机,给大家分享一点心得,希望对大家有所启…

sql性能优化之多表联查

先贴上我优化后的核心代码: select * into #result from ( select p.AchivementCount,isnull(a.ByAttentionCount,0) ByAttentionCount, u.Id,u.FullName,j.Name PostionName,u.ProfessionId,u.Disabled,u.UserName,u.ResearchArea,u.PositionId,u.DepartmentId,u.O…

石板切割问题c语言_岩知识 | 岩板切板有讲究,工艺问题要注意

岩板的火继续烧着,岩板的深加工厂在不断地增加着,岩板的深加工产品正在走向各个建筑项目,逐渐在受到很多项目的宠爱。岩板作为与天然石材完全不同的产品,其优越的理化性能在许多方面胜过天然石材,但也有其严重的不足。…

JavaScript测验题回顾-刷题笔记001

目录 1.我们可以在下列哪个 HTML 元素中放置 Javascript 代码?​编辑 2.写 "Hello World" 的正确 Javascript 语法是? 3.插入 Javacript 的正确位置是? 4.引用名为 "xxx.js" 的外部脚本的正确语法是? 5.如…

C/C++中无条件花括号的妙用

C/C中无条件花括号可以形成一个代码块,一个作用域。可以使括号内定义的变量就只在本域(就是这个大括号)内有效,而且不会影响其他域,即使名字相同。 在花括号内,如果变量前面带类型,则相当于新创…

java 方法委托托管_Java Web托管选项流程图

java 方法委托托管我经常被问到的一个问题是在何处以及如何托管Java Web应用程序。 在带有嵌入式服务器的Eclipse中创建它很好,但是如何将它带给人们呢? 长期以来,对于发烧友的程序员一直没有答案。 只有昂贵和超大型的选择。 事情最近发生了…

react重新渲染菜单_React实现递归组件

前言今天来实现一个 React 的递归组件。具体的效果图如下:图片说明假设后端返回的数据如下:[{ id: 1, parent_id: 0, name: 广东省, children: [{ id: 2, parent_id: 1, name: 广州市, …

JavaScript测验——给代码添加注释---第一关

校验规则 创建一个//样式的注释, 被注释的文本至少要包含 5 个字符。 创建一个/* */样式的注释, 被注释的文本至少要包含 5 个字符。

举重设计模式示例

本文是我们名为“ Java设计模式 ”的学院课程的一部分。 在本课程中,您将深入研究大量的设计模式,并了解如何在Java中实现和利用它们。 您将了解模式如此重要的原因,并了解何时以及如何应用模式中的每一个。 在这里查看 ! 目录 …

JavaScript测验——声明变量---第2关

校验规则 注意: 变量名称可以由数字、字母、美元符号$ 或者 下划线_组成,但是不能包含空格或者以数字为开头。 闯关: 使用var 关键字来创建一个名为salePrice的变量。

palapaweb怎样开启服务_为什么说微服务,要从前后端分离开始?一文带你揭秘深入微服务...

前言既要低头赶路,又要抬头望天,科技是为人服务的,任何技术背后都有更深层次的考量。之前的文章中咱们聊了很多微服务的相关内容,简而言之,微服务的本质,就是一种可以加速分工、促进合作的新协作机制。知其…

list集合

List集合 List集合的概述 有序集合(也称之为序列),用户可以精确的控制列表中的每个元素的插入位置。用户可以通过整数索引访问元素,并搜索列表中的元素 与 Set 集合不同,列表通常允许重复的元素 List 集合的特点 有…

JavaScript测验——使用赋值运算符---第3关

校验规则 以上代码数值8被赋给变量myVar中,然后再次将变量myVar解析为8并将其赋给myNum变量。 闯关: 把数值6赋给变量 x。 然后把变量x中的内容赋给变量y。

antd table排序 vue_商品品牌业务之Vue编写前端页面

今天是刘小爱自学Java的第145天。感谢你的观看,谢谢你。学习计划安排如下:打算从前端页面到后台服务器代码完整地写一遍,但显然我高估了自己的实力,几个小时的时间根本不够用。并且因为教程和vue现在最新的组件用法不一样&#xf…

websphere内存设置_WebSphere Classloader内存泄漏预防

websphere内存设置解决应用程序类加载器泄漏 应用领域 倾向于: 使用应用程序类加载器中的Runnable实现启动新线程。 即使JEE编程模型不支持此功能,客户也经常直接创建新线程或通过使用间接创建它们 计时器 客户必须确保在停止相应的应用程序&#xf…

zookeeper删除节点的权限_Zookeeper使用超级用户删除带权限的节点

1.背景Zookeeper管理员会因为某些客户端对某些节点设置了权限,而导致在紧急的情况下无法修改这些节点感到困扰。在这种情况下,管理员可以通过Zookeeper超级用户模式访问这些节点,一旦设置了超级权限访问节点,后续的操作就不需要ch…

JavaScript测验——使用赋值运算符初始化变量---第4关

通常在声明变量的时候会给变量初始化一个初始值。 例如: var myVar 0; 以上代码创建一个名为myVar的变量并指定一个初始值0。

Zabbix-3.0.0 安装Graphtree

导读Zabbix中,想要集中展示图像,唯一的选择是screen,后来zatree解决了screen的问题,但性能不够好。Graphtree 由OneOaaS开发并开源出来,用来解决Zabbix的图形展示问题,性能较好。一、Graphtree功能概述集中…

装饰器设计模式示例

本文是我们名为“ Java设计模式 ”的学院课程的一部分。 在本课程中,您将深入研究大量的设计模式,并了解如何在Java中实现和利用它们。 您将了解模式如此重要的原因,并了解何时以及如何应用模式中的每一个。 在这里查看 ! 目录 …