ECharts的简单入门

前言：

如果我们开发的项目中涉及到大量的数据分析，干巴巴的数据展示肯定不是用户想看到的，怎么把数据更加形象生动的展示给用户，就变得十分重要了。那么就不得不说今天的主角ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。这篇文章通过一个简单的demo,带你初步认识ECharts。

正文：

一、浏览器画图的原理

基于HTML和JavaScript的浏览器绘图方式，依赖于各个浏览器内部所提供的图形引擎。所以针对不同浏览器就诞生了不同的网络图形标准。

目前主流的网络图形标准包括两种：

1.SVG：SVG 是由 W3C 制定的同样基于 XML 的矢量图形描述语言，SVG 元素是指示如何绘制图像的一些指令，由图形引擎解释这些指令，把 SVG 图像在浏览器上显示出来。使用 SVG 可以在网页上显示出各种各样的高质量的矢量图形，其最明显的特征是灵活的文件格式，矢量图形、位图和文字三部分共同组成一个 SVG 图形，并具备对运行中的 Web 页面图像进行实时修改的能力。

2.Canvas: Canvas 是指 HTML 5 中新加入的 canvas 元素，最初由 Apple 的 Safari 浏览器引入，而后受到 Firefox 和 Opera 的广泛支持。Canvas 元素相对 SVG 的一个重要不同在于，canvas 提供了通过 JavaScript 绘制图形的方法，每一个 canvas 元素都有一个上下文，在其中可以绘制任意图形；而 SVG 使用 XML 文档来描述图形，开发人员通常通过修改其中的 XML 标记来完成对图像的修改。

我们先简单的看下两个简单的demo:

第一个是Canvas的

Your browser does not support the canvas element.

第二个是SVG的

所以我看可以看出，canvas是通过js来绘制图形，而SVG是在已有的图像模型，对标签的属性修改来控制图形。而ECharts是基于canvas来实现画图的。

二、什么是ECharts

ECharts就是一个纯JavaScript的图标库,给我们提供直观，交互丰富，可高度个性化定制的数据可视化图表，让数据展示变得更加友好灵动。

三、ECharts支持的图表类型很多，我们可以在ECharts的官网https://www.echartsjs.com/zh/index.html看到ECharts支持的类型，可以说能满足我们的各种各样的需求

四、ECharts如何使用

1.我们先看个demo,然后根据这个demo，看看怎么具体学习echarts的使用，可以直接把这段代码粘贴到你的开发软件里，但是要记得去官网先下载 echarts.js。

    
    
    
     //想使用ECharts必须要引入echarts.js

    
    

    

展示的效果：

在上面的官方demo里我加了一些注释，主要解释这个是做什么的。这个在官方网站的文档里都有详细说明，可以从术语速查手册和配置项手册看到，尤其配置项手册写的超详细，根据这些官方demo和文档你可以很快上手。

总结：

ECharts学习起来还是很容易的，没有太多的难点，因为它是中国开源的文档，所以中文文档会很多，学习难度也就下降很多，想要玩转他的展示效果，就赶紧跟着官方文档操作一波，你会发现它真的是一款功能强大的可视化工具。

我是阿达，一名喜欢分享知识的程序员，时不时的也会荒腔走板的聊一聊电影、电视剧、音乐、漫画，这里已经有372小伙伴在等你们啦，感兴趣的就赶紧来点击关注我把，哪里有不明白或有不同观点的地方欢迎留言。