echarts仪表盘（ie8中0显示异常）

介绍

经常看到仪表盘，如汽车驾驶舱里的仪表盘，使用Echarts制作的仪表盘可以轻松展示用户的数据，清晰的看出某个指标值所在的范围，仪表盘形式的报表应用在各种统计系统中，本文结合实例讲解仪表盘在销售任务完成率的统计应用。

使用步骤

• 首先引入Echarts，然后在需要放置图表的地方加上div#one，同时给它加上宽度和高度属性。

<script src="echarts.min.js"></script> 
<div id="one" style="width: 300px;height:300px;"></div> 

• 接下来要初始化echarts实例，然后设置选项，最后渲染图像。

  <div id="one" style="width:300px;height:300px;"></div>
    <script type="text/javascript">
        window.onload = function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart =  echarts.init(document.getElementById('one'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '业务指标', //标题文本内容
                },
                toolbox: { //可视化的工具箱
                    show: true,
                    feature: {
                        restore: { //重置
                            show: true
                        },
                        saveAsImage: {//保存图片
                            show: true
                        }
                    }
                },
                tooltip: { //弹窗组件
                    formatter: "{a} <br/>{b} : {c}%"
                },
                series: [{
                    name: '业务指标',
                    type: 'gauge',
                    min:0,
                    max:60,
                    splitNumber:4,
                    axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.4, 'lightgreen'],[0.6, 'orange'],[1, '#ff4500']],//设置刻度值的颜色
                        width: 13,
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisLabel: {            // 坐标轴小标记
                    textStyle: {       // 属性lineStyle控制线条样式
                        fontWeight: 'bolder',
                        color: '#000',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length :15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                splitLine: {           // 分隔线
                    length :25,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        width:3,
                        color: '#000',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                pointer: {           // 指针样式 
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 5
                },
                title : {//设置标题的属性
                   offsetCenter: [0,'30%'], //标题位置
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 15,
                        fontStyle: 'italic',
                        color: '#000',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                detail : {
                    backgroundColor: '#fff',
                    borderWidth: 1,
                    borderColor: '#fff',
                    shadowColor : '#fff', //默认透明
                    width: 50,
                    height:50,
                    offsetCenter: [0, '65%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        color: '#000'              
                    }
                },
                    // detail: { formatter: '{value}%' },
                    data: [{ value: 45, name: '完成率' }]
                }]

            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>

ie8问题

ie8中仪表盘中detail的0和中间的0显示会有bug
解决办法：

detail:{
	formatter: function (value) {
	    return value.toFixed(2);
	}
}