jQuery使用echarts循環(huán)插入圖表實現(xiàn)過程
更新時間：2025年05月28日 14:31:03 作者：Hero_rong
這篇文章主要介紹了jQuery使用echarts循環(huán)插入圖表,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
jQuery使用echarts循環(huán)插入圖表
jQuery動態(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">計算機行業(yè)專題研究：華為算力進展不斷</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": "計算機行業(yè)專題研究：華為算力進展不斷",
"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": "計算機行業(yè)專題研究：華為算力進展不斷",
"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": "計算機行業(yè)專題研究：華為算力進展不斷",
"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: '收盤價',
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軸只顯示兩個值，開始日期和結(jié)束日期
在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">計算機行業(yè)專題研究：華為算力進展不斷</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": "計算機行業(yè)專題研究：華為算力進展不斷",
"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": "計算機行業(yè)專題研究：華為算力進展不斷",
"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": "計算機行業(yè)專題研究：華為算力進展不斷",
"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: '收盤價',
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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
jquery 利用show和hidden實現(xiàn)級聯(lián)菜單示例代碼
級聯(lián)菜單的實現(xiàn)方法有很多，在本文為大家介紹下使用show和hidden輕松實現(xiàn)下級聯(lián)效果，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
在前端開發(fā)中,使用jQuery能夠方便地操作DOM元素,有時候我們需要獲取頁面上所有的HTML標簽,可以通過jQuery來實現(xiàn),本文將介紹如何使用jQuery獲取所有的標簽,并展示一個簡單的示例代碼,需要的朋友可以參考下2024-09-09
在Asp.Net的MVC架構(gòu)中使用jQuery是一件很容易的事情，而使用jQuery實現(xiàn)Ajax更加簡單。2010-08-08
這篇文章主要介紹了淺析jQuery Mobile的初始化事件,jQuery是當前人氣最高的JavaScript庫,需要的朋友可以參考下2015-12-12
jQuery實現(xiàn)的fixedMenu下拉菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)的fixedMenu下拉菜單效果代碼,通過自定義fixedMenu方法實現(xiàn)點擊下拉菜單效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
在jquery中combobox多選的不兼容問題總結(jié)
最近在IE10中開發(fā)jquery，關于jquery中combobox多選不能兼容的問題，進行一些總結(jié)，感興趣的朋友可以了解下2013-12-12
網(wǎng)上這種插件很多，但是沒一個合適的，大部分都做得很大，功能齊全。于是自己做了這個小插件，順便學習下jQuery插件的寫法。2010-08-08
本期要講的就是我痛苦中掙扎徘徊后寫的jQuery.wechat，一個提供了統(tǒng)一API的、基于jQuery.promise的jQuery.plugin。希望能多少幫助到大家。2014-10-10
這篇文章主要介紹了jQuery.Form上傳文件操作,首先需要我們先建立test文件夾，具體代碼內(nèi)容大家通過本文學習下吧2017-02-02
jQuery .attr()和.removeAttr()方法操作元素屬性示例
本文為大家詳細介紹下如何使用jQuery的.attr()和.removeAttr()方法讀取，添加，修改，刪除元素的屬性，不會的朋友可以參考下哈，希望對大家有所幫助2013-07-07