【若依前后端分离】仪表盘绘制

2024-04-20 07:12
文章标签 分离 仪表盘 绘制 若依

本文主要是介绍【若依前后端分离】仪表盘绘制,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

示例:

代码:

 InstrumentPanel.vue组件

<template><div><!-- 在这里放置你的图表组件 --><div ref="echarts" style="width: 100%; height: 400px;"></div></div>
</template><script>
export default {name: 'instrumentPanel',props: {data: {type: Object,required: true}},// data() {//   return {//     value: 12,//     text: "温度"//   };// },mounted() {this.renderChart();},methods: {renderChart() {const echarts = require('echarts');const myChart = echarts.init(this.$refs.echarts);const option = {//提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。tooltip: {// 相对位置,放置在容器正中间position: ['50%', '50%'],formatter: "{a} <br/>{b} : {c}%"},series: [{name: "仓库信息",type: "gauge",//仪表盘min: -10,//最小值max: 60,//最大值// 设置成相对的百分比,中心(圆心)坐标center: ['50%', '50%'],//仪表盘半径,可以放大radius: '90%',//仪表盘起始角度startAngle: 225,//仪表盘结束角度。endAngle: -45,// 分割线的数量splitNumber: 20,//仪表盘详情,用于显示数据。detail: {show: true,formatter: this.data.text+"\n\n"+this.data.value + "℃",textStyle: {color: 'auto',fontSize: 40},offsetCenter: [0, '50%'],fontStyle:'normal',//italic 文字字体的风格。fontWeight:'bold',fontSize:40,},//仪表盘轴线相关配置。axisLine: {//是否在两端显示成圆形。roundCap: true,//仪表盘轴线样式。lineStyle: {//表盘宽度width: 25,//color[i][0] 的值代表整根轴线的百分比,应在 0 到 1 之间;color[i][1] 是对应的颜色。color: [[0.2, '#008FFF'],[0.3, '#00A2E8'],[0.4, '#00C3CD'],[0.5, '#00E7BB'],[0.6, '#00E79F'],[0.7, '#8CDC00'],[0.8, '#FFD306'],[0.9, '#FFB700'],[1, '#FF7D00']],//刻度样式。axisTick: {length: 12,lineStyle: {color: 'auto',}},pointer: {width: 5,length: '80%',shadowColor: '#ccc', //默认透明shadowBlur: 5,shadowOffsetX: 3,shadowOffsetY: 3},//图形阴影的模糊大小。会变立体shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,//阴影水平方向上的偏移距离shadowOffsetX: 8,//阴影垂直方向上的偏移距离。shadowOffsetY: 8,opacity: 0.8,},//展示当前进度。progress: {show: true,//进度条样式。itemStyle: {borderType: [5, 10],borderDashOffset: 5}},//分隔线样式。splitLine: {//分隔线线长。支持相对半径的百分比length: 20,distance:20,lineStyle: {color: 'auto',}},title: {show: true,offsetCenter: [0, '-30%'],textStyle: {color: '#333',fontSize: 30}},axisLabel:{show:true},},tooltip: {trigger:'item',},animationDuration: 4000, // 仪表盘动画时间data: [{title: "标题",value: this.data.value,// name: this.text}]}]};myChart.setOption(option);}}
};
</script><style>
/* 这里可以添加样式 */
</style>

主页面调用:

  <el-row :gutter="32"><el-col :xs="24" :sm="24" :lg="12"><div class="chart-wrapper"><instrument-panel :data="temperatureData"/></div></el-col><el-col :xs="24" :sm="24" :lg="12"><div class="chart-wrapper"><instrument-panel :data="humidityData"/></div></el-col></el-row>

<script>
//引用
import InstrumentPanel  from "@/views/dashboard/InstrumentPanel";export default {name: 'Index',
//数据data() {return {//温度信息temperatureData: {value:25.4,text:"温度",},//湿度信息humidityData: {value: 22.5,text: "湿度",},}},
}
</script>

