Echarts.js實(shí)現(xiàn)水滴球和海洋效果
更新時(shí)間：2022年04月25日 16:12:11 作者：農(nóng)碼一生
這篇文章介紹了Echarts.js實(shí)現(xiàn)水滴球和海洋效果的方法，文中通過(guò)示例代碼介紹的非常詳細(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è)具備大?。▽捀撸┑腄om -->
<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)文章
BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格(DEMO詳解)
這篇文章主要介紹了BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格，表格封裝了3個(gè)版本，接下來(lái)通過(guò)本文給大家展示下樣式及代碼，對(duì)bootstrap增刪改查相關(guān)知識(shí)感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)炫酷的煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JS實(shí)現(xiàn)簡(jiǎn)單的tab切換選項(xiàng)卡效果
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的tab切換選項(xiàng)卡效果,涉及javascript結(jié)合鼠標(biāo)事件對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-09-09
微信小程序開發(fā)注意指南和優(yōu)化實(shí)踐(小結(jié))
這篇文章主要介紹了微信小程序開發(fā)注意指南和優(yōu)化實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
Javascrip實(shí)現(xiàn)文字跳動(dòng)特效
這篇文章主要介紹了Javascrip實(shí)現(xiàn)文字跳動(dòng)特效的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
詳解如何在Javascript中使用Object.freeze()
這篇文章主要介紹了詳解如何在Javascript中使用Object.freeze()，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)獲取元素寬高的方法分析
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)獲取元素寬高的方法,結(jié)合實(shí)例形式分析了微信小程序動(dòng)態(tài)獲取、設(shè)置元素寬高的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12
關(guān)于layui時(shí)間回顯問(wèn)題的解決方法
今天小編就為大家分享一篇關(guān)于layui時(shí)間回顯問(wèn)題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
fastadmin如何讓后臺(tái)的日期顯示成年月日格式(推薦)
FastAdmin是一款基于ThinkPHP5+Bootstrap的極速后臺(tái)開發(fā)框架,本文給大家介紹fastadmin的后臺(tái)時(shí)間戳字段如何顯示成年月日的日期格式,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要為大家詳細(xì)介紹了原生JS九宮格抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09