js echarts波浪百分比图表特效代码下载


js echarts波浪百分比图表特效代码下载
js echarts波浪百分比图表特效代码下载以及echarts、波浪百分比图表等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts-liquidfill.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts-liquidfill.min.js"></script>

2. HTML代码

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>.
<script type="text/javascript">
	var value = 0.3;
	var data = [value, value, value, ];
	var dom = document.getElementById("container");
	// dom.style.height=window.innerHeight+'px';
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	option = {
		 backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
			offset: 0,
			color: '#431ab8'
		}, {
			offset: 1,
			color: '#471bba'
		}]),
		 title: {
			 text: (value * 100).toFixed(0) + '{a|%}',
			 textStyle: {
				 fontSize: 50,
				 fontFamily: 'Microsoft Yahei',
				 fontWeight: 'normal',
				 color: '#bcb8fb',
				 rich: {
					 a: {
						 fontSize: 28,
					 }
				 }
			 },
			 x: 'center',
			 y: '35%'
		 },
		 graphic: [{
			 type: 'group',
			 left: 'center',
			 top: '60%',
			 children: [{
				 type: 'text',
				 z: 100,
				 left: '10',
				 top: 'middle',
				 style: {
					 fill: '#aab2fa',
					 text: '流量统计',
					 font: '20px Microsoft YaHei'
				 }
			 }]
		 }],
		 series: [{
			 type: 'liquidFill',
			 radius: '80%',
			 center: ['50%', '50%'],
			 //  shape: 'roundRect',
			 data: data,
			 backgroundStyle: {
				 color: {
					 type: 'linear',
					 x: 1,
					 y: 0,
					 x2: 0.5,
					 y2: 1,
					 colorStops: [{
						 offset: 1,
						 color: 'rgba(68, 145, 253, 0)'
					 }, {
						 offset: 0.5,
						 color: 'rgba(68, 145, 253, .25)'
					 }, {
						 offset: 0,
						 color: 'rgba(68, 145, 253, 1)'
					 }],
					 globalCoord: false
				 },
			 },
			 outline: {
				 borderDistance: 0,
				 itemStyle: {
					 borderWidth: 20,
					 borderColor: {
						 type: 'linear',
						 x: 0,
						 y: 0,
						 x2: 0,
						 y2: 1,
						 colorStops: [{
							 offset: 0,
							 color: 'rgba(69, 73, 240, 0)'
						 }, {
							 offset: 0.5,
							 color: 'rgba(69, 73, 240, .25)'
						 }, {
							 offset: 1,
							 color: 'rgba(69, 73, 240, 1)'
						 }],
						 globalCoord: false
					 },
					 shadowBlur: 10,
					 shadowColor: '#000',
				 }
			 },
			 color: {
				 type: 'linear',
				 x: 0,
				 y: 0,
				 x2: 0,
				 y2: 1,
				 colorStops: [{
					 offset: 1,
					 color: 'rgba(58, 71, 212, 0)'
				 }, {
					 offset: 0.5,
					 color: 'rgba(31, 222, 225, .2)'
				 }, {
					 offset: 0,
					 color: 'rgba(31, 222, 225, 1)'
				 }],
				 globalCoord: false
			 },
			 label: {
				 normal: {
					 formatter: '',
				 }
			 }
		 }, ]
	 };
	if (option && typeof option === "object") {
		myChart.setOption(option, true);
	}
	window.onresize = function(){
		myChart.resize();
	}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

相关推荐

发表评论

相关文章