仪表盘自定义标题和数值样式

news2025/1/12 10:56:32

仪表盘自定义标题和数值样式


在这里插入图片描述

fn()
var myEcharts;
function fn(v) {
    var chartDom = document.getElementById('myEcharts');
    myEcharts&& myEcharts.dispose();
    myEcharts= echarts.init(chartDom, 'walden');
    var option;
    option = {
        series: [
            {
                type: 'gauge',
                radius: '85%',
                center: ['50%', '45%'],
                max: 1,
                axisLine: {
                    lineStyle: {
                        width: 5,
                        color: [
                            [0.3, '#00a2ff'],
                            [0.7, '#00e9fb'],
                            [1, '#00a2ff']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'auto'
                    }
                },
                axisTick: {
                    distance: 0,
                    length: 3,
                    lineStyle: {
                        color: 'auto',
                        width: 2
                    }
                },
                splitLine: {
                    show: true,
                    distance: 0,
                    length: 8,
                    lineStyle: {
                        color: 'transparent',
                        width: 0,
                        // type: "dashed"
                    },
                },

                axisLabel: {
                    color: 'auto',
                    distance: 0,
                    fontSize: 10
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{title|累计用电}' +'\n' +'{value|{value}}',
                    // color: '#666666', //或者放开这里注释的两行,将{value|{value}}=》{value} 也可
                    // fontSize: 23,
                    offsetCenter: [0, '70%'],
                    rich: { //特定样式
                        title: {
                            fontSize: 16,
                            fontWeight: 'bolder',
                            color:"#666666",
                        },
                        value: {
                            fontSize: 23, 
                            fontWeight: 'bolder',
                            color: '#666666',
                        },
                    },
                },
                data: [
                    {
                        value: 3034467.56,
                    }
                ]
            }
        ]
    };


    option && myEcharts.setOption(option);

    //图表自适应
    window.addEventListener("resize", function (event) {
        myEcharts.resize();
    })

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1127950.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

activiti7 报错Couldn‘t resolve collection expression nor variable reference

解决方法 nacos添加配置 spring:activiti: serializePOJOsInVariablesToJson: false 截图如下: 分析过程 Couldnt resolve collection expression nor variable reference报错分析是“无法解析集合表达式或变量引用” 刚开始我一直测试…

激光雷达数据为例滤波器

可以通过传感器获取障碍物的位置、速度; 但是任何测量结果都是有误差的。 因此需要在传感器测量结果的基础上, 进行跟踪,以此来保证障碍物的位置、速度等信息不会发生突变。 所谓的跟踪就是通过运动模型来递推障碍物的位置、速度等信息。 最经典的跟踪算法是卡尔曼滤波器。…

用户社交信息交互卡片

效果展示 CSS 知识点 CSS 基础知识回顾transition-delay 属性的运用 整体页面布局实现 <div class"card"><div class"user"><div class"img_box"><img src"bg.jpg" /></div><div class"cont…

积分球检测水质的原理是什么?

积分球可以用于检测水质&#xff0c;主要通过测量水体中物质的吸收光谱来实现。具体来说&#xff0c;光路经过积分球内腔&#xff0c;当水样经过球体时&#xff0c;水体中的物质会吸收一定波长的光&#xff0c;从而改变球体的透射光强。通过测量球体透射光强的改变&#xff0c;…

UE 交互草实现 不通过RT与距离场的方式

通过计算世界场景位置与玩家位置的距离&#xff0c;如果距离大于等于DistanceEffect则不做操作&#xff0c;若小于DistanceEffect则DistanceEffect减去两者之间距离除以并除以DistanceEffect&#xff0c;为什么有这个操作呢&#xff1f; 因为我们要做在DistanceEffect距离内&a…

水质分析仪器升级新功能

水质分析仪器&#xff1a;是一种适用于水质多参数测试的便携式仪器。它具有7英寸的触摸彩色屏幕&#xff0c;用户可以通过触摸屏幕进行操作和查看测试结果。 该仪器主要用于测定COD&#xff0c;氨氮&#xff0c;总磷&#xff0c;总氮等常规水质指标&#xff0c;pH值、溶解氧、…

CTFhub-SSRF-端口扫描

根据提示&#xff1a; 来来来性感CTFHub在线扫端口,据说端口范围是8000-9000哦, 用数字生成器生成 8000-9000 的数字 在线生成1到10000阿拉伯数字 - 批量之家 通过 burp 抓包爆破 爆破需要在 url 后添加 127.0.0.1&#xff1a; 根据爆破结果&#xff0c;端口是 8335

【EI会议征稿】第五届大数据与信息化教育国际学术会议(ICBDIE 2024)

【有往届检索记录】第五届大数据与信息化教育国际学术会议&#xff08;ICBDIE 2024&#xff09; 2023 5th International Conference on Big Data and Informatization Education 第五届大数据与信息化教育国际学术会议&#xff08;ICBDIE 2024&#xff09;定于2024年01月19-…

记录npm的版本问题

安装vivo小游戏开发者工具时&#xff0c;运行mg -v时出现错误&#xff0c;错误的原因是node.js的的版本过低&#xff0c;我用的是6.11.2&#xff0c;将node.js升级到10.10.0问题解决

别处拿来的VUE项目 npm run serve报错

问题现象&#xff1a; 从别处拷贝来的VUE项目&#xff0c;根据说明通过npm install 加载了项目依赖 &#xff0c;但是运行npm run serve里报错&#xff1a; npm ERR! Missing script: "serve" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm ru…

Mr.Alright---MTK安卓13 抬手亮屏功能的逻辑

该功能在系统设置-显示-拿起设备时唤醒 alps\vendor\mediatek\proprietary\packages\apps\MtkSettings\src\com\android\settings\display\LiftToWakePreferenceController.javapublic boolean isAvailable() {SensorManager sensors (SensorManager) mContext.getSystemServ…

应用系统集成-企业集成模式(EIP)

应用系统集成-企业集成模式&#xff08;EIP&#xff09; 无论是系统间集成或是系统内部组件之间通讯&#xff0c;消息&#xff08;信息流&#xff09;都是系统设计最重要的因素。EIP将详细的讲述了从消息的角度进行集成设计考虑方方面面&#xff0c;是系统设计重要的参考资料。…

springBoot与Vue共同搭建webSocket环境

欢迎使用Markdown编辑器 你好&#xff01; 这片文章将教会你从后端springCloud到前端VueEleementAdmin如何搭建Websocket 前端 1. 创建websocket的配置文件在utils文件夹下websocket.js // 暴露自定义websocket对象 export const socket {// 后台请求路径url: ,websocketCo…

Python学习--函数传值问题

四、函数传值问题 先看一个例子&#xff1a; # -*- coding: UTF-8 -*- def chagne_number( b ):b 1000b 1 chagne_number(b) print( b )最后输出的结果为&#xff1a; 1先看看运行的结果&#xff1f; 想一下为什么打印的结果是 1 &#xff0c;而不是 1000 &#xff1f; …

凉鞋的 Godot 笔记 204. 语句

204. 语句 在上一篇&#xff0c;我们接触了三种常见的类型&#xff0c;如下所示&#xff1a; 这样我们算是对变量进行了一个入门了。 其实我们除了变量&#xff0c;我们还接触了一个叫做语句的概念。 我们可以看下代码: extends Node# Called when the node enters the sce…

Kubernetes原生微服务开发实践

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 引言 随着互联网业务的…

差值结构顺序的稳定性

3( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 4( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 5( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 做3个网络,让网络的输入都只有3个节点&#xff0c; 一个网络的训练集有3张图片&#xff0c;一个网络训练集有4张图片&#xff0c;一个网络的训练集有5张…

1.VS2022+QT

项目需要对倾斜摄影进行解析编辑&#xff0c;所以采用osg平台。 1.VS2022 百度下载安装一个包&#xff0c;然后选择C桌面开发。 2.Qt 在以下网站下载在线安装程序&#xff0c;并通过cmd运行安装程序。然后根据截图配置安装。 qt | 镜像站使用帮助 | 清华大学开源软件镜像站 |…

Comate SaaS版:开发者的梦想工具终于来了

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

适用于 Windows 的 7 个免费网络课程录制软件

随着虚拟工作和在线教学的兴起&#xff0c;屏幕录制工具是必不可少的&#xff0c;也是当今必备的应用程序。在录制在线会议、创建教程和学术课程或与在线团队协作项目时&#xff0c;它们会派上用场。 网络上有丰富的屏幕录制工具&#xff0c;支持各种平台并提供不同的功能。选…