Echarts关于仪表盘

https://blog.csdn.net/zc763375777/article/details/53837391

来无事，制作不一样的图标一发，领导让把仪表盘做成百分条，我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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89

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