jQuery使用echarts循环插入图表实现过程
作者：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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。