jQuery使用echarts循环插入图表实现过程
更新时间：2025年05月28日 14:31:03 作者：Hero_rong
这篇文章主要介绍了jQuery使用echarts循环插入图表,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
jQuery使用echarts循环插入图表
jQuery动态循环插入echarts图表
- .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 利用show和hidden实现级联菜单示例代码
级联菜单的实现方法有很多，在本文为大家介绍下使用show和hidden轻松实现下级联效果，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
在前端开发中,使用jQuery能够方便地操作DOM元素,有时候我们需要获取页面上所有的HTML标签,可以通过jQuery来实现,本文将介绍如何使用jQuery获取所有的标签,并展示一个简单的示例代码,需要的朋友可以参考下2024-09-09
在Asp.Net的MVC架构中使用jQuery是一件很容易的事情，而使用jQuery实现Ajax更加简单。2010-08-08
这篇文章主要介绍了浅析jQuery Mobile的初始化事件,jQuery是当前人气最高的JavaScript库,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了jQuery实现的fixedMenu下拉菜单效果代码,通过自定义fixedMenu方法实现点击下拉菜单效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
最近在IE10中开发jquery，关于jquery中combobox多选不能兼容的问题，进行一些总结，感兴趣的朋友可以了解下2013-12-12
网上这种插件很多，但是没一个合适的，大部分都做得很大，功能齐全。于是自己做了这个小插件，顺便学习下jQuery插件的写法。2010-08-08
本期要讲的就是我痛苦中挣扎徘徊后写的jQuery.wechat，一个提供了统一API的、基于jQuery.promise的jQuery.plugin。希望能多少帮助到大家。2014-10-10
这篇文章主要介绍了jQuery.Form上传文件操作,首先需要我们先建立test文件夹，具体代码内容大家通过本文学习下吧2017-02-02
jQuery .attr()和.removeAttr()方法操作元素属性示例
本文为大家详细介绍下如何使用jQuery的.attr()和.removeAttr()方法读取，添加，修改，删除元素的属性，不会的朋友可以参考下哈，希望对大家有所帮助2013-07-07
最新评论