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实现水滴球和海洋效果的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript实现鼠标悬浮页面切换效果

    JavaScript实现鼠标悬浮页面切换效果

    本文实例为大家分享了JavaScript实现鼠标悬浮页面切换效果的具体代码,供大家参考,具体内容如下 前几天做了个常见的页面悬浮效果,直接上图. html代码 <!DOCTYPE html> <html>     <head>         <link rel="stylesheet" type="text/css" href="css/4.css" />         <script t

  • JS旋转实现转盘抽奖效果

    JS旋转实现转盘抽奖效果

    本文实例为大家分享了JS旋转实现转盘抽奖效果的具体代码,供大家参考,具体内容如下 闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下面的源码:(注意,这里JQ文档没有贴出来,需要自行引入) HTML文件: <!DOCTYPE html> <html>     <head>         <meta charset=

  • javascript实现悬浮跟随框缓动效果

    javascript实现悬浮跟随框缓动效果

    悬浮跟随框是我们在网页中经常见到的效果,我们还是使用上一实例中的运动框架去实现. 1.定义一个运动函数,当触发时调用,并且传递一个目标位置作为参数2.运动函数内部,调用定时函数,在定时函数内部,先求出元素位置与目标位置的距离差,然后除以一个数值作为速度(由于距离差一直在缩小,所以速度值也一直在变小,从而达到缓动效果)3.由于网页上位置设置最小单位是1px,所以在步骤二中的运算可能会出现小数的情况,我们需要对小数进行处理,否则元素到达的位置总是和目标位置有1px的差距. <!DOCTYPE HTM

  • 原生js实现旋转木马效果

    本文实例为大家分享了js实现旋转木马效果的具体代码,供大家参考,具体内容如下 html部分 <div class="wrap" id="wrap">     <div class="slide" id="slide">         <ul>             <li><a href=""><img src="images/

  • JS实现右侧悬浮框效果

    JS实现右侧悬浮框效果

    本文实例为大家分享了JS实现右侧悬浮框效果的具体代码,供大家参考,具体内容如下 让一个div始终悬浮在右下角 <!DOCTYPE html> <html lang="en"> <head>         <meta charset="UTF-8">         <title>Document</title>     <style>             #div1{    

  • 原生js实现波浪导航效果

    原生js实现波浪导航效果

    本文实例为大家分享了原生js实现波浪导航效果的具体代码,供大家参考,具体内容如下 展示效果: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js波浪导航</title> <style>  * {undefined     margin:0;     padding:0;     font-family:"微软

  • JavaScript实现外溢动态爱心的效果的示例代码

    JavaScript实现外溢动态爱心的效果的示例代码

    还在为节日送女朋友什么礼物而烦恼吗?最近用JavaScript制作了一个外溢动态爱心的效果,还可以在爱心上填写你想要的文字!快学习一下给自己女朋友也diy一个吧 效果演示 源码介绍 ( function() { var b=0; var c=["ms","moz","webkit","o"]; for(var a=0;a<c.length&&!window.requestAnimationFrame;++

  • js实现鼠标悬浮框效果

    js实现鼠标悬浮框效果

    本文实例为大家分享了js实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">    

  • threejs太阳光与阴影效果实例代码

    threejs太阳光与阴影效果实例代码

    目录 前言 灯光与材质基础篇 太阳光 整体调用代码 太阳光类 初始化 设置平行光信息 Tween 总结 前言 这篇文章实现智慧城市中模拟太阳光随时间变化产生对应场景效果.为了场景能够更逼真,我们一般会通过对接天气以及阳光等各种环境因素同步到场景中,使得场景能够更贴近现实.比如一些常见的天气系统,下雨.下雪.阴天.雾霾等,我之后会独立一篇文章中提现.这边文章主要介绍一系列灯光,主要是平行光对于太阳的模仿,以及一些材质的问题~ 灯光与材质基础篇 常见的灯光: - 点光源 (点光源可以理解为一个同时向

  • JavaScript实现页面无缝滚动效果

    目前我只使用两种方式,如果还有其他方式,希望推荐一下. 1.js+transform使用定时器动态增加大小,再把值赋给 transform,实现位置偏移,来实现无缝滚动. html一定要循环两遍数据,这样的话,会出现两个一样的数据,在一个数据消失后,不会使页面空白,而这时transform归0,有从头开始,因为两个数据相同,归0后视觉上就像无缝滚动. <div style="height: 100%" @mouseenter="moveStar()" @mou

随机推荐