首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

数据可视化之——recharts

Echarts介绍

最近在做项目中有涉及数据可视化展示的部分,考虑highcharts和echarts二选一,权衡再三,最后还是选择了echarts,主要原因是echarts开源,而且提供的功能已经足以满足现有的项目需求。更多介绍如下:

ECharts是一个基于JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),提供直观,交互丰富,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。ECharts 基于BSD 协议开源,可免费商用。官网见http://echarts.baidu.com.

名词解析基本名词

图表名词

图表类型

图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表:

Echarts 入门html源代码

构建Echarts的html源代码主要包括三部分内容:

引入 ECharts 文件

为ECharts准备一个指定大小的Dom

Echarts作图的js代码

以下是一个官方样例,其中js内容部分参照我心中的NBA最佳阵容做了一些修改^_^:

看完效果再回过头来看源代码,很容易看出,这里最核心部分就是封装第三部分js代码中的 option这个配置项。option这个配置项其实你可以看成是一个json,其中title用来设置标题,tooltip是设置数据显示标签,legend设置图例,xAxis,yAxis分别设置x轴和y轴,series设置系列的数据及其待显示的图表类型等等。更多参数设置建议直接参考echarts官网的参数配置项内容,如下:

R与Echarts结合

Github上的介绍:

它提供的图形展示接口包括:地图(eMap),柱状图(eBar),折线图(eLine), 雷达图(eRadar),散点图(ePoints),漏斗图(eFunnel)以及万恶的饼图(ePie)。 同时计划对力导向图(eForce), 时间序列散点图(ePoints_timeSeries), 矩阵树图(eTree), 平行坐标图(eParallel) 和桑基图(eSankey)图逐一实现。

它提供的接口很好,通过上述封装的函数我们可以很方便地用我们熟悉的R语言的操作习惯来实现Echarts作图,但是也存在一定程度的缺陷,那就是一些个性化定制的图无法实现。如果有定制化需求怎么办,不要紧,可以用包中的函数来实现。包里对这个函数的介绍不多, 它其实是echarts作图的一个主函数,其他作图函数都可以通过这个函数来实现,下面我就主要这个函数的使用进行讲解。

首先安装recharts包:

以echarts入门为例,采用函数作图:

Echarts 进阶

在上述简单的柱形图的基础上修改series和yAxis,自定义tooltip组件并且添加toolbox和dataZoom组件,如下:

大功告成,看看我又做了什么,这张图在之前得分柱形图的基础上增加了身高折线图,实现了双y轴,添加了数据单位,实现了x轴的数据缩放,针对不同系列的数据分别添加了不同的数据标签,添加了工具组件,实现了数据缩放、数据查看、切换突变类型、保存图片等功能。

文章中我贴的是静态图片,想要交互效果就自己动手试试吧。

本文来自№→★飞刀的微信公共帐号“数据挖掘与R语言”,用微信添加数据挖掘与R语言公众号,即可订阅。转载必须保留作者、公共帐号信息。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180517G18IW900?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券