专栏首页庄闪闪的R语言手册如何快速画出美观的图形?

如何快速画出美观的图形?

简介

今天赵小编给大家推荐一个非常实用绘图的网站 ECHARTS[1]文末原文链接直达

在这个网站上你可以在线免费绘制多种图形,帮助大家更轻松地创造满足各种场景需求的可视化作品,绝对是绘图的超赞工具,赶紧收藏链接吧~

网站首页

提供了一个快速入门教程,通过这个教程可以了解一下获取 ECharts 的四种方式,以及创建图形的基本方法。

  • Apache ECharts[2] 官网下载界面 获取官方源码包后构建。
  • 在 ECharts 的 GitHub[3] 获取。
  • 通过 npm 获取 echarts,npm install echarts --save,详见“在 webpack 中使用 echarts[4]
  • 通过 jsDelivr[5] 等 CDN 引入

网站首页截图

入门教程

图形绘制

下面小编为大家讲解一下如何用自己的数据绘制图形,首先在导航栏中点击示例,选择自己想要的图形。

这里以堆叠区域图为例,选中之后即可进入图形绘制界面,左边是图形代码,右边展示图形效果。

在这个例子中,x 轴是 7 个时间节点,y 轴是数值,展示了 5 个类别数据(邮件营销、联盟广告、视频广告、直接访问、搜索引擎)的实时变化过程。

示例展示

堆叠区域图是折线图的一种,支持自定义y轴区间、多系列数据配置,以折线和区域相结合的方式,可以智能地展示多维的实时数据的变化趋势。

该图绘制的代码如下,根据自己的数据修改legendxAxisseries中包含的参数,即可绘制自己的图形,这三个参数的定义如下:

  • legend:类别的标签
  • xAxis:时间维度
  • series:各个类别包含的数据
option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    ## 标签
    legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    
    ## x轴
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    
    ## 各个维度的数据
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            label: {
                show: true,
                position: 'top'
            },
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

图形绘制完成后,可以点击右上角的按钮(照相机和下载示例)可以分别导出 png、html 格式

html 图片

前者方便直接将图片插入各种文档,后者是一个交互式图形,鼠标移动到图形上就可以显示对应点的数据,大家可以根据需要选择格式。

结语

  • ECHARTS 还支持绘制 3D 图形。
  • Apache ECharts 5 新增支持动态排序柱状图以及动态排序折线图,帮助开发者方便地创建带有时序性的图表,展现数据随着时间维度上的变化,讲述数据的演变过程。
  • 大家可以去网站上自己探索一下啦~

参考资料

[1]

ECHARTS: https://echarts.apache.org/zh/index.html

[2]

Apache ECharts: https://echarts.apache.org/zh/download.html

[3]

GitHub: https://github.com/apache/echarts/releases

[4]

在 webpack 中使用 echarts: https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E6%89%93%E5%8C%85%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

[5]

jsDelivr: https://www.jsdelivr.com/package/npm/echarts

