【可视化大屏】将柱状图引入到html页面中
到这里还是用的死数据,先将柱状图引入html页面测试一下
根据上一步echarts的使用步骤,引入echarts.js后需要初始化一个实例对象,所以新建一个index.js文件来进行创建实例化对象和配置数据信息等。
//在index.html引入<script src="js/echarts.min.js"></script><script src="js/index.js"></script>
//在index.js文件中
(function () {// 实例化对象var myChart = echarts.init(document.querySelector(".bar .chart"));// 指定配置和数据var option = {color: ["#2f89cf"],tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器,坐标轴触发有效type: "shadow" // 默认为直线,可选为:'line' | 'shadow'}},grid: {left: "0%",top: "10px",right: "0%",bottom: "4%",containLabel: true},xAxis: [{type: "category",data: ["旅游行业","教育培训","游戏行业","医疗行业","电商行业","社交行业","金融行业"],axisTick: {alignWithLabel: true},// 修改刻度标签的样式axisLabel: {textStyle: {color: "rgba(255,255,255,.6)",fontSize: "12"}},// x轴线条样式不显示axisLine: {show: false}}],yAxis: [{type: "value",axisLabel: {textStyle: {color: "rgba(255,255,255,.6)",fontSize: "12"}},// y轴线条样式axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"// width: 1,// type: "solid"}},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)"}}}],series: [{name: "直接访问",type: "bar",barWidth: "35%",//柱子宽度data: [200, 300, 300, 900, 1500, 1200, 600],itemStyle: {barBorderRadius: 5//柱子圆角}}]};// 把配置给实例对象myChart.setOption(option);
})()
效果图:
存在的问题:图表没有自适应
解决办法:
在index.js中添加// 监听屏幕尺寸变化,让图表自适应window.addEventListener("resize", function () {myChart.resize();});相关文章:
【可视化大屏】将柱状图引入到html页面中
到这里还是用的死数据,先将柱状图引入html页面测试一下 根据上一步echarts的使用步骤,引入echarts.js后需要初始化一个实例对象,所以新建一个index.js文件来进行创建实例化对象和配置数据信息等。 //在index.html引入<script src"j…...
gm/ID设计方法学习笔记(一)
前言:为什么需要gm/id (一)主流设计方法往往侧重于强反型区(过驱>0.2V),低功耗设计则侧重于弱反型区(<0),但现在缺乏对中反型区的简单和准确的手算模型。 1.对于…...
高度细化的SAGA模式实现:基于Spring Boot与RabbitMQ的跨服务事务
场景与技术栈 场景:电商系统中的订单创建流程,涉及订单服务(Order Service)、库存服务(Inventory Service)、支付服务(Payment Service)。 技术栈: Java 11 Spring Bo…...
Vue工程化开发
Vue工程化开发 一、工程化开发和脚手架 1.开发Vue的两种方式 核心包传统开发模式:基于html / css / js 文件,直接引入核心包,开发 Vue。工程化开发模式:基于构建工具(例如:webpack)的环境中开…...
Ray_Tracing_The_Next_Week下
5image Texture Mapping 图像纹理映射 我们之前虽然在交点信息新增了uv属性,但其实并没有使用,而是通过p交点笛卡尔坐标确定瓷砖纹理或者大理石噪声纹理的值 现在通过uv坐标读取图片,通过std_image库stbi_load(path)…...
ES索引生命周期管理
基于如何 定时删除ES索引过期数据 而引发的一系列关于ES索引生命周期管理ILM(Index Lifecycle Management)的学习 快速上手 :定时删除ES索引中的过期数据 1. ILM解决什么问题? ES从6.7版本引入ILM,通过ILM可以解决哪些问题呢? 自动新建…...
Oracle数据库体系结构基础
关于Oracle体系结构 基于Oracle11g体系结构 目标: 了解Oracle体系结构掌握逻辑存储结构掌握物理存储结构熟悉Oracle服务器结构熟悉常用的数据字典 Oracle数据库管理中的重要的三个概念 实例(instance):实例是指一组Oracle后台进程以及在服务器中分配…...
QT学习笔记4.5(文件、参数文件)
QT学习笔记4.5(文件、参数文件) 1.保存配置参数 1.使用QSettings保存到注册表,ini文件 2.文件存储:使用 QFile 和其他类将参数保存到文本文件、二进制文件、XMLWENJIAN、JSON 文件等。 文本文件:以简单的键值对格式…...
服务器虚拟化的详细学习要点
服务器虚拟化的详细学习要点可以归纳为以下几个方面: 1. 基本概念与原理 定义与原理:了解服务器虚拟化是一种将物理服务器资源转化为虚拟服务器资源的技术,允许在一台物理服务器上运行多个虚拟服务器。 虚拟化层次:理解虚拟化的不同层次,如裸机虚拟化(Type 1)和托管虚…...
创建一个Java Web API项目
创建一个Java Web API涉及多个步骤和技术栈,包括项目设置、依赖管理、数据访问层实现、业务逻辑实现、控制层开发以及测试和部署。在这篇详解中,我将带领你通过一个完整的Java Web API实现流程,采用Spring Boot和MyBatis-Plus作为主要技术工具…...
对称加密算法的使用Java和C#
1. JAVA中的使用 1.1.原生使用 Main函数代码 import symmetric_encryption.AESExample; import symmetric_encryption.BlowfishExample; import symmetric_encryption.DESExample; import symmetric_encryption.TripleDESExample; public class App { public static…...
10款好用的开源 HarmonyOS 工具库
大家好,我是 V 哥,今天给大家分享10款好用的 HarmonyOS的工具库,在开发鸿蒙应用时可以用下,好用的工具可以简化代码,让你写出优雅的应用来。废话不多说,马上开整。 1. efTool efTool是一个功能丰富且易用…...
ubuntu22.04中备份Iptables的设置
在 Ubuntu 22.04 中备份 iptables 的设置,您可以采用以下几种方法: 使用 iptables-save 命令: 您可以使用 iptables-save 命令将当前的 iptables 规则保存到文件中。例如,要将规则保存到 /etc/iptables/rules.v4 文件中࿰…...
(PyTorch) 深度学习框架-介绍篇
前言 在当今科技飞速发展的时代,人工智能尤其是深度学习领域正以惊人的速度改变着我们的世界。从图像识别、语音处理到自然语言处理,深度学习技术在各个领域都取得了显著的成就,为解决复杂的现实问题提供了强大的工具和方法。 PyTorch 是一个…...
若依从redis中获取用户列表
因为若依放入用户的时候,会在减值中添加随机串,所以用户的key会在redis中变成: login_tokens:6af07052-b76d-44dd-a296-1335af03b2a6 这样的样子。 如果用 Set<Object> items redisService.redisTemplate.keys("login_tokens&…...
文件上传之%00截断(00截断)以及pikachu靶场
pikachu的文件上传和upload-lab的文件上传 目录 mime type类型 getimagesize 第12关%00截断, 第13关0x00截断 差不多了,今天先学文件上传白名单,在网上看了资料,差不多看懂了,但是还有几个地方需要实验一下&#…...
Chainlit集成LlamaIndex并使用通义千问实现和数据库交互的网页对话应用(text2sql)
前言 我在之前的几篇文章中写了如何使用Chainlit集成Langchain并使用通义千问实现和数据库交互的网页对话应用,但是发现Langchain的几种和数据库交互的组件都不够让我满意,虽然已经满足了大部分场景的需求,但是问题还是很多,比如…...
计组复习笔记
计组笔记 汇编部分 通用寄存器(General Registers): AX (Accumulator): 用于累加运算,也是乘法和除法的默认寄存器。BX (Base Register): 可以用作一个基址寄存器,通常用于存放数据的基地址。CX (Counter Register): 通常用于循环…...
62. 环境贴图2
环境贴图作用测试 实际生活中光源照射到一个物体上,这个物体反射出去的光线也会影响其他的物体,环境贴图就是用一种简单方式,近似模拟一个物体周边环境对物体表面的影响。 测试:对于PBR材质,如果threejs三维场景不添…...
MATLAB中数据导入与导出的全面指南
在MATLAB中,数据的导入与导出是数据处理工作流中的两个基本步骤。导入是将外部数据加载到MATLAB工作区的过程,而导出则是将工作区中的数据保存到外部文件中。这两个步骤对于数据分析、可视化和结果共享至关重要。本文将详细介绍如何在MATLAB中进行数据的…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录,不允许匿名访问,kefu只能访问/data/kefu目录,不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
