当前位置: 首页 > news >正文

【可视化大屏】将柱状图引入到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页面中

到这里还是用的死数据&#xff0c;先将柱状图引入html页面测试一下 根据上一步echarts的使用步骤&#xff0c;引入echarts.js后需要初始化一个实例对象&#xff0c;所以新建一个index.js文件来进行创建实例化对象和配置数据信息等。 //在index.html引入<script src"j…...

gm/ID设计方法学习笔记(一)

前言&#xff1a;为什么需要gm/id &#xff08;一&#xff09;主流设计方法往往侧重于强反型区&#xff08;过驱>0.2V&#xff09;&#xff0c;低功耗设计则侧重于弱反型区&#xff08;<0&#xff09;&#xff0c;但现在缺乏对中反型区的简单和准确的手算模型。 1.对于…...

高度细化的SAGA模式实现:基于Spring Boot与RabbitMQ的跨服务事务

场景与技术栈 场景&#xff1a;电商系统中的订单创建流程&#xff0c;涉及订单服务&#xff08;Order Service&#xff09;、库存服务&#xff08;Inventory Service&#xff09;、支付服务&#xff08;Payment Service&#xff09;。 技术栈&#xff1a; Java 11 Spring Bo…...

Vue工程化开发

Vue工程化开发 一、工程化开发和脚手架 1.开发Vue的两种方式 核心包传统开发模式&#xff1a;基于html / css / js 文件&#xff0c;直接引入核心包&#xff0c;开发 Vue。工程化开发模式&#xff1a;基于构建工具&#xff08;例如&#xff1a;webpack&#xff09;的环境中开…...

Ray_Tracing_The_Next_Week下

5image Texture Mapping 图像纹理映射 我们之前虽然在交点信息新增了uv属性&#xff0c;但其实并没有使用&#xff0c;而是通过p交点笛卡尔坐标确定瓷砖纹理或者大理石噪声纹理的值 现在通过uv坐标读取图片&#xff0c;通过std_image库stbi_load&#xff08;path&#xff09;…...

ES索引生命周期管理

基于如何 定时删除ES索引过期数据 而引发的一系列关于ES索引生命周期管理ILM(Index Lifecycle Management)的学习 快速上手 &#xff1a;定时删除ES索引中的过期数据 1. ILM解决什么问题&#xff1f; ES从6.7版本引入ILM&#xff0c;通过ILM可以解决哪些问题呢? 自动新建…...

Oracle数据库体系结构基础

关于Oracle体系结构 基于Oracle11g体系结构 目标&#xff1a; 了解Oracle体系结构掌握逻辑存储结构掌握物理存储结构熟悉Oracle服务器结构熟悉常用的数据字典 Oracle数据库管理中的重要的三个概念 实例&#xff08;instance):实例是指一组Oracle后台进程以及在服务器中分配…...

QT学习笔记4.5(文件、参数文件)

QT学习笔记4.5&#xff08;文件、参数文件&#xff09; 1.保存配置参数 1.使用QSettings保存到注册表&#xff0c;ini文件 2.文件存储&#xff1a;使用 QFile 和其他类将参数保存到文本文件、二进制文件、XMLWENJIAN、JSON 文件等。 文本文件&#xff1a;以简单的键值对格式…...

服务器虚拟化的详细学习要点

服务器虚拟化的详细学习要点可以归纳为以下几个方面: 1. 基本概念与原理 定义与原理:了解服务器虚拟化是一种将物理服务器资源转化为虚拟服务器资源的技术,允许在一台物理服务器上运行多个虚拟服务器。 虚拟化层次:理解虚拟化的不同层次,如裸机虚拟化(Type 1)和托管虚…...

创建一个Java Web API项目

创建一个Java Web API涉及多个步骤和技术栈&#xff0c;包括项目设置、依赖管理、数据访问层实现、业务逻辑实现、控制层开发以及测试和部署。在这篇详解中&#xff0c;我将带领你通过一个完整的Java Web API实现流程&#xff0c;采用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 工具库

大家好&#xff0c;我是 V 哥&#xff0c;今天给大家分享10款好用的 HarmonyOS的工具库&#xff0c;在开发鸿蒙应用时可以用下&#xff0c;好用的工具可以简化代码&#xff0c;让你写出优雅的应用来。废话不多说&#xff0c;马上开整。 1. efTool efTool是一个功能丰富且易用…...

ubuntu22.04中备份Iptables的设置

在 Ubuntu 22.04 中备份 iptables 的设置&#xff0c;您可以采用以下几种方法&#xff1a; 使用 iptables-save 命令&#xff1a; 您可以使用 iptables-save 命令将当前的 iptables 规则保存到文件中。例如&#xff0c;要将规则保存到 /etc/iptables/rules.v4 文件中&#xff0…...

(PyTorch) 深度学习框架-介绍篇

前言 在当今科技飞速发展的时代&#xff0c;人工智能尤其是深度学习领域正以惊人的速度改变着我们的世界。从图像识别、语音处理到自然语言处理&#xff0c;深度学习技术在各个领域都取得了显著的成就&#xff0c;为解决复杂的现实问题提供了强大的工具和方法。 PyTorch 是一个…...

若依从redis中获取用户列表

因为若依放入用户的时候&#xff0c;会在减值中添加随机串&#xff0c;所以用户的key会在redis中变成&#xff1a; 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截断&#xff0c; 第13关0x00截断 差不多了&#xff0c;今天先学文件上传白名单&#xff0c;在网上看了资料&#xff0c;差不多看懂了&#xff0c;但是还有几个地方需要实验一下&#…...

Chainlit集成LlamaIndex并使用通义千问实现和数据库交互的网页对话应用(text2sql)

前言 我在之前的几篇文章中写了如何使用Chainlit集成Langchain并使用通义千问实现和数据库交互的网页对话应用&#xff0c;但是发现Langchain的几种和数据库交互的组件都不够让我满意&#xff0c;虽然已经满足了大部分场景的需求&#xff0c;但是问题还是很多&#xff0c;比如…...

计组复习笔记

计组笔记 汇编部分 通用寄存器&#xff08;General Registers&#xff09;: AX (Accumulator): 用于累加运算&#xff0c;也是乘法和除法的默认寄存器。BX (Base Register): 可以用作一个基址寄存器&#xff0c;通常用于存放数据的基地址。CX (Counter Register): 通常用于循环…...

62. 环境贴图2

环境贴图作用测试 实际生活中光源照射到一个物体上&#xff0c;这个物体反射出去的光线也会影响其他的物体&#xff0c;环境贴图就是用一种简单方式&#xff0c;近似模拟一个物体周边环境对物体表面的影响。 测试&#xff1a;对于PBR材质&#xff0c;如果threejs三维场景不添…...

MATLAB中数据导入与导出的全面指南

在MATLAB中&#xff0c;数据的导入与导出是数据处理工作流中的两个基本步骤。导入是将外部数据加载到MATLAB工作区的过程&#xff0c;而导出则是将工作区中的数据保存到外部文件中。这两个步骤对于数据分析、可视化和结果共享至关重要。本文将详细介绍如何在MATLAB中进行数据的…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...