Echarts关于仪表盘

闲来无事，制作不一样的图标一发，领导让把仪表盘做成百分条，我TM也是醉了，大体样式如下图：（图标是没2秒变化的）

<div id="main" style="width: 400px;height: 300px;"></div>        <script>            var myChart = echarts.init(document.getElementById("main"));            option = {                //提示框组件。开发实际中去掉了指针，提示框可以不用设置。                tooltip: {                    formatter: "{a} <br/>{b} : {c}%"                },                //工具栏。本次好像也没用到，刷新，下载，我觉得还是挺实用的，具体开需求！                toolbox: {                    feature: {                        restore: {},                        saveAsImage: {}                    }                },                //下面属性才是仪表盘的核心！！反正我是这么认为的！！！                series: [{                    //类型                    type: 'gauge',                    //半径                    radius: 150,                    //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。                    startAngle: 180,                    //结束角度。                    endAngle: 0,                    center: ['50%', '90%'],                    //仪表盘轴线相关配置。                    axisLine: {                        show:true,                        // 属性lineStyle控制线条样式                        lineStyle: {                            width: 60,                            color:[[1, '#63869e']]                        }                    },                    //分隔线样式。                    splitLine: {                        show: false,                    },                    //刻度样式。                    axisTick: {                        show: false,                    },                    //刻度标签。                    axisLabel: {                        show:false,                    },                    //仪表盘指针。                    pointer: {                        //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！                        show: false,                        //指针长度                        length:'90%',                        width:0,                    },                    //仪表盘标题。                    title: {                        show: true,                        offsetCenter: [0, '-40%'], // x, y，单位px                        textStyle: {                            color: '#hhh',                            fontSize: 30                        }                    },                    //仪表盘详情，用于显示数据。                    detail: {                        show: true,                        offsetCenter: [0, '-10%'],                        formatter: '{value}%',                        textStyle: {                            fontSize: 30                        }                    },                    data: [{                        value: 0,                        name: '存储量'                    }]                }]            };            myChart.setOption(option);            //设置定时，加载随机数据，可以直观显示            timeTicket = setInterval(function() {                var random=(Math.random() * 100).toFixed(2);                var color=[[random/100, '#63869e'], [1, '#c23531']];                option.series[0].axisLine.lineStyle.color=color;                option.series[0].data[0].value =random ;                myChart.setOption(option, true);            }, 200)        </script>

• 仪表盘默认是三个区域，此次百分比显示，只能设置两个区域。
• 通过改变axisLine（仪表盘轴线相关配置）中的lineStyle中color数组，默认是3个。
• 本次，我初始化的时候是1个，然后定时加载显示2个，用百分比隔开，成功显示进度条样式。
• 图标是动态变化的，开发的时候可以根据需求设置，在此次样例中，我设置了随机数

有什么缺陷，多多指正，谢谢各位道（软件大道）友！