【可视化大屏】将柱状图引入到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中进行数据的…...

地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...

从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...

shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...