AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

2022-05-21 160
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 今天赵小编给大家推荐一个非常实用绘图的网站 ECHARTS[1]（文末原文链接直达）在这个网站上你可以在线免费绘制多种图形，帮助大家更轻松地创造满足各种场景需求的可视化作品，绝对是绘图的超赞工具，赶紧收藏链接吧~

简介

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

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


网站首页

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

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

$~KDKY]2PMF%F0E[(5LGQ4C.png

网站首页截图image.gif入门教程


图形绘制

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

image.gif1Z{]QHP~YY[7@5LP9(`S1{2.png


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


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

V}I_(%FD93M7PVMY($NVDJH.png

示例展示

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


该图绘制的代码如下，根据自己的数据修改legend、xAxis、series中包含的参数，即可绘制自己的图形，这三个参数的定义如下：

  • 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 格式。

{CJO__ALPX@B5G{~NRPH04S.png


html 图片

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


结语

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

KKMUI4U)R@]4JY[~)TX$5%6.jpg

KU8NK3NTP%)QJ(Q(Z8_2ND2.png

文章标签：
搜索推荐
数据可视化
CDN
Apache
开发者
庄闪闪
目录
相关文章
turbolove
|
6月前
|
存储
QT图形视图框架绘制曲线图和Smith图
QT图形视图框架绘制曲线图和Smith图
turbolove
115 0
1941623231718325
|
3月前
|
数据可视化
R语言多图合成：优雅地在一个画布上展示多个图形
【8月更文挑战第30天】R语言提供了多种方法来实现多图合成，从基础的`par()`函数到高级的`gridExtra`、`ggplot2`和`cowplot`包，每种方法都有其独特的优势和应用场景。通过掌握这些技术，你可以根据实际需求灵活地组合图形，从而更高效地展示和解读数据。希望本文能为你提供一些有益的参考和启示。
1941623231718325
135 2
景天科技苑
|
6月前
|
缓存 Linux API
如何使用Matplotlib绘制出美观实用的图形？
如何使用Matplotlib绘制出美观实用的图形？
景天科技苑
73 2
1941623231718325
|
6月前
|
数据可视化 Python
Seaborn中的色彩与风格：如何调整图表外观
【4月更文挑战第17天】Seaborn是Python的数据可视化库，专注于统计图表。它提供了多种色彩主题和样式设置，帮助用户创建美观的专业图表。可以通过`set_theme`或`set`函数应用预设色彩主题，如深色或明亮主题；也可以自定义色彩映射。样式设置涉及图表线条、背景、网格等，可使用`rc`模块或`set_theme`调整。此外，还能单独调整图例、坐标轴样式，并通过`savefig`保存或`show`展示图表。合理运用这些功能能提升图表的视觉传达效果。
1941623231718325
101 1
冷辞
|
6月前
|
前端开发 JavaScript
图形应用
图形应用
冷辞
30 3
可涵不会debug
Easyx绘制基本图形
Easyx绘制基本图形
可涵不会debug
310 0
Meteor.792
Photoshop绘制立体风格的拾色器图标
Photoshop绘制立体风格的拾色器图标
Meteor.792
52 0
凯小默
|
XML 前端开发 数据可视化
【图形基础篇】03 # 声明式图形系统：如何用SVG图形元素绘制可视化图表？
【图形基础篇】03 # 声明式图形系统：如何用SVG图形元素绘制可视化图表？
凯小默
127 0
【图形基础篇】03 # 声明式图形系统：如何用SVG图形元素绘制可视化图表？
大耳朵宋宋
|
前端开发
Delphi绘图功能[1] —— 入门(绘制直线和矩形)
Delphi绘图功能[1] —— 入门(绘制直线和矩形)
大耳朵宋宋
496 0
Delphi绘图功能[1] —— 入门(绘制直线和矩形)
Iric
|
算法
图形
图形
Iric
70 0