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

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

1 人参与  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)
  • 赞助本站

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

最新文章

  • 京圈佛子破戒后,我改嫁京圈纨绔(沈墨渊,白晶晶)
  • 前世被闺蜜害死,重生后我让她从太子妃变疯女苏婉儿,清歌完本_前世被闺蜜害死,重生后我让她从太子妃变疯女(苏婉儿,清歌)
  • 全书浏览七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)_七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)全书结局
  • 今天也没变成昨天(周扬陈默)全书免费_(周扬陈默)今天也没变成昨天后续(周扬陈默)
  • 重生后,秦总非要父以子贵(许沐晴,秦越泽)全书浏览_重生后,秦总非要父以子贵全书浏览
  • 他嫌弃我喝两块钱豆浆上不了台面,我结婚后他又哭又闹全书万照,白青青在线
  • 昭然若梦前尘烬列表_昭然若梦前尘烬(温昭然方池雲)
  • 导师借我股票账号,我倒欠五十万(孟潇潇,宁薇)_导师借我股票账号,我倒欠五十万孟潇潇,宁薇
  • 拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾(周钰泽,蒋清清,思源)全书浏览_拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾全书浏览
  • 我的人生,你已出局(程森凌古楚文)_我的人生,你已出局程森凌古楚文
  • 穿书成病娇女配,睁眼就签下离婚协议书(朱楼)_穿书成病娇女配,睁眼就签下离婚协议书
  • 老婆逼我给白月光捐肾,我死后她悔疯了(宋逸晨沈墨白)全书浏览_老婆逼我给白月光捐肾,我死后她悔疯了全书浏览

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

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