您好,登錄后才能下訂單哦!
小編給大家分享一下Layer+Echarts如何構(gòu)建彈出層折線圖,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
layer是一款口碑極佳的web彈層組件,她具備全方位的解決方案,致力于服務(wù)各個水平段的開發(fā)人員,您的頁面會輕松地擁有豐富而友好的操作體驗。
在中國可視化生態(tài)系統(tǒng)中,ECharts 通過提供方便豐富的可視化圖表,極大縮短了用戶與數(shù)據(jù)的距離。個人認為是最好用的可用來生成圖表的插件。
現(xiàn)在使用Layer和Echarts構(gòu)建彈出層折線圖。
下載好所需要用到的工具包,Echarts下載為echarts.min.js,Layer在layer官網(wǎng)下載之后將layer文件夾放到項目之中。
在HTML文件中引入
<script src="js/jquery-1.11.1.min.js"></script> <!-- 你必須先引入jQuery1.8或以上版本 --> <script src="js/layer/layer.js"></script> <script src="js/bootstrap.min.js"></script> <!-- 引入 ECharts 文件 --> <script src="js/echarts.min.js"></script>
頁面內(nèi)容
<body> <button id="test2">Layer+Echarts構(gòu)建彈出層折線圖</button> <div id="speedChart" > <!-- 為 ECharts 準(zhǔn)備一個具備大?。▽捀撸┑?nbsp;DOM --> <div id="speedChartMain" ></div> </div> <div id="dfd"> <span>Layer+Echarts構(gòu)建彈出層折線圖</span> <p>Layer+Echarts構(gòu)建彈出層折線圖</p> </div> </body>
js腳本
<script type="text/javascript"> // 基于準(zhǔn)備好的dom,初始化echarts實例 var myChart = echarts.init(document.getElementById('speedChartMain')); option = { tooltip: { trigger: 'axis' }, legend: { data:['郵件營銷','聯(lián)盟廣告','視頻廣告','直接訪問','搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value' }, series: [ { name:'郵件營銷', type:'line', stack: '總量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'聯(lián)盟廣告', type:'line', stack: '總量', data:[220, 182, 191, 234, 290, 330, 310] }, { name:'視頻廣告', type:'line', stack: '總量', data:[150, 232, 201, 154, 190, 330, 410] }, { name:'直接訪問', type:'line', stack: '總量', data:[320, 332, 301, 334, 390, 330, 320] }, { name:'搜索引擎', type:'line', stack: '總量', data:[820, 932, 901, 934, 1290, 1330, 1320] } ] }; // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。 myChart.setOption(option); //彈出一個頁面層 $('#test2').on('click', function() { layer.open({ title:'hello world', type: 1, shade: false, area: ['620px', '460px'], shadeClose: false, //點擊遮罩關(guān)閉 content: $("#speedChart") }); }); </script>
預(yù)覽
當(dāng)然以上是靜態(tài)加載,我們平常使用最多的是異步加載,修改一下代碼即可:
<div id="speedChart" > <!-- 為 ECharts 準(zhǔn)備一個具備大?。▽捀撸┑?nbsp;DOM --> <div id="speedChartMain" ></div> </div>
$(document).ready(function() { option = { tooltip: { trigger: 'axis' }, legend: { data:[] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: [] }, yAxis: { type: 'value' }, series: [] }; //按鈕提交表單數(shù)據(jù) $("#subSpeed").click(function(){ // 基于準(zhǔn)備好的dom,初始化echarts實例 var myChart = echarts.init(document.getElementById('speedChartMain')); // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。 myChart.setOption(option); var url=$("#speedFrom").attr("action"); var times=[]; //時間數(shù)組(實際用來盛放X軸坐標(biāo)值) var speeds=[]; //速度數(shù)組(實際用來盛放Y坐標(biāo)值) $.post(url,$("#speedFrom").serialize(), function(data, status){ if(data!=null){ for (var i = 0; i < data.length; i++) { times.push(data[i].timeStamp); speeds.push(data[i].speed); } //之前option中l(wèi)egend和 XAxis的data,series 為空,所以現(xiàn)在將數(shù)據(jù)填充進去 myChart.setOption({ //加載數(shù)據(jù)圖表 legend: { data:[$("#roads").val()] }, xAxis: { data: times }, series: [{ // 根據(jù)名字對應(yīng)到相應(yīng)的系列 name: $("#roads").val(), type:'line', data: speeds }] }); } layer.open({ title:'折線圖', type: 1, shade: false, area: ['620px', '460px'], shadeClose: true, //點擊遮罩關(guān)閉 content: $("#speedChart") }); },"json"); }); });
以上是“Layer+Echarts如何構(gòu)建彈出層折線圖”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。