这篇关于【若依前后端分离】仪表盘绘制的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/919606

相关文章

异构存储(冷热数据分离)

异构存储主要解决不同的数据,存储在不同类型的硬盘中,达到最佳性能的问题。 异构存储Shell操作 (1)查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies (2)为指定路径(数据存储目录)设置指定的存储策略 hdfs storagepolicies -setStoragePo

【WebGPU Unleashed】1.1 绘制三角形

一部2024新的WebGPU教程,作者Shi Yan。内容很好,翻译过来与大家共享,内容上会有改动,加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ,关注公众号【sky的数孪技术】,技术交流、源码下载请添加微信号:digital_twin123 在 3D 渲染领域,三角形是最基本的绘制元素。在这里,我们将学习如何绘制单个三角形。接下来我们将制作一个简单的着色器来定义三角形内的像素

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

利用matlab bar函数绘制较为复杂的柱状图,并在图中进行适当标注

示例代码和结果如下:小疑问:如何自动选择合适的坐标位置对柱状图的数值大小进行标注?😂 clear; close all;x = 1:3;aa=[28.6321521955954 26.2453660695847 21.69102348512086.93747104431360 6.25442246899816 3.342835958564245.51365061796319 4.87

部署若依Spring boot项目

nohup和& nohup命令解释 nohup命令:nohup 是 no hang up 的缩写,就是不挂断的意思,但没有后台运行,终端不能标准输入。nohup :不挂断的运行,注意并没有后台运行的功能,就是指,用nohup运行命令可以使命令永久的执行下去,和用户终端没有关系,注意了nohup没有后台运行的意思;&才是后台运行在缺省情况下该作业的所有输出都被重定向到一个名为nohup.o

请解释Java Web应用中的前后端分离是什么?它有哪些好处?什么是Java Web中的Servlet过滤器?它有什么作用?

请解释Java Web应用中的前后端分离是什么?它有哪些好处? Java Web应用中的前后端分离 在Java Web应用中,前后端分离是一种开发模式,它将传统Web开发中紧密耦合的前端(用户界面)和后端(服务器端逻辑)代码进行分离,使得它们能够独立开发、测试、部署和维护。在这种模式下,前端通常通过HTTP请求与后端进行数据交换,后端则负责业务逻辑处理、数据库交互以及向前端提供RESTful

YOLOv8/v10+DeepSORT多目标车辆跟踪(车辆检测/跟踪/车辆计数/测速/禁停区域/绘制进出线/绘制禁停区域/车道车辆统计)

01:YOLOv8 + DeepSort 车辆跟踪 该项目利用YOLOv8作为目标检测模型,DeepSort用于多目标跟踪。YOLOv8负责从视频帧中检测出车辆的位置,而DeepSort则负责关联这些检测结果,从而实现车辆的持续跟踪。这种组合使得系统能够在视频流中准确地识别并跟随特定车辆。 02:YOLOv8 + DeepSort 车辆跟踪 + 任意绘制进出线 在此基础上增加了用户

Ai+若依(智能售货机运营管理系统---帝可得)-人员管理-点位管理-区域管理-合作商管理----【08篇---0001:上】

项目介绍 售货机简介 帝可得是一个基于物联网概念下的智能售货机运营管理系统 物联网 物联网(IoT:Internet of Things)简单来说,就是让各种物品通过互联网连接起来,实现信息的交换和通信。 这个概念听起来可能有点抽象,但我们可以把它想象成一个超级大的社交网络。不过,这个网络里的成员不是人类,而是各种物品。比如,你的冰箱、洗衣机、甚至是你的汽车,它们都可以通过互联网互

使用matplotlib绘制散点图、柱状图和饼状图-学习篇

一、散点图 Python代码如下: num_points = 100x = np.random.rand(num_points) #x点位随机y = np.random.rand(num_points) #y点位随机colors = np.random.rand(num_points) #颜色随机sizes = 1000 * np.random.rand(num_points) # 大