jQuery使用echarts循环插入图表
目录
jQuery动态循环插入echarts图表
y轴显示最大值和最小值
x轴只显示两个值，开始日期和结束日期
jQuery动态循环插入echarts图表
html
.center_img_list 是我们循环数据的地方
<div class="center_img shadow"><div class="center_img_border"><div class="center_img_list"><div class="canvas"></div><div class="img_title">一站式 HarmonyOS/OpenHarmo…</div><div class="label">计算机行业专题研究：华为算力进展不断</div></div></div></div>css
.center_img_border {display: flex;justify-content: space-around;padding: 0.3rem;}.center_img_list {width: 30%;}.center_img_list .canvas {border: solid green 1px;border-radius: 10px;width: 100%;height: 206px;}js
var newList = [{"id": "1","title": "计算机行业专题研究：华为算力进展不断","content": "图表 1：双十一美妆销量",'list': [1, 20, 200, 3, 52, 99],'time': ['2023/01/02', '2023/01/03', '2023/02/02', '2023/02/22', '2023/03/02', '2023/04/02', ]},{"id": "2","title": "计算机行业专题研究：华为算力进展不断","content": "图表 2：双十一家电销量",'list': [1000, 20, 200, 3, 52, 99],'time': ['2023/01/02', '2023/01/03', '2023/02/02', '2023/02/22', '2023/03/02', '2023/04/02', ]},{"id": "3","title": "计算机行业专题研究：华为算力进展不断","content": "图表 3：双十一家具销量",'list': [100, 200, 220, 300, 2, 9],'time': ['2023/01/02', '2023/01/03', '2023/02/02', '2023/02/22', '2023/03/02', '2023/04/02', ]},]this.getEcharts(newList);// 图表数据function getEcharts(newList) {let echartsHtml = ''$.each(newList, function(i, v) {echartsHtml += `<div class="center_img_list"><div class="canvas" id="canvas` + i + `" ></div><div class="img_title">${v.content}</div><div class="label">${v.title}</div></div>`$(document).ready(function() {changeECharts(v.list, v.time, 'canvas' + i);})})$(".center_img_border").html(echartsHtml);}function changeECharts(changePCTRYsList, x, idname) {var chartDom = document.getElementById(idname);let objDom = {}objDom[idname] = echarts.init(chartDom);let option = {xAxis: [{type: 'category',boundaryGap: true,data: x,axisLabel: {interval: x.length - 2,fontSize: 12,},axisLine: {show: false, //隐藏x轴},axisTick: {show: false, //刻度线},}],grid: {left: '',right: 30,bottom: 20,top: 20,containLabel: true},tooltip: {show: true,trigger: 'axis'},yAxis: {show: true,scale: true,alignTicks: true,axisTick: {inside: true},type: 'value',min: Math.min(...changePCTRYsList),max: Math.max(...changePCTRYsList)},series: [{name: '收盘价',data: changePCTRYsList,type: 'line',itemStyle: {color: '#649E92',},symbol: 'none',},{name: '成交量',data: changePCTRYsList,type: 'line',itemStyle: {color: '#649E92',},symbol: 'none',}]};objDom[idname].setOption(option);}
y轴显示最大值和最小值
y轴设置刻度最大和最小值
min: Math.min(...changePCTRYsList),
max: Math.max(...changePCTRYsList)
x轴只显示两个值，开始日期和结束日期
在xAxis中的axisLabel设置 interval: x.length - 2 即可
axisLabel: {interval: x.length - 2,fontSize: 12,},
全部代码，可以直接运行
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>echarts</title><style>*,html,body {padding: 0;margin: 0;box-sizing: border-box;}.center_img_border {display: flex;justify-content: space-around;padding: 0.3rem;}.center_img_list {width: 30%;}.center_img_list .canvas {border: solid green 1px;border-radius: 10px;width: 100%;height: 206px;}</style></head><body><div class="center_img_border"><div class="center_img_list"><div class="canvas"></div><div class="img_title">一站式 HarmonyOS/OpenHarmo…</div><div class="label">计算机行业专题研究：华为算力进展不断</div></div></div></body><script type="text/javascript" src="js/echarts.js"></script><script type="text/javascript" src="js/jquery-2.1.4.min.js"></script><script>var newList = [{"id": "1","title": "计算机行业专题研究：华为算力进展不断","content": "图表 1：双十一美妆销量",'list': [1, 20, 200, 3, 52, 99],'time': ['2023/01/02', '2023/01/03', '2023/02/02', '2023/02/22', '2023/03/02', '2023/04/02', ]},{"id": "2","title": "计算机行业专题研究：华为算力进展不断","content": "图表 2：双十一家电销量",'list': [1000, 20, 200, 3, 52, 99],'time': ['2023/01/02', '2023/01/03', '2023/02/02', '2023/02/22', '2023/03/02', '2023/04/02', ]},{"id": "3","title": "计算机行业专题研究：华为算力进展不断","content": "图表 3：双十一家具销量",'list': [100, 200, 220, 300, 2, 9],'time': ['2023/01/02', '2023/01/03', '2023/02/02', '2023/02/22', '2023/03/02', '2023/04/02', ]},]this.getEcharts(newList);// 图表数据function getEcharts(newList) {let echartsHtml = ''$.each(newList, function(i, v) {echartsHtml += `<div class="center_img_list"><div class="canvas" id="canvas` + i + `" ></div><div class="img_title">${v.content}</div><div class="label">${v.title}</div></div>`$(document).ready(function() {changeECharts(v.list, v.time, 'canvas' + i);})})$(".center_img_border").html(echartsHtml);}function changeECharts(changePCTRYsList, x, idname) {var chartDom = document.getElementById(idname);let objDom = {}objDom[idname] = echarts.init(chartDom);let option = {xAxis: [{type: 'category',boundaryGap: true,data: x,axisLabel: {interval: x.length - 2,fontSize: 12,},axisLine: {show: false, //隐藏x轴},axisTick: {show: false, //刻度线},}],grid: {left: '',right: 30,bottom: 20,top: 20,containLabel: true},tooltip: {show: true,trigger: 'axis'},yAxis: {show: true,scale: true,alignTicks: true,axisTick: {inside: true},type: 'value',min: Math.min(...changePCTRYsList),max: Math.max(...changePCTRYsList)},series: [{name: '收盘价',data: changePCTRYsList,type: 'line',itemStyle: {color: '#649E92',},symbol: 'none',},{name: '成交量',data: changePCTRYsList,type: 'line',itemStyle: {color: '#649E92',},symbol: 'none',}]};objDom[idname].setOption(option);}</script></html>相关文章：
jQuery使用echarts循环插入图表
目录 jQuery动态循环插入echarts图表 y轴显示最大值和最小值 x轴只显示两个值，开始日期和结束日期 jQuery动态循环插入echarts图表 html .center_img_list 是我们循环数据的地方 <div class"center_img shadow"><div class"center_img_b…...
二十三种设计模式全面解析-迭代器模式进阶篇：探索变体与扩展
在前文中，我们深入探讨了迭代器模式的概念、原理和基本应用。然而，迭代器模式并不止于此，它还有更多的变体和扩展，为我们提供了更多灵活的遍历方式和功能。今天，我将继续带领你进入迭代器模式的进阶篇，探索…...
指针传2
几天没有写博客了，怎么说呢？这让我总感觉缺点什么，心里空落落的，你懂吧！ 好了，接下来开始我们今天的正题！ 1. ⼆级指针 我们先来看看代码： 首先创建了一个整型变量a，将…...
【机器学习】决策树算法理论：算法原理、信息熵、信息增益、预剪枝、后剪枝、算法选择
1. 决策树概念 通过不断的划分条件来进行分类，决策树最关键的是找出那些对结果影响最大的条件，放到前面。 我举个列子来帮助大家理解，我现在给我女儿介绍了一个相亲对象，她根据下面这张决策树图来进行选择。比如年龄是女儿择偶更…...
WebMvcConfigurer配置详解
一、简介 WebMvcConfigurer配置类其实是Spring内部的一种配置方式，采用JavaBean的形式来代替传统的xml配置文件形式进行针对框架个性化定制，可以自定义一些Handler，Interceptor，ViewResolver，MessageConverter。基于ja…...
高德地图系列（一）：vue项目如何使用高德地图、入门以及基本控件使用
目录 第一章 前言 第二章 准备工作 2.1 账号注册 2.2 高德地图开发平台文档 2.3 创建应用 第三章 使用地图 3.1 地图使用步骤 3.2 理解几个地图基础控件 3.3 基础类理解 第一章 前言 小编都是在vue项目中使用高德地图的，每一个功能都会亲测可用之后才会…...
centos FreeXL源码编译
安装、编译 https://www.gaia-gis.it/gaia-sins/freexl-2.0.0.zip yum install -y minizip minizip-devel expat-devel ./configure --prefix/usr/local/freexl-2.0.0 make && make install 环境变量 vi /etc/ld.so.conf/usr/local/freexl-2.0.0/libldconfig -v …...
【开题报告】基于SpringBoot的教资考试学习平台的设计与开发
1.选题背景 教资考试是指为了选拔和评价教师专业素质而设立的一系列考试，包括教师资格证考试、教师招聘考试等。这些考试对于教师的职业发展和晋升至关重要。然而，教资考试的内容庞杂且繁琐，学习者需要进行大量的知识积累和复习备考。 当前…...
C# 将PDF文档转换为Word文档
一.开发框架： .NetCore6.0 工具：Visual Studio 2022 二.思路： 1.使用SHA256Hash标识文档转换记录，数据库已经存在对应散列值，则直接返还已经转换过的文档 2.数据库没有对应散列值记录的话，则保存上传PDF…...
海报设计必备！五个免费网站分享，让你的创意得以充分展现！
海报作为一种重要的宣传工具，在各种场合得到了广泛的应用。然而，对许多人来说，制作一张漂亮的海报并不容易。幸运的是，有许多免费的海报制作网站可以帮助人们轻松地制作出漂亮的海报。本文将分享五个优秀的免费海报制作网站。 1.…...
axios不经过全局拦截器策略
项目中使用的axios请求通常会根据项目情况进行请求拦截request和响应拦截response设置，比如对响应拦截的值具体值返回给调用请求部分直接使用 // 部分代码展示 const request axios.create({baseURL: /proxy/,timeout: 1000 * 600,responseType: json, }) // requ…...
Pass基础-DevOps
，DevOps是Dev（开发）和Ops（运维/运营）的结合，它将人、流程、工具、工程实践等等结合起来应用到IT价值流的实现过程中，是一系列原则、方法、流程、实践、工具的综合体。DevOps面向应用的全生命周期…...
k8s 对外服务之 Ingress
LB ingress //Ingress 简介 service的作用体现在两个方面，对集群内部，它不断跟踪pod的变化，更新endpoint中对应pod的对象，提供了ip不断变化的pod的服务发现机制；对集群外部，他类似负载均衡器，可…...
Mybatis Mapper接口和xml绑定的多种方式、内部实现原理和过程
一、绑定方式 1. XML文件方式 在Mybatis中，我们需要创建一个与实体类对应的Mapper接口，然后在该接口上添加方法，这些方法对应着SQL语句。然后，我们需要创建一个XML文件，这个文件中包含了SQL语句和映射关系。 例如&a…...
Unity性能优化分析篇
性能优化是游戏项目开发中一个重要环节。游戏帧率过低，手机发烫， 包体太大，低端机上跑不起来等, 这些都需要来做优化，不管过去，现在，未来，性能优化都是永恒的话题。 而性能优化首先要掌握的是性…...
一键帮您解决win11最新版画图工具难用问题!
🦄个人主页:修修修也 ⚙️操作环境:Windows 11 正文 自从win11更新后,新版的画图工具变得非常难用,如: 使用橡皮擦后露出背版马赛克 框住某部分拖动移动时背景露出马赛克剪贴板上图片信息无法直接插入到画图板 目前没有一个好一些的能够在软件内部解决这些问题的方…...
老师的保命大法
数字化高度发达的今天，成绩查询系统已经成为学校教育中不可或缺的一部分。不同于传统的成绩公布方式，成绩查询系统更加高效、便捷，同时也充分保障了每位学生的隐私，今天就来揭秘这个教师保命大法！ 1、代码查询法 对于…...
Django视图函数和资源
文章目录 1.视图1.1 文件or文件夹1.2 相对和绝对导入urls1.3 视图参数1.4 返回值1.5 响应头1.6 FBV和CBV 2.静态资源2.1 静态文件2.2 媒体文件 1.视图 1.1 文件or文件夹 1.2 相对和绝对导入urls 注意实现：不要再项目根目录做相对导入。 原则： 绝对导入…...
戴建业作品集读书笔记
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 一、高贵既不屈己从人，也不强人同己君子之交淡如水鄙弃世俗功利，以审美的态度应世观物，不仅美化了平凡的事务，也诗化…...
Linux常用的磁盘使用情况命令汇总
1、查看分区使用百分比 df -h 2、查看指定目录磁盘使用情况 du -hac --max-depth1 /opt 参数：-a 查看所有文件，-c 汇总统计，max-depth1 查看深度为1，2级目录不再统计。 3、常用统计命令汇总...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...
如何在网页里填写 PDF 表格？
有时候，你可能希望用户能在你的网站上填写 PDF 表单。然而，这件事并不简单，因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件，但原生并不支持编辑或填写它们。更糟的是，如果你想收集表单数据ÿ…...
基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用，结合SQLite数据库实现联系人管理功能，并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能，同时可以最小化到系统…...
Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要： 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式（自动驾驶、人工驾驶、远程驾驶、主动安全），并通过实时消息推送更新车…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...