前提:本人使用的是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饼状图使用问题总结的更多相关文章

  1. iOS 饼状图

    首先先看一下效果: 一.创建饼状图对象   创建饼状图对象用到类是PieChartView.h, 代码如下: self.pieChartView = [[PieChartView alloc] ini ...

  2. 第三方Charts绘制图表四种形式:饼状图,雷达图,柱状图,直线图

    对于第三方框架Charts(Swift版本,在OC项目中需要添加桥接头文件),首先要解决在项目中集成的问题,集成步骤: 一.下载Charts框架 下载地址:https://github.com/dan ...

  3. 封装构造函数,用canvas写饼状图和柱状图

    封装构造函数,用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景 ...

  4. 基于SpringMVC框架使用ECharts3.0实现折线图,柱状图,饼状图,的绘制(上篇)

    页面部分 <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> ...

  5. Yii 2.0: yii2-highcharts-widget创建饼状图

    安装 The preferred way to install this extension is through composer. 项目根目录下执行: php composer.phar requ ...

  6. [BOT]自己动手实现android 饼状图,PieGraphView,附源码解析

    本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...

  7. highcharts饼状图使用案例

    在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...

  8. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  9. arcgis api for flex之专题图制作(饼状图,柱状图等)

    最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...

随机推荐

  1. 网易云复盘:云计算前端这一年(AngularJS粉慎入)

    本文由  网易云发布. 作者:赵雨森 2017年的前端已然没有剧烈的变动,但发展势头仍然不减.语言.标准.框架和库逐渐稳定和完善,各团队再也不用花大把精力放在造轮子上,而更多的是去积累所需的组件库.开 ...

  2. day 108 项目luffy &contenttype

     反向查询  反向查询 路飞学城项目  一.建模型 models from django.db import models from django.contrib.contenttypes.field ...

  3. day74天中间件介绍

    一. importlib settings 执行结果: 两个process_request  process_response按照注册顺序的倒叙进行执行 PROCESS_VIEW  Process_v ...

  4. java-斐波那契数列的解法

    public class Feibo { static long[] temp = new long[1000000]; static long fun1(int n){ if(temp[n]!=0) ...

  5. super()的作用

    super能够用来訪问父类的构造方法和被子类所隐藏的方法.假设子类中有方法与父类中的方法名称和參数同样,则父类中的方法就被隐藏起来,也就是说在子类中重载了父类中的方法. 引用父类中所隐藏的语法格式例如 ...

  6. 【Hight Performance Javascript】——脚本加载和运行

    脚本加载和运行 当浏览器遇到一个<script>标签时,无法预知javascript是否在<p>标签中添加内容.因此,浏览器停下来,运行javascript代码,然后继续解析. ...

  7. nginx并发连接控制模块ngx_http_limit_conn_module

    模块: ngx_http_limit_conn_module 作用: 根据定义的key限制并发连接数 配置示例: http { limit_conn_zone $binary_remote_addr ...

  8. 冒泡排序实现(Java)

    冒泡排序是一种交换排序,它的基本思路是: 两两比较相邻记录的关键字,如果反序则交换,知道没有反序的记录位置. 依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2个数, ...

  9. POJ 1036

    #include<iostream> #include<algorithm> #define MAXN 205 using namespace std; struct node ...

  10. (转)Linux ldconfig 与 ldd指令

    原文:https://blog.csdn.net/iamzhangzhuping/article/details/49203981 一.ldconfig ldconfig是一个动态链接库管理命令,为了 ...