当前位置:首页 » 《随便一记》 » 正文

Echarts仪表盘刻度线和标签配置

18 人参与  2023年04月07日 10:50  分类 : 《随便一记》  评论

点击全文阅读


 该案例只做参考

步骤:

1.首先设置好盒子的宽高

demo页面

 css页面

 2. 该方法在进入页面时加载

 3. methods方法:

// 待处理阈值实时监听handleRefGauge1() {    const refGauge1 = this.$refs.refGauge1;    this.initCharts(refGauge1, {        //图表位置        grid: {            top: '2%',            left: '2%',            right: '2%',            bottom: '10%'        },        title: [{            //标题            text: 'CPU利用率',            left: 'center',            top: '80%',            textStyle: {             //标题样式                color: '#fff',                fontSize:12,                fontWeight: 600,            }        }],        series: [            {                type: 'gauge',                min: 0,//起始最小刻度值                max: 200,//最大刻度值                splitNumber: 10,//分隔份数                axisLine: {                    lineStyle: {                        width: 3,  //仪表盘宽度                        color: [                            [0.2, '#228b22'],                            [0.8, '#0099ff'],                            [1, '#F1060B']                        ],                    }                },                radius: '85%',//仪表盘大小                markPoint: {                    // 仪表盘指针圆                    animation: false,                    silent: true,                    data: [{                        x: '50%',                        y: '50%',                        symbol: 'circle',                        symbolSize: 10, //指针中心圆大小                        itemStyle: {                            color: '#0099ff'                        },                    }],                },                pointer: {                    // 仪表盘指针                    //icon:'none',                    width:3,//指针的宽度                    length:"60%", //指针长度,按照半圆半径的百分比                    shadowColor : '#ccc', //默认透明                    shadowBlur: 5                },                axisTick: {                //刻度样式                    distance: 0, //刻度线距仪表盘的距离                    length: 5, //刻度线长度                    lineStyle: {                        color: '#228b22',                        width: 1  //刻度线线宽                    }                },                //分隔线样式                splitLine: {                    distance: 0, //分隔线与轴线的距离                    length: 3,                    lineStyle: {                        color: '#228b22',                        width: 1                    }                },                axisLabel: {                   //刻度标签                    color: '#3488db',                    distance: 10,  //标签与刻度线的距离                    fontSize: 8                },                detail: {                //仪表盘详情,用于显示数据                    formatter: '{value}',                    color: '040755',                    fontSize: 12, //数据字体大小                    top:'60%'                },                data: [{                    value: 60,                    top:'60%'  //数据值位置                }]            },        ]    })},

点击全文阅读


本文链接:http://m.zhangshiyu.com/post/58709.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 家宴过后,我捉奸了庶妹和我老公无广告_庶妹老公侍卫TOP10_小说后续在线阅读_无删减免费完结_
  • 寝室六个人,她们背着我建五人群必读文_太天真申请书冷笑最新阅读_小说后续在线阅读_无删减免费完结_
  • 开局获得狐仙传承结局+番外_江帆赵雪隐藏剧情_小说后续在线阅读_无删减免费完结_
  • 刀锈春根生,白骨犹温完结全文_卫舟棠棠知意一口气完结_小说后续在线阅读_无删减免费完结_
  • 夫君立筷子定我灾星罪名,我改嫁冷宫皇子后他追悔莫及好评_赵荀孟如安青瑶精心编著_小说后续在线阅读_无删减免费完结_
  • 邻居低素质,而我没素质独家番外_老太太赖皮欣欣超长版_小说后续在线阅读_无删减免费完结_
  • 重生后我转嫁首富瘸腿独子,总裁前夫却疯了一口气看完_妹妹傅云琛沈明辉独家番外_小说后续在线阅读_无删减免费完结_
  • 我拒绝给系花捐款后,全系同学悔疯了在线阅读_小说后续在线阅读_无删减免费完结_
  • 我让位给女友的透视眼竹马,他却说如果能重生再也不来了。虐心反转_玉石林若女友推荐_小说后续在线阅读_无删减免费完结_
  • 相国独子的丫鬟砸坏我的玉佩后,我当场拒婚阅读_玉佩陈郡谢氏全新_小说后续在线阅读_无删减免费完结_
  • 手术时,我看着病人惨死最新试读_淼淼陆知衍姜颜全本完结_小说后续在线阅读_无删减免费完结_
  • 男友霸道给我开黑卡,转头却骂我是捞女最新章节_肖年顾客黑卡热文_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1