JS 3D渐变柱状图表特效代码下载


JS 3D渐变柱状图表特效代码下载
JS 3D渐变柱状图表特效代码下载以及3D渐变、柱状图表等js/jquery网页特效代码下载。

1. 引入JS

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

2. HTML代码

<!DOCTYPE html>
<meta charset="utf-8">
<html style="height: 100%">
<head>
<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");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	option = {
		backgroundColor: '#0E2A43',
		tooltip: {
			show: true,
			formatter: "{b}:{c}"
			},
	grid: {
			left: '5%',
			top: '12%',
			right: '1%',
			bottom: '8%',
			containLabel: true
			},
		xAxis: {
				type: 'category',
				axisTick: {
					show: false,
					alignWithLabel: false,
					length: 5,
				},
				"splitLine": { //网格线
					"show": false
				},
				inverse: 'true', //排序
				axisLine: {
					show: false,
					lineStyle: {
						color: '#fff',
					}
				},
				data: ['first', 'two', 'three', 'four']
			},
		yAxis: [{
			type: 'value',
			show:false,
			position: 'top',
			axisTick: {
				show: false
			},
			axisLine: {
				show: false,
				lineStyle: {
					color: '#fff',
				}
			},
			splitLine: {
				show: false
			},
		}],
		series: [{
				name: '能耗值',
				type: 'bar',
				label: {
					normal: {
						show: true,
						position: 'top',
						formatter: '{c}',
						textStyle: {
							color: 'white' //color of value
						}
					}
				},
				itemStyle: {
					//通常情况下:
					normal: {
						barBorderRadius: 8,
						//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
						color: function (params) {
							var colorList = [
								['#b250ff', 'rgba(11,42,84,.3)'],
								['#ff9717', 'rgba(11,42,84,.3)'],
								['#61dbe8', 'rgba(11,42,84,.3)'],
								['#1ace4a', 'rgba(11,42,84, 0.3)'],
							];
							var index = params.dataIndex;
							if (params.dataIndex >= colorList.length) {
								index = params.dataIndex - colorList.length;
							}
							return new echarts.graphic.LinearGradient(0, 0, 0, 1,
								[{
										offset: 0,
										color: colorList[index][0]
									},
									{
										offset: 1,
										color: colorList[index][1]
									}
								]);
						},
					},
				},
				barGap: '0%',
				barCategoryGap: '50%',
				data: [60, 132, 89, 134]
			}]
	};           
	if (option && typeof option === "object") {
		myChart.setOption(option, true);
	}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

相关推荐

发表评论

相关文章