echarts 正负条形图

<script>
			$(function() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));

				// 指定图表的配置项和数据
				option = {
					title: [
						{
							text: '正负条形图',
							left: 'center',
							top: 20,
							textStyle: {
								color: 'blue',
								//fontSize: '14',
							},
						}, 
						{
							text: '实验室',
							//borderColor: '#999',
							//borderWidth: 1,
							textStyle: {
								fontSize: 14
							},
							left: 'center',
							top: '88%'
						},
					],
					tooltip: {
						trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |'cross'
						}
					},
					legend: {
						data: ['利润', '支出', '收入'],
						//bottom: '0',
					},
					grid: {
						left: '10%',
						right: '10%',
						bottom: '15%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						axisTick: { //坐标轴刻度相关设置。
							show: false,
						},
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
//						axisLine: {
//							//show: true, //是否显示坐标轴轴线。
//							//onZero:false,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
//							//symbol:'arrow', //轴线两边的箭头
////							lineStyle: {
////								width: 2,
////								color: 'green',
////							},
//						},

					}],
					yAxis: [{
						type: 'value',
						name: 'Z值',
						nameLocation: 'center',
						nameGap: 40
					}],
					series: [
						{
							name: '利润',
							type: 'bar',
							label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
								normal: { //正常情况
									show: true, //是否显示标签
									position: 'inside', //标签的位置。
									distance: 5, //距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。default: 5
									rotate: 0, //标签旋转。从 -90 度到 90 度。正值是逆时针。
									
								}
							},
							data: [200, 170, 240, 244, 200, 220, 210]
						},
						{
							name: '收入',
							type: 'bar',
							stack: '总量', //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
							label: {
								normal: {
									show: true, //是否显示标签
									position: 'inside', //标签的位置。
								}
							},
							data: [320, 302, 342, 374, 390, 450, 420]
						},
						{
							name: '支出',
							type: 'bar',
							stack: '总量', 
							label: {
								normal: {//正常情况
									show: true, //是否显示标签
									position: 'inside'
								}
							},
							data: [-120, -132, -102, -134, -190, -230, -210]
						}
					]
				};

				//myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
				

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			});
		</script>