Echarts.js实现水滴球和海洋效果
更新时间：2022年04月25日 16:12:11 作者：農碼一生
这篇文章介绍了Echarts.js实现水滴球和海洋效果的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
一、水滴球
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
<script src="echarts-liquidfill.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
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
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 定时器刷新数据及图形
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准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1920px;height:1080px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
series: [{
type: 'liquidFill',
data: [0.5, 0.4, 0.3, 0.2],
shape: 'container',
label:{
show:false
},
outline: {
show: false
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
JS文件
到此这篇关于Echarts.js实现水滴球和海洋效果的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript实现像雪花一样的Hexaflake分形，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
下面小编就为大家带来一篇关于js二维数组和多维数组的定义声明(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了ES6教程之for循环和Map,Set用法,结合实例形式分析了ECMAScript6中for循环和Map,Set基本概念、功能、使用方法与相关注意事项,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了JS实现的幻灯片切换显示效果,涉及javascript通过扩展实现针对页面元素的动态切换操作相关技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了JavaScript中的迭代器和生成器详解,本文讲解了迭代器、声明自定义迭代器、生成器：一种更好的方式来构建迭代器、生成器高级特性等内容,需要的朋友可以参考下2014-10-10
今天小编就为大家分享一篇layui动态加载多表头的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
我们需要引入几个相关的概念：执行环境栈、全局对象、执行环境、变量对象、活动对象、作用域和作用域链等，这些概念正是JS引擎工作的核心组件。这篇文章的目的不是孤立的为你讲解每一个概念需要的朋友可以参考下2016-11-11
这篇文章主要介绍了原生JS实现旋转轮播图+文字内容切换效果,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
JavaScript与Cookie之利用Cookie记录用户登录信息2009-12-12
其实不管是一般方法还是面向对象的方法都还有很多可以改进的地方，有需要的先将就着用吧2012-08-08
最新评论