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.min.js
echarts-liquidfill.js
到此这篇关于Echarts.js实现水滴球和海洋效果的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生js实现旋转木马效果
本文实例为大家分享了js实现旋转木马效果的具体代码,供大家参考,具体内容如下 html部分 <div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href=""><img src="images/
-
JS旋转实现转盘抽奖效果
本文实例为大家分享了JS旋转实现转盘抽奖效果的具体代码,供大家参考,具体内容如下 闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下面的源码:(注意,这里JQ文档没有贴出来,需要自行引入) HTML文件: <!DOCTYPE html> <html> <head> <meta charset=
-
JavaScript实现鼠标悬浮页面切换效果
本文实例为大家分享了JavaScript实现鼠标悬浮页面切换效果的具体代码,供大家参考,具体内容如下 前几天做了个常见的页面悬浮效果,直接上图. html代码 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/4.css" /> <script t
-
javascript实现悬浮跟随框缓动效果
悬浮跟随框是我们在网页中经常见到的效果,我们还是使用上一实例中的运动框架去实现. 1.定义一个运动函数,当触发时调用,并且传递一个目标位置作为参数2.运动函数内部,调用定时函数,在定时函数内部,先求出元素位置与目标位置的距离差,然后除以一个数值作为速度(由于距离差一直在缩小,所以速度值也一直在变小,从而达到缓动效果)3.由于网页上位置设置最小单位是1px,所以在步骤二中的运算可能会出现小数的情况,我们需要对小数进行处理,否则元素到达的位置总是和目标位置有1px的差距. <!DOCTYPE HTM
-
JavaScript实现外溢动态爱心的效果的示例代码
还在为节日送女朋友什么礼物而烦恼吗?最近用JavaScript制作了一个外溢动态爱心的效果,还可以在爱心上填写你想要的文字!快学习一下给自己女朋友也diy一个吧 效果演示 源码介绍 ( function() { var b=0; var c=["ms","moz","webkit","o"]; for(var a=0;a<c.length&&!window.requestAnimationFrame;++
-
JavaScript实现页面无缝滚动效果
目前我只使用两种方式,如果还有其他方式,希望推荐一下. 1.js+transform使用定时器动态增加大小,再把值赋给 transform,实现位置偏移,来实现无缝滚动. html一定要循环两遍数据,这样的话,会出现两个一样的数据,在一个数据消失后,不会使页面空白,而这时transform归0,有从头开始,因为两个数据相同,归0后视觉上就像无缝滚动. <div style="height: 100%" @mouseenter="moveStar()" @mou
-
threejs太阳光与阴影效果实例代码
目录 前言 灯光与材质基础篇 太阳光 整体调用代码 太阳光类 初始化 设置平行光信息 Tween 总结 前言 这篇文章实现智慧城市中模拟太阳光随时间变化产生对应场景效果.为了场景能够更逼真,我们一般会通过对接天气以及阳光等各种环境因素同步到场景中,使得场景能够更贴近现实.比如一些常见的天气系统,下雨.下雪.阴天.雾霾等,我之后会独立一篇文章中提现.这边文章主要介绍一系列灯光,主要是平行光对于太阳的模仿,以及一些材质的问题~ 灯光与材质基础篇 常见的灯光: - 点光源 (点光源可以理解为一个同时向
-
JS实现右侧悬浮框效果
本文实例为大家分享了JS实现右侧悬浮框效果的具体代码,供大家参考,具体内容如下 让一个div始终悬浮在右下角 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{
-
原生js实现波浪导航效果
本文实例为大家分享了原生js实现波浪导航效果的具体代码,供大家参考,具体内容如下 展示效果: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js波浪导航</title> <style> * {undefined margin:0; padding:0; font-family:"微软
-
js实现鼠标悬浮框效果
本文实例为大家分享了js实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">