概述
前提:本人使用的是IE9浏览器
1.IE中无法显示,谷歌却显示正常的问题:
1)情况一
var myChart_cols<%=i%> = echarts.init(document.getElementById('cols_qk_<%=i%>'),'shine');
// 使用刚指定的配置项和数据显示图表。
myChart_cols<%=i%>.setOption({
title : {
//text: '任务完成情况',
//subtext: '单位:户数',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: [<%=DataConvertor.arrayToString(col_data.split(","),true) %>] // -----1
},
series : [
{
name: '明细',
type: 'pie',
radius : '65%',//饼图的半径大小
center: ['45%', '50%'],//饼图的位置
data:[ //-----2
<%if(col_data != null && col_data.split(",").length > 0){
String[] col_data_v = col_data.split(",");
String[] col_value_v = col_value.split(",");
for(int v = 0; v < col_data_v.length-1; v++){
%>
{value:<%= col_value_v[v]%>, name:'<%=col_data_v[v] %>'},
<%} %>
{value:<%= col_value_v[col_value_v.length-1]%>, name:'<%=col_data_v[col_data_v.length-1] %>'}
<% }%>
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
] //-----3
});
上述内容为正确代码 ,之前错误原因:序号2处data中生成的最后一个{}的后边多添加了一个逗号(,),同时序号1中最后一项,以及序号3处,存在逗号的话也要去除
2)情况2
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
以谷歌内核进行渲染IE
2.IE中饼图显示不完整,谷歌却显示正常的问题:
解决方式1:下载ecahrts简装包 echarts.common.min.js (http://www.bvbcode.com/cn/qdrjm3c7-2726215)
问题解决,缺点:生成的饼图移动显示不流畅,显示效果不佳(仅存在于IE)
解决方式2:下载
ECharts V3.1.6 最新图表控件修复版(兼容IE9以下浏览器)
(方式2未做尝试,仅供参考)
转载于:https://www.cnblogs.com/Stir-friedEggplant/p/8492331.html
最后
以上就是文艺睫毛为你收集整理的ECharts3.0饼状图使用问题总结的全部内容,希望文章能够帮你解决ECharts3.0饼状图使用问题总结所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复