您好,登錄后才能下訂單哦!
這篇文章主要講解了“怎么用jQuery插件echarts實(shí)現(xiàn)多折線圖效果”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“怎么用jQuery插件echarts實(shí)現(xiàn)多折線圖效果”吧!
1、問題背景:
設(shè)計(jì)一個(gè)折線圖,折線圖展示蘋果、香蕉的銷售量
2、實(shí)現(xiàn)代碼:
<!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{ width: 99%; height: 99%; font-family: "微軟雅黑"; font-size: 12px; } #someline{ width:100%; height:99%; } </style> <script> $(document).ready(function(){ var chart = document.getElementById("someline"); var echart = echarts.init(chart); var option = { title: { text: '水果銷售量' }, tooltip : { trigger: 'axis' }, legend: { data:['蘋果','香蕉'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', boundaryGap : false, data : ['第一季度','第二季度','第三季度','第四季度'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'蘋果', type:'line', stack: '銷量', areaStyle: {normal: {}}, data:[1270, 6382, 2091, 1034] }, { name:'香蕉', type:'line', stack: '銷量', areaStyle: {normal: {}}, data:[2270, 3456, 5432, 3423] } ] }; echart.setOption(option); }); </script> </head> <body> <div id="someline"></div> </body> </html>
3、實(shí)現(xiàn)效果圖:
感謝各位的閱讀,以上就是“怎么用jQuery插件echarts實(shí)現(xiàn)多折線圖效果”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對怎么用jQuery插件echarts實(shí)現(xiàn)多折線圖效果這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。