H5 echarts增量设备贯通率图表特效代码下载


H5 echarts增量设备贯通率图表特效代码下载
H5 echarts增量设备贯通率图表特效代码下载以及echarts、增量设备、贯通率图表等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/echarts.min.js"></script>
<script src="js/echarts.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 dom = document.getElementById("container");
	// dom.style.height=window.innerHeight+'px';
	var myChart = echarts.init(dom,"westeros");
	var app = {};
	option = null;
	// Generate data
	var category = ['市区','万州','江北','南岸','北碚','綦南','长寿','永川','璧山','江津','城口','大足','垫江','丰都','奉节','合川','江津区','开州','南川','彭水','黔江','石柱','铜梁','潼南','巫山','巫溪','武隆','秀山','酉阳','云阳','忠县','川东','检修'];
	var dottedBase = [];
	var lineData = [18092,20728,24045,28348,32808
					,36097,39867,44715,48444,50415
					,56061,62677,59521,67560,18092,20728,24045,28348,32808
					,36097,39867,44715,48444,50415,36097,39867,44715,48444,50415
					,50061,32677,49521,32808];
	var barData = [4600,5000,5500,6500,7500
					,8500,9900,12500,14000,21500
					,23200,24450,25250,33300,4600,5000,5500,6500,7500
					,8500,9900,22500,14000,21500,8500,9900,12500,14000,21500
					,23200,24450,25250,7500];
	var rateData = [];               
	32808
	for (var i = 0; i < 33; i++) {
		// var date = i+2001;
		// category.push(date)
		var rate=barData[i]/lineData[i];
		rateData[i] = rate.toFixed(2);
	}
	// option
	option = {
		backgroundColor: '#191E40',
		title: {
			text: '增量设备贯通情况-单位',
			x: 'center',
			y: 0,
			textStyle:{
				color:'#B4B4B4',
				fontSize:16,
				fontWeight:'normal',
			},
		},
		tooltip: {
			trigger: 'axis',
			backgroundColor:'rgba(255,255,255,0.1)',
			axisPointer: {
				type: 'shadow',
				label: {
					show: true,
					backgroundColor: '#7B7DDC'
				}
			}
		},
		legend: {
			data: ['已贯通', '计划贯通','贯通率',],
			textStyle: {
				color: '#B4B4B4'
			},
			top:'7%',
		},
		grid:{
			x:'12%',
			width:'82%',
			y:'12%',
		},
		xAxis: {
			data: category,
			axisLine: {
				lineStyle: {
					color: '#B4B4B4'
				}
			},
			axisTick:{
				show:false,
			},
		},
		yAxis: [{
			splitLine: {show: false},
			axisLine: {
				lineStyle: {
					color: '#B4B4B4',
				}
			},
			axisLabel:{
				formatter:'{value} ',
			}
		},
			{
			splitLine: {show: false},
			axisLine: {
				lineStyle: {
					color: '#B4B4B4',
				}
			},
			axisLabel:{
				formatter:'{value} ',
			}
		}],
		series: [{
			name: '贯通率',
			type: 'line',
			smooth: true,
			showAllSymbol: true,
			symbol: 'emptyCircle',
			symbolSize: 8,
			yAxisIndex: 1,
			itemStyle: {
					normal: {
					color:'#F02FC2'},
			},
			data: rateData
		}, 
		{
			name: '已贯通',
			type: 'bar',
			barWidth: 10,
			itemStyle: {
				normal: {
					barBorderRadius: 5,
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[
							{offset: 0, color: '#956FD4'},
							{offset: 1, color: '#3EACE5'}
						]
					)
				}
			},
			data: barData
		}, 
		{
			name: '计划贯通',
			type: 'bar',
			barGap: '-100%',
			barWidth: 10,
			itemStyle: {
				normal: {
					barBorderRadius: 5,
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[
							{offset: 0, color: 'rgba(156,107,211,0.5)'},
							{offset: 0.2, color: 'rgba(156,107,211,0.3)'},
							{offset: 1, color: 'rgba(156,107,211,0)'}
						]
					)
				}
			},
			z: -12,
			data: lineData
		}, 
	   ]
	};
		  var app = {
			currentIndex: -1,
		  };
		  setInterval(function () {
			var dataLen = option.series[0].data.length;
			// 取消之前高亮的图形
			myChart.dispatchAction({
			  type: 'downplay',
			  seriesIndex: 0,
			  dataIndex: app.currentIndex
			});
			app.currentIndex = (app.currentIndex + 1) % dataLen;
			//console.log(app.currentIndex);
			// 高亮当前图形
			myChart.dispatchAction({
			  type: 'highlight',
			  seriesIndex: 0,
			  dataIndex: app.currentIndex,
			});
			// 显示 tooltip
			myChart.dispatchAction({
			  type: 'showTip',
			  seriesIndex: 0,
			  dataIndex: app.currentIndex
			});
		  }, 3000);
	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>

相关推荐

发表评论

相关文章