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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/178785.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

响应系统的作用与实现

响应系统的作用与实现

首先讨论什么是响应式数据和副作用函数&#xff0c;然后尝试实现一个相对完善的响应系统。在这个过程中&#xff0c;我们会遇到各种各样的问题&#xff0c;例如如何避免无限递归&#xff1f;为什么需要嵌套的副作用函数&#xff1f;两个副作用函数之间会产生哪些影响&#xff1…
阅读更多...
Leetcode——岛屿的最大面积

Leetcode——岛屿的最大面积

1. 题目链接&#xff1a;695. 岛屿的最大面积 2. 题目描述&#xff1a; 给你一个大小为 m x n 的二进制矩阵 grid 。 岛屿 是由一些相邻的 1 (代表土地) 构成的组合&#xff0c;这里的「相邻」要求两个 1 必须在 水平或者竖直的四个方向上 相邻。你可以假设 grid 的四个边缘都…
阅读更多...
【halcon】踩坑unin2

【halcon】踩坑unin2

unin1 先说 unin1 这个函数 很好理解&#xff0c;将多个区域求并集&#xff0c;结果就是多个区域会变成一个区域。 unin1 经常和 closing_circle 这个函数连用。 这是应为 当多个区域变成一个区域之后&#xff0c;才能更好的完成闭操作。 unin2 按照思维惯性&#xff0c;看上…
阅读更多...
IDEA安装配置SceneBuilder

IDEA安装配置SceneBuilder

1、下载 SceneBuilder 地址&#xff1a; Scene Builder - Gluon ​​​​​​​ Scene Builder | JavaFX中文官方网站 选择符合自己系统版本&#xff0c;JAVA版本的下载 2、安装SceneBuilder 执行下载的 SceneBuilder 安装程序&#xff0c;并按照安装向导的指示进行…
阅读更多...
iOS WKWebView H5微信、支付宝支付跳转

iOS WKWebView H5微信、支付宝支付跳转

iOS客户端实现嵌入H5进行支付跳转到客户端&#xff0c;支付完成后再跳转回自己的App时,解决WKWebView无法跳转回APP的BUG. 一、支付宝 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void…
阅读更多...
力扣203：移除链表元素

力扣203：移除链表元素

力扣203&#xff1a;移除链表元素 题目描述&#xff1a; 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&a…
阅读更多...
如何掌握项目管理的5个阶段？

如何掌握项目管理的5个阶段？

项目管理协会&#xff08;PMI&#xff09;创建了一个五步项目管理流程&#xff0c;即从启动、规划、执行、监控到结束&#xff0c;为项目经理更好地管理项目提供了现成的基础。如果你正为范围蔓延、返工或项目总体混乱而苦恼&#xff0c;那么遵循项目管理的五个阶段&#xff0c…
阅读更多...
【Java 进阶篇】Java与JQuery选择器：解锁前端开发的魔法大门

【Java 进阶篇】Java与JQuery选择器：解锁前端开发的魔法大门

在前端开发的世界中&#xff0c;选择器是我们与HTML文档进行互动的钥匙&#xff0c;而Java和JQuery则为我们提供了强大的工具&#xff0c;使得前端开发不再是一个艰深的谜题。本篇博客将围绕Java与JQuery选择器展开&#xff0c;深入解析选择器的奥秘&#xff0c;为你打开前端开…
阅读更多...
使用matlab实现图像信号的色彩空间转换

使用matlab实现图像信号的色彩空间转换

利用matlab对图像信号进行读取&#xff0c;并对RGB空间进行转换&#xff0c;如转换到HSI空间等。 下面的这个代码是在使用了rgb2hsi()方法失败后&#xff0c;进行修改的。 rgb2hsi(img)这个方法可以将RGB图像转换为HIS图像&#xff1b;但是爆出了 Untitled5(line 5)hsi rgb2h…
阅读更多...
多数据源切换

多数据源切换

多数据源切换 1.jdbcTemplate2.使用切面3.mybatis层次的多数据源4.spring的dynamic自动注入 项目中经常会有多个数据源&#xff0c;那么如何处理呢 有4种方法 准备&#xff1a; 创建两个数据库 CREATE SCHEMA test DEFAULT CHARACTER SET utf8mb4 ; CREATE SCHEMA school DEFA…
阅读更多...
Power Automate-调用API

Power Automate-调用API

API:汇率查询API免费接口&#xff0c;汇率查询API接口付费定制-进制数据 在输出结果之前添加操作&#xff0c;搜索HTTP&#xff0c;点击绿色的图标 选择第一个 查看API详情对应填入到HTTP操作中&#xff0c;比如方法&#xff08;请求方法&#xff09;、URL&#xff08;接口地址…
阅读更多...
Javaweb之Vue的概述

Javaweb之Vue的概述

2.1 Vue概述 通过我们学习的htmlcssjs已经能够开发美观的页面了&#xff0c;但是开发的效率还有待提高&#xff0c;那么如何提高呢&#xff1f;我们先来分析下页面的组成。一个完整的html页面包括了视图和数据&#xff0c;数据是通过请求 从后台获取的&#xff0c;那么意味着我…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023