이 글에서는 주로 jQuery 플러그인 echarts의 루프 생성 효과를 소개하고, echarts 플러그인의 디지털 그래픽 루프 출력에 대한 구현 단계와 관련 운영 기술을 완전한 예제 형식으로 분석합니다. 독자가 참조용으로 다운로드할 수 있는 데모 소스 코드가 필요한 친구는 이를 참조하여 모든 사람에게 도움이 되기를 바랍니다.
1. 문제 배경:
for 루프를 사용하여 여러 거품 차트를 생성하고 각 거품을 클릭할 수 있습니다.
2. 구현 소스 코드:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-循环生成图</title> <script type="text/javascript" src="jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="echarts.js" ></script> <style> body,html,#p-chart{ width: 99%; height: 100%; font-family: "微软雅黑"; font-size: 12px; } .chart{ width: 1200px; height: 100px; } </style> <script> $(document).ready(function(){ buildChart(); buildChartJS(); }); function buildChart() { $("#p-chart").empty(); var chart = ""; for(var i=0;i<8;i++) { chart += "<p id='chart"+i+"' class='chart'></p>"; } $("#p-chart").append(chart); } function buildChartJS() { for(var i=0;i<8;i++) { var chart = document.getElementById('chart'+i); var echart = echarts.init(chart); var option = { legend: { data:['scatter1'], show:false }, splitLine:{ show:false }, grid:{ borderWidth:0 }, xAxis : [ { show:false, type : 'value', splitNumber: 2, scale: true, axisLine:{ show:false }, splitLine:{ show:false }, axisTick:{ show:false } } ], yAxis : [ { show:false, type : 'value', splitNumber: 2, scale: true, axisLine:{ show:false }, splitLine:{ show:false } } ], series : [ { name:'scatter1', type:'scatter', symbol: 'emptyCircle', symbolSize: 20, itemStyle : { normal: { color:'#0068B7', label:{ show: true, position: 'inside', textStyle : { fontSize : 26, fontFamily : '微软雅黑', color:'#0068B7' } } } }, data: randomDataArray() } ] }; function eConsole(param) { alert(param.value); console.dir(param); } echart.on("click", eConsole); echart.setOption(option); } } function randomDataArray() { var d = []; var arr = [3,5,7,9,10,1,2,4,8,6]; var len = 10; for(var i=0;i<len;i++) { d.push([i+1,0,arr[i],]); } return d; } </script> </head> <body> <p id="p-chart"></p> </body> </html>
3.
관련 권장사항:
X축, Y축 및 격자선 제거에 대한 echarts 구현 예 공유 vue에서 Echarts 차트 사용에 대한 자세한 설명PHP Echarts를 사용하여 생성하는 자세한 설명 데이터 통계 보고서위 내용은 echarts로 구현된 루프 생성 그래프 효과 공유 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!