简介
今天赵小编给大家推荐一个非常实用绘图的网站 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](https://ucc.alicdn.com/pic/developer-ecology/167f428774bf4b9c8f75aed48a7ba75b.png?x-oss-process=image/resize,w_1400/format,webp "$~KDKY]2PMF%F0E[(5LGQ4C.png")
网站首页截图
入门教程
图形绘制
下面小编为大家讲解一下如何用自己的数据绘制图形，首先在导航栏中点击示例，选择自己想要的图形。
![1Z{]QHP~YY[7@5LP9(`S1{2.png](https://ucc.alicdn.com/pic/developer-ecology/0fcc6915409e431783a5ebf27fc922d0.png?x-oss-process=image/resize,w_1400/format,webp "1Z{]QHP~YY[7@5LP9(`S1{2.png")
这里以堆叠区域图为例，选中之后即可进入图形绘制界面，左边是图形代码，右边展示图形效果。
在这个例子中，x 轴是 7 个时间节点，y 轴是数值，展示了 5 个类别数据（邮件营销、联盟广告、视频广告、直接访问、搜索引擎）的实时变化过程。
示例展示
堆叠区域图是折线图的一种，支持自定义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 格式。
html 图片
前者方便直接将图片插入各种文档，后者是一个交互式图形，鼠标移动到图形上就可以显示对应点的数据，大家可以根据需要选择格式。
结语
- ECHARTS 还支持绘制 3D 图形。
- Apache ECharts 5 新增支持动态排序柱状图以及动态排序折线图，帮助开发者方便地创建带有时序性的图表，展现数据随着时间维度上的变化，讲述数据的演变过程。
- 大家可以去网站上自己探索一下啦～
![KKMUI4U)R@]4JY[~)TX$5%6.jpg](https://ucc.alicdn.com/pic/developer-ecology/7f436e5d1fac4b0daa949993b689d91b.jpg?x-oss-process=image/resize,w_1400/format,webp "KKMUI4U)R@]4JY[~)TX$5%6.jpg")
