前言：
如果我们开发的项目中涉及到大量的数据分析，干巴巴的数据展示肯定不是用户想看到的，怎么把数据更加形象生动的展示给用户，就变得十分重要了。那么就不得不说今天的主角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的
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style
最低0.47元/天 解锁文章
730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
