ECharts3.0饼状图使用问题总结

Posted stir-friedeggplant

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ECharts3.0饼状图使用问题总结相关的知识,希望对你有一定的参考价值。

前提:本人使用的是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未做尝试,仅供参考)

 












































以上是关于ECharts3.0饼状图使用问题总结的主要内容,如果未能解决你的问题,请参考以下文章

java写饼状图问题

怎么制作三维饼状图

在winform中如何生成饼状图和柱状图?

hightchart的3d饼状图图例显示问题记录

asp如何实现立体饼状图?

iOS使用Charts框架绘制—饼状图