浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。echarts图表在ie8不显示，ie9显示，怎么解决这个问题呢 - 开源中国社区
当前访客身份：游客 [
当前位置：
你好，想跟你请教个问题：
echarts图表在ie8不显示，ie9显示，怎么解决这个问题呢
共有2个答案
<span class="a_vote_num" id="a_vote_num_
看官网，如果官网IE8不显示请报bug，如果显示看你自己的代码兼容性问题。
<span class="a_vote_num" id="a_vote_num_
通过ajax调用返回数据，并用定时刷新可以解决，我就是这样解决的，如果还不可以，请查看下面的例子
/echarts-zai-ie8-xia-bu-xian-shi-tu-biao.html
更多开发者职位上
有什么技术问题吗？
类似的话题21517人阅读
项目需要在网页上画图表，在网上找了一下，发现百度出品的echarts非常好用。echarts把看&#20284;复杂的图表进行了分解，使用结构化的模型来完成图表的配置。画图表就跟写CSS一样，实际上echarts使用的很多属性名字都和CSS是一样的。
echarts有非常详细的文档，官网还提供了很多个例子，很容易学会。
echarts是支持IE8的，虽然IE8不支持canvas，但是echarts画出的图表在IE8显示，目前没有发现有问题。
想学echarts，看官网的文档就可以了。以下是个人学习之后整理的helloworld小例子，以及学习过程中碰到的一些小问题。
1 画一个最粗糙的图表
官方推荐使用模块化单文件引入，我不知道模块化，所以采用了标签式单文件引入。
&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&echarts测试&/title&
&!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom --&
&div id=&main&
style=&height: 400 width: 800 border: 1px dotted black&&&/div&
&!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 --&
&script src=&../js/echarts-plain-original.js&&&/script&
&!-- 注意顺序，使用echarts对象要在引入echarts文件之后 --&
&script type=&text/javascript&&
// 初始化一个图表实例
var myChart = echarts.init(document.getElementById(&#39;main&#39;));
// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
var option = {
text : &#39;销量和进货量&#39;
xAxis : [ {
type : &#39;category&#39;,
data : [ &衬衫&, &羊毛衫&, &雪纺衫&, &裤子&, &高跟鞋&, &袜子& ]
yAxis : [ {
type : &#39;value&#39;,
axisLabel : {
formatter : &#39;{value}件&#39;
// 数值序列
series : [ {
name : &#39;销量&#39;,
type : &#39;line&#39;,
data : [ 5, 20, 40, 10, 10, 20 ],
// 为图表实例加载数据
myChart.setOption(option);
得到的图表
2 为图表添加各种样式
&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&echarts测试&/title&
&!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom --&
&div id=&main&
style=&height: 400 width: 800 border: 1px dotted black&&&/div&
&!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 --&
&script src=&../js/echarts-plain-original.js&&&/script&
&!-- 注意顺序，使用echarts对象要在引入echarts文件之后 --&
&script type=&text/javascript&&
// 初始化一个图表实例
var myChart = echarts.init(document.getElementById(&#39;main&#39;));
// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
var option = {
text : &#39;销量和进货量&#39;,
x : &#39;center&#39;,
y : &#39;top&#39;,
textStyle : {
fontSize : 26,
fontFamily : &微软雅黑&,
borderWidth : 0
tooltip : {
trigger : &#39;axis&#39;,
axisPointer : {
type : &#39;line&#39;,
lineStyle : {
color : &#39;#0f0&#39;,
width : 2,
type : &#39;solid&#39;
xAxis : [ {
type : &#39;category&#39;,
data : [ &衬衫&, &羊毛衫&, &雪纺衫&, &裤子&, &高跟鞋&, &袜子& ],
axisTick : {
show : false
splitLine : {
lineStyle : {
type : &#39;dotted&#39;
yAxis : [ {
type : &#39;value&#39;,
axisLabel : {
formatter : &#39;{value}件&#39;
splitLine : {
lineStyle : {
type : &#39;dotted&#39;
// 数值序列
series : [ {
name : &#39;销量&#39;,
type : &#39;line&#39;,
data : [ 5, 20, 40, 10, 10, 20 ],
itemStyle : {
normal : {
color : &#39;#f00&#39;,
lineStyle : {
show : true,
position : &#39;right&#39;,
textStyle : {
fontStyle : &#39;bolder&#39;,
fontSize : 15
symbol : &#39;emptyCircle&#39;,
symbolSize : 4,
// 为图表实例加载数据
myChart.setOption(option);
加了样式之后的结果如下，我想说我很佩服做美工的同学（我自己画的图表真不好看）
3 为图表添加事件
// 事件的参数中包括：数据在序列中的下标dataIndex，数据的值value，x轴上的名称name
function eConsole(param) {
if (typeof param.seriesIndex == &#39;undefined&#39;) {
if (param.type == &#39;click&#39;) {
var mes = param.name + &#39;:&#39; + param.
document.getElementById(&#39;info&#39;).innerHTML =
myChart.on(echarts.config.EVENT.CLICK, eConsole);
效果就是点击图表之后，可以在下面显示出被点击的类目和对应的数量
4 最后，做了一个小练习，使用jquery来从服务端请求数据
这里，客户端的option一开始只有样式，没有数据。从服务端得到数据之后，把option补全，然后调用setOption方法就OK了。
&!DOCTYPE html&
&meta charset=&UTF-8&&
&script type=&text/javascript& src=&../js/jquery-1.11.1.js&&&/script&
&title&通过ajax为echarts更新数据&/title&
&!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom --&
&div id=&main&
style=&height: 400 width: 800 border: 1px dotted black&&&/div&
&span id=&info&&&/span&
&!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 --&
&script src=&../js/echarts-plain-original.js&&&/script&
&!-- 注意顺序，使用echarts对象要在引入echarts文件之后 --&
&script type=&text/javascript&&
$(document).ready(function() {
// 初始化一个图表实例
var myChart = echarts.init(document.getElementById(&#39;main&#39;));
// 使用jquery发送post请求，第四个参数指明如何解析服务端返回的数据。
// 服务端返回的必须是标准格式的json，也就是双引号括起来的键值对
$.post(&../data&, {
name : &testdata&
}, function(data) {
option.title.text = data.
option.xAxis[0].data = data.
option.series[0].data = data.
// 取得数据后显示到图表中
myChart.setOption(option);
myChart.on(echarts.config.EVENT.CLICK, eConsole);
}, &#39;json&#39;);
// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
var option = {
x : &#39;center&#39;,
y : &#39;top&#39;,
textStyle : {
fontSize : 26,
fontFamily : &微软雅黑&,
borderWidth : 0
tooltip : {
trigger : &#39;axis&#39;,
axisPointer : {
type : &#39;line&#39;,
lineStyle : {
color : &#39;#0f0&#39;,
width : 2,
type : &#39;solid&#39;
xAxis : [ {
type : &#39;category&#39;,
axisTick : {
show : false
splitLine : {
lineStyle : {
type : &#39;dotted&#39;
yAxis : [ {
type : &#39;value&#39;,
axisLabel : {
formatter : &#39;{value}件&#39;
splitLine : {
lineStyle : {
type : &#39;dotted&#39;
// 数值序列
series : [ {
name : &#39;销量&#39;,
type : &#39;line&#39;,
itemStyle : {
normal : {
color : &#39;#f00&#39;,
lineStyle : {
show : true,
position : &#39;right&#39;,
textStyle : {
fontStyle : &#39;bolder&#39;,
fontSize : 15
symbol : &#39;emptyCircle&#39;,
symbolSize : 4,
// 事件的参数中包括：数据在序列中的下标dataIndex，数据的值value，x轴上的名称name
function eConsole(param) {
if (typeof param.seriesIndex == &#39;undefined&#39;) {
if (param.type == &#39;click&#39;) {
var mes = param.name + &#39;:&#39; + param.
document.getElementById(&#39;info&#39;).innerHTML =
服务端的servlet如下，这种小东西还写的不熟练：获取文件路径，设置UTF-8编码，关闭流等操作还不够轻车熟路
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
response.setCharacterEncoding(&UTF-8&);
String name = request.getParameter(&name&);
String fullPath = this.getServletContext().getRealPath(&/&) + &data&
+ File.separator +
PrintWriter out =
BufferedReader br =
out = response.getWriter();
br = new BufferedReader(new FileReader(fullPath));
String str =
while ((str = br.readLine()) != null)
out.print(str);
out.flush();
if (br != null)
br.close();
// 即使自己不关闭，tomcat等容器也会关闭
if (out != null)
out.close();
服务端返回的数据一定要是标准&#26684;式的json。标准是指用双引号，不用单引号。另外，最后一个键&#20540;对后面不要有逗号，IE8中不允许JavaScript代码中的json采用这种不规范的写法，FireFox容许。
&title& : &销量和进货量&,
&category& : [ &衬衫&, &羊毛衫&, &雪纺衫&, &裤子&, &高跟鞋&, &袜子& ],
&value& : [ 5, 20, 40, 10, 10, 20 ]
如果在图表已经加载过数据之后，想要换一组数据，可以用getOption方法得到一份option的深拷贝，然后把其中的数据改掉，再调用setOption方法就可以：
var newOption = myChart.getOption(); // 深拷贝
newOption.xAxis[0].data = newData.
newOption.series[0].data = newData.
myChart.setOption(newOption,true); // 第二个参数表示不和原先的option合并
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：29394次
排名：千里之外
原创：10篇
(3)(2)(4)(1)【关于百度ECharts图表插件】
[问题点数：80分，结帖人liuleiyu121520]
【关于百度ECharts图表插件】
[问题点数：80分，结帖人liuleiyu121520]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
本帖子已过去太久远了，不再提供回复功能。}