echarts改变颜色_echarts 树顶部对齐-优快云博客

#一：柱状图改变颜色
图片.png

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--   柱状统计图 -->
		<div class="row">
			<div id="main" style="width: 900px; height: 350px;  margin-top:80px;"></div>
		</div>
	</body>
	<script src="../../js/echarts/echarts.min.js" type="text/javascript"></script>
	<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
		myChart.setOption({
			title: {
				text: '平均耗时（分钟）',

			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				/*  data: [ '2012年']*/
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: ['SA服务', '洗车', '总检', '喷漆', '钣金', '机修', '等号']
			},
			series: [{
					name: '2012年',
					type: 'bar',
					itemStyle: {
						normal: {
							color: '#a8bcd4'
						}
					},
					data: [10, 20, 31, 14, 11, 67]
				}
			]
		});
	</script>

</html>

#二：横向柱状图渐变

图片.png

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--   柱状统计图 -->
		<div class="row">
			<div id="main" style="width: 900px; height: 350px;  margin-top:80px;"></div>
		</div>
	</body>
	<script src="../../js/echarts/echarts.min.js" type="text/javascript"></script>
	<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
		myChart.setOption({
			title: {
				text: '平均耗时（分钟）',

			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				/*  data: [ '2012年']*/
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: ['SA服务', '洗车', '总检', '喷漆', '钣金', '机修', '等号']
			},
			series: [{
					name: '2012年',
					type: 'bar',
					 itemStyle: {
                normal: {
                   
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#fff'
                    }, {
                        offset: 1,
                        color: '#3fa7dc'
                    }]),
                    
                }
            },
					data: [10, 20, 31, 14, 11, 67]
				}
			]
		});
	</script>

</html>