您好,欢迎访问本站博客! 控制台  查看权限
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 网站所有资源均来自网络,如有侵权请联系站长删除!

Echarts X/Y轴 分组后再进行分组

默认分类 Sena 2019-11-29 14 次浏览 0个评论

image.png


	// 净资产收益率
	me.initEcharts3 = function() {
		$("#status_info", tabControlRight.$body)
				.append(
						[ "<div style='height:100%;width:auto'>"
								+ '<table class="gridtable">'
								+ '<tr>'
								+ '	<th colspan=13>净资产收益率(%)</th>'
								+ '</tr>'
								+ '<tr>'
								+ '	<td rowspan=3>区域</td><td colspan=3>国网</td><td colspan=3>唯捷城配</td><td colspan=3>快狗速运</td><td colspan=3>驹马配送</td>'
								+ '</tr>'
								+ '<tr>'
								+ '	<td rowspan=2>最近第一年</td><td rowspan=2>最近第二年</td><td rowspan=2>最近第三年</td><td rowspan=2>最近第一年</td><td rowspan=2>最近第二年</td><td rowspan=2>最近第三年</td><td rowspan=2>最近第一年</td><td rowspan=2>最近第二年</td><td rowspan=2>最近第三年</td><td rowspan=2>最近第一年</td><td rowspan=2>最近第二年</td><td rowspan=2>最近第三年</td>'
								+ '</tr>' + '<tr>' + '</tr>' + '<tr>'
								+ '	<td>武侯</td><td>10</td><td>9</td><td>8</td><td>2</td><td>1</td><td>1</td><td>2</td><td>1</td><td>1</td><td>2</td><td>1</td><td>1</td>' + '</tr>' + '<tr>'
								+ '	<td>锦江</td><td>10</td><td>9</td><td>8</td><td>2</td><td>1</td><td>1</td><td>2</td><td>1</td><td>1</td><td>2</td><td>1</td><td>1</td>' + '</tr></div>' ].join(""));
		$("#status_info", tabControlRight.$body).append([ "<div style='height:100%;width:auto' id='echarts3'></div>" ].join(""));
		var myChart = echarts.init(document.getElementById('echarts3'), 'light');
		myChart.setOption(option = {
			title : {
				text : '净资产收益率(%)',
				x : 'center'
			},
			color : [ '#3e6591', '#eb7d22', '#d73f45' ],
			tooltip : {
				trigger : 'axis',
				axisPointer : { // 坐标轴指示器,坐标轴触发有效
					type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
				}
			},
			grid : {
				left : 250
			},
			xAxis : {
				axisLine : {
					lineStyle : {
						color : '#ccc'
					}
				},
				axisLabel : {
					textStyle : {
						color : '#777'
					}
				}
			},
			yAxis : [ {
				type : 'category',
				inverse : true,
				splitLine : {
					show : true
				},
				axisTick : {
					length : 100,
					lineStyle : {
						color : '#ccc'
					}
				},
				data : [ '最近第1年', '最近第2年', '最近第3年', '最近第1年', '最近第2年', '最近第3年', '最近第1年', '最近第2年', '最近第3年', '最近第1年', '最近第2年', '最近第3年' ]
			}, {
				nameLocation : 'start',
				nameTextStyle : {
					fontWeight : 'bold'
				},
				position : 'left',
				offset : 220,
				axisLine : {
					onZero : false,
					show : false
				},
				axisTick : {
					length : 100,
					inside : true,
					lineStyle : {
						color : '#ccc'
					}
				},
				axisLabel : {
					inside : true
				},
				inverse : true,
				data : [ '国网', '唯捷城配', '快狗速运', '驹马配送' ]
			} ],
			series : [ {
				name : "武侯",
				type : 'bar',
				data : [ 10, 9, 8, 2, 1, 1, 2, 1, 1, 2, 1, 1 ],
				label : {
					normal : {
						show : true,
						position : 'right',
						textStyle : {
							color : '#008000'
						}
					}
				}
			}, {
				name : "锦江",
				type : 'bar',
				data : [ 10, 9, 8, 2, 1, 1, 2, 1, 1, 2, 1, 1 ],
				label : {
					normal : {
						show : true,
						position : 'right',
						textStyle : {
							color : '#FFA500'
						}
					}
				}
			} ]
		});
	}


已有 14 位网友参与,快来吐槽:

发表评论