Echarts.js實(shí)現(xiàn)水滴球和海洋效果
更新時(shí)間:2022年04月25日 16:12:11 作者:農(nóng)碼一生
這篇文章介紹了Echarts.js實(shí)現(xiàn)水滴球和海洋效果的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
一、水滴球
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> <script src="echarts-liquidfill.js"></script> </head> <body> <!-- 為ECharts準(zhǔn)備一個(gè)具備大小(寬高)的Dom --> <div id="main" style="width: 800px;height:600px;"></div> <script type="text/javascript"> // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項(xiàng)和數(shù)據(jù) data = 0 var option = { title:{ text:'Echarts水球圖', left:'center', textStyle:{ fontSize: 24 } }, series: [{ type: 'liquidFill', data:[data/100, (data-2)/100, (data-4)/100], outline: { show: false } }] }; // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。 myChart.setOption(option); // 定時(shí)器刷新數(shù)據(jù)及圖形 var clk = window.setInterval("clkFunc()", 2000); function clkFunc(){ dataStep = 10; if (data < 100){ data = data + dataStep; option.series[0].data = [data/100, (data-5)/100, (data-10)/100]; //console.log(data); }else{ data = 0; option.series[0].data = [0, 0, 0]; //console.log(data); }; myChart.setOption(option); }; </script> </body> </html>
二、海洋
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> <script src="echarts-liquidfill.js"></script> </head> <body> <!-- 為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om --> <div id="main" style="width: 1920px;height:1080px;"></div> <script type="text/javascript"> // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項(xiàng)和數(shù)據(jù) option = { series: [{ type: 'liquidFill', data: [0.5, 0.4, 0.3, 0.2], shape: 'container', label:{ show:false }, outline: { show: false } }] }; // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。 myChart.setOption(option); </script> </body> </html>
JS文件
到此這篇關(guān)于Echarts.js實(shí)現(xiàn)水滴球和海洋效果的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形
這篇文章主要介紹了JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形,文中示例代碼非常詳細(xì),幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07關(guān)于js二維數(shù)組和多維數(shù)組的定義聲明(詳解)
下面小編就為大家?guī)硪黄P(guān)于js二維數(shù)組和多維數(shù)組的定義聲明(詳解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10layui動(dòng)態(tài)加載多表頭的實(shí)例
今天小編就為大家分享一篇layui動(dòng)態(tài)加載多表頭的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09原生JS實(shí)現(xiàn)旋轉(zhuǎn)輪播圖+文字內(nèi)容切換效果【附源碼】
這篇文章主要介紹了原生JS實(shí)現(xiàn)旋轉(zhuǎn)輪播圖+文字內(nèi)容切換效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09