仪表盘各个属性的意思

<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值