本文分享自微信公众号 - 庄闪闪的R语言手册(Zss_R4ds),作者:我才是赵西西

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-09-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何用matlab画稍微美观点的图

    本科毕设论文写作过程中,老师指出我用matlab画的图太丑,需要好好改改。于是我这几天参考网上资料,对画图的一些细节进行了设置,得到的图确实比以前好了些。而且我...

    王云峰
  • 如何用 canvas 画出分形图

    分形是一门以非规则几何形态为研究对象的几何学,由曼德勃 罗(B.B.Mandelbrot)等人创立并命名。

    ConardLi
  • 插图设计正流行,10大理由告诉你如何靠它增强用户体验

    过去的几年中,用户界面中加入插图一直是最受欢迎也最稳固的设计趋势之一。今天,摹客的小伙伴将带领大家一起讨论设计师在网页或移动APP的UI设计,尤其是核心视觉元素...

    奔跑的小鹿
  • 如何快速上手基础的CSS3动画

    说起CSS3动画,就必须说说 transform,translate,transition,animation这4个属性,transform主要定义元素的动作,...

    Javanx
  • 艺术家批发!随手涂鸦秒变逼真风景,Nvidia Canvas「只」要求一张RTX显卡

    英伟达最近发布了一个应用程序Nvidia Canvas,目前处于免费公开测试版,包含了基于 NVIDIA RTX 图形处理器的实时绘画工具 GauGAN 。

    新智元
  • 干货·UI设计需要什么样的美术能力?

    主要的不是绘画能力,更重分镜头,叙事能力,脚本编写能力,很多画的不好,但是依然存活很多年的漫画还真就不少,甚至可以证明,绘画能力的底线可以很低。

    用户5009027
  • 2018年不可错过的创意404报错设计

    404报错页面,作为提醒网站访问者服务器未找到请求资源或文件的页面,时常被UI/UX设计师,产品经理以及网页/软件开发者视作 (包括枯燥的登录页面,加载页面以及...

    用户1372273
  • 美院资深设计师借用图扑案例,浅谈数据时代的可视化设计

    上篇我们讲到了《可视化设计-数据时代的美味制造者(上篇)》,分析完了逻辑性的可视化概念与设计流程。

    你看世界都已经物联网了i
  • 浅谈可视化设计-数据时代的美味“烹饪师”(下篇)

    上篇我们讲到了《可视化设计-数据时代的美味制造者(上篇)》,分析完了逻辑性的可视化概念与设计流程。

    HT for Web
  • 故事怎么讲才有逼格? - 腾讯ISUX

    腾讯ISUX
  • 条形图基础技术大盘点

    如果你看了这个小公众号的前几条的推送,你会发现好多关于条形图的内容。因为我想借助这几期的系统性讲解,逐级深入,让大家快速上手图表美化,这期我就来梳理一下这些基础...

    卤代烃
  • mix ( AI , art )=GANism 艺术家会被人工智能取代吗?

    美国画家,抽象表现主义绘画大师,也被公认为是美国现代绘画摆脱欧洲标准,在国际艺坛建立领导地位的第一功臣。

    mixlab
  • 《蜘蛛侠:平行宇宙》的视觉解析与滤镜实现

    ? 早在四年前,索尼想要制作全新风格的“蜘蛛侠”电影这一消息被泄露时,一个显眼的词汇便被反复提及——“rejuvenate”,译为“使其恢复年轻”。当时,除去...

    腾讯技术工程官方号
  • 善用工具,教你完整制作出领导驾驶舱

    说到驾舱舱,它通常是给驾驶员提供速度、转速、燃油油位等信息的设备。它可以帮助飞行员或赛车手快速作出决定。

    数据前沿
  • FASTN如何快速的检测出角点

    1. FASTN算法的动机 大部分特征检测算法的效果较好,但是达不到实时,因此提出FAST (Features from Accelerated Segment...

    智能算法
  • 2020-2021 设计趋势ISUX报告 · 多媒体篇

    ? 伴随着移动互联网的快速发展,5G通信,人工智能,物联网等新技术的发展也越趋成熟,人们接触信息的效率不断在提高,接受信息的纬度也更广泛,如何消化我们在生活中...

    腾讯ISUX
  • 如何用python快速爬取小姐姐的美图?(终极解答)

    我仔细一看:是用来爬取某个网站妹子图的代码,结果发现那个网站已经404了,当然爬不到了。

    快学Python
  • 屏幕录制和编辑神器ScreenFlow轻松上手

    还在寻找一款既能录制视频又能后期编辑的软件吗?ScreenFlow for mac 不单单是一款屏幕录像软件,同时也帮助您进行强大的后期剪辑工作,可以添加字幕,...

    JavaEdge
  • 利用ArcGIS高效完成项目前期分析

    本人是一个非常懒惰的人,内心非常抵触“描图”这类创造性低、工作量大又耗时的工作,比如人工处理官方提供的测绘CAD,去做建筑建造的分析,比如从在线电子地图中人工描...

    Sidchen

扫码关注云+社区

领取腾讯云代金券