jQuery使用echarts循環(huán)插入圖表實(shí)現(xiàn)過(guò)程
更新時(shí)間：2025年05月28日 14:31:03 作者：Hero_rong
這篇文章主要介紹了jQuery使用echarts循環(huán)插入圖表,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
jQuery使用echarts循環(huán)插入圖表
jQuery動(dòng)態(tài)循環(huán)插入echarts圖表
- .center_img_list 是我們循環(huán)數(shù)據(jù)的地方
<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">計(jì)算機(jī)行業(yè)專題研究：華為算力進(jìn)展不斷</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": "計(jì)算機(jī)行業(yè)專題研究：華為算力進(jìn)展不斷",
"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": "計(jì)算機(jī)行業(yè)專題研究：華為算力進(jìn)展不斷",
"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": "計(jì)算機(jī)行業(yè)專題研究：華為算力進(jìn)展不斷",
"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);
// 圖表數(shù)據(jù)
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: '收盤(pán)價(jià)',
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軸設(shè)置刻度最大和最小值
min: Math.min(...changePCTRYsList), max: Math.max(...changePCTRYsList)
x軸只顯示兩個(gè)值，開(kāi)始日期和結(jié)束日期
在xAxis中的axisLabel設(shè)置 interval: x.length - 2 即可
axisLabel: {
interval: x.length - 2,
fontSize: 12,
},
全部代碼，可以直接運(yùn)行
<!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">計(jì)算機(jī)行業(yè)專題研究：華為算力進(jìn)展不斷</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": "計(jì)算機(jī)行業(yè)專題研究：華為算力進(jìn)展不斷",
"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": "計(jì)算機(jī)行業(yè)專題研究：華為算力進(jìn)展不斷",
"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": "計(jì)算機(jī)行業(yè)專題研究：華為算力進(jìn)展不斷",
"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);
// 圖表數(shù)據(jù)
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: '收盤(pán)價(jià)',
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>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果簡(jiǎn)單示例
這篇文章主要介紹了jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果,結(jié)合實(shí)例形式分析了jQuery結(jié)合ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
jquery實(shí)現(xiàn)用戶打分評(píng)分特效
很多網(wǎng)站都應(yīng)用了評(píng)分效果，讓用戶可以對(duì)正在瀏覽的文章、電影、資源等進(jìn)行評(píng)分，讓網(wǎng)站增添了幾分互動(dòng)效果。本文將講解如何使用jQuery來(lái)實(shí)現(xiàn)評(píng)分效果。2015-05-05
jQuery不兼容input的change事件問(wèn)題解決過(guò)程
本文記錄了在項(xiàng)目中發(fā)現(xiàn)在IE9中不會(huì)立即觸發(fā)change事件，存在兼容問(wèn)題的解決過(guò)程，非常的詳盡，解決過(guò)程中也有新問(wèn)題出現(xiàn)，最終都解決完畢，完美實(shí)現(xiàn)了兼容各大主流瀏覽器2014-12-12
jquery手機(jī)觸屏滑動(dòng)拼音字母城市選擇器的實(shí)例代碼
下面小編就為大家分享一篇jquery手機(jī)觸屏滑動(dòng)拼音字母城市選擇器的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
經(jīng)常寫(xiě)程序總會(huì)對(duì)數(shù)據(jù)進(jìn)行編輯、刪除功能，雖然不難，代碼不多，你是如何重用這個(gè)功能的呢2011-10-10
EasyUI學(xué)習(xí)之DataGird分頁(yè)顯示數(shù)據(jù)
這篇文章主要介紹了EasyUI學(xué)習(xí)之DataGird分頁(yè)顯示數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
本文主要介紹jQuery文件上傳控件 Uploadify的用法，原作者做了非常詳細(xì)的備注，有需要的朋友可以參考一下。2016-06-06
使用簡(jiǎn)潔的jQuery方法實(shí)現(xiàn)隔行換色功能
本篇文章主要介紹了使用簡(jiǎn)潔的jQuery方法實(shí)現(xiàn)隔行換色功能。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
基于jQuery實(shí)現(xiàn)的單行公告活動(dòng)輪播效果
本文通過(guò)實(shí)例代碼給大家介紹了基于jQuery實(shí)現(xiàn)的單行公告活動(dòng)輪播效果，非常不錯(cuò)，代碼簡(jiǎn)單易懂，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
本文主要總結(jié)了jQuery中的一些小技巧。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01