今天赵小编给大家推荐一个非常实用绘图的网站 ECHARTS[1](文末原文链接直达)
在这个网站上你可以在线免费绘制多种图形,帮助大家更轻松地创造满足各种场景需求的可视化作品,绝对是绘图的超赞工具,赶紧收藏链接吧~
提供了一个快速入门教程,通过这个教程可以了解一下获取 ECharts 的四种方式,以及创建图形的基本方法。
网站首页截图
入门教程
下面小编为大家讲解一下如何用自己的数据绘制图形,首先在导航栏中点击示例,选择自己想要的图形。
这里以堆叠区域图为例,选中之后即可进入图形绘制界面,左边是图形代码,右边展示图形效果。
在这个例子中,x 轴是 7 个时间节点,y 轴是数值,展示了 5 个类别数据(邮件营销、联盟广告、视频广告、直接访问、搜索引擎)的实时变化过程。
示例展示
堆叠区域图是折线图的一种,支持自定义y轴区间、多系列数据配置,以折线和区域相结合的方式,可以智能地展示多维的实时数据的变化趋势。
该图绘制的代码如下,根据自己的数据修改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 图片
前者方便直接将图片插入各种文档,后者是一个交互式图形,鼠标移动到图形上就可以显示对应点的数据,大家可以根据需要选择格式。
参考资料
[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