这个问题我们的建议是如果是完全按照官方demo来做的，那还是肯定有一些地方不一样。
比如，如果你使用的是Visual Studio 之类的IDE的话，你新建的页面会自动添加一些结构进去的。
如：下面这是Visual Studio2013产生的标准的html代码
| 代码如下 | 复制代码 |
| <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> </body> </html> |
|
言归正传。最终网友按照demo一步一步的修改，最终定位问题是：
问题出在DOCTYPE上 官网的例子都是<!DOCTYPE html> 我的页面里写的是<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 这点区别影响很大 我把官网下载下来的例子里的<!DOCTYPE html>替换后 例子也出现问题了
既然问题出在DOCTYPE。我们就来看看DOCTYPE是干什么的？
定义和用法
| 代码如下 | 复制代码 |
|
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。 |
|
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
HTML 4.01 与 HTML5 之间的差异
在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：
| 代码如下 | 复制代码 |
|
<!DOCTYPE html> |
|
HTML4.01的三种声明：
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
| 代码如下 | 复制代码 |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional |
|
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
| 代码如下 | 复制代码 |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|
HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
| 代码如下 | 复制代码 |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
|
总结：所谓的HTML5 DOCTYPE（即<!DOCTYPE HTML>），只是一种推荐的写法，并不是html5的一部分，doctype会影响浏览器的渲染模式，尤其是早期的浏览器。现代浏览器对于各种版本的html代码兼容性很好，基本已经不再根据不同的doctype类型来决定不同的渲染模式了（当然，写和不写DOCTYPE还是有区别的），而是改为用一种兼容的解析方法。<!DOCTYPE html>是HTML5的声明，主流的游览器中只有IE8及以下版本不支持，这样IE会进入Quirks模式。但之后的声明可以强制指定IE的呈现模式。所以就会出现闪烁等问题，很多问题还不一定暴露出来。
解决办法：使用echarts的页面需要声明HTML5 DOCTYPE <!DOCTYPE HTML>，如果需要更优雅的处理，可以判断浏览器的类型和版本。
提示用户进行升级或者切换到Chrome Firefox等浏览器进行浏览。