echarts splitLine lineStyle

spencer_tseng

已于 2024-01-10 09:12:14 修改

阅读量490

点赞数 7

分类专栏： echarts.js 文章标签： echarts

于 2024-01-01 22:03:09 首次发布

本文链接：https://blog.csdn.net/spencer_tseng/article/details/135329728

版权

echarts.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Examples - Apache ECharts

					splitLine :
					{
						show : true
					},
					lineStyle : 
					{
						type : 'dashed',
						color : '#5555555'
					}

echarts_03_bar_01.html

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%; background: white;"></div>
	<script type="text/javascript" src="echarts.min.js"></script>
	<script type="text/javascript">
		/*-------------------------- +
		 http://127.0.0.1:8089/PrjJsp/echarts/echarts_03_bar_01.html
		+-------------------------- */
		function randomInt(min, max)
		{
			return min + Math.floor(Math.random() * (max - min + 1));
		}
		var arrData = [];
		for (var i = 0; i < 12; i++)
		{
			arrData.push(randomInt(0, 100));
		}
	
		//
		var dom = document.getElementById("container");
		var myChart1 = echarts.init(dom);
		option =
		{
			grid: {
// 		        show: false,                //是否显示图表背景网格    
// 		        left: '0%',                //图表距离容器左侧多少距离
// 		        right: '40%',              //图表距离容器右侧侧多少距离
// 		        bottom: '3%',              //图表距离容器上面多少距离
// 		        top: 100,                  //图表距离容器下面多少距离
// 		        containLabel: true,        //防止标签溢出  
// 		        backgroundColor:'#555555', //网格背景色，默认透明
		    },
			title :
			{
				text : '某地区降水量',
				subtext : '纯属虚构'
			},
			tooltip :
			{
// 				trigger : 'axis'
			},
			xAxis :
			[
				{
					type : 'category',
					data :
					[
						'1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
					],
					splitLine :
					{
						show : true
					},
					axisTick :
					{
// 						alignWithLabel : true
					},
					lineStyle : 
					{
						type : 'dashed',
						color : '#5555555'
					}
				}
			],
			yAxis :
			[
				{
					type : 'value',
					splitLine :
					{
						show : true
					},
					splitArea :
					{
						show : true,
					},
					lineStyle : 
					{
						type : 'dashed',
						color : '#5555555'
					}
				}
			],
			series :
			[
				{
					name : '降水量',
					type : 'bar',
					label :
					{
						normal :
						{
							show : true,
							position : 'top'
						}
					},
					itemStyle :
					{
						normal :
						{
							// 定制显示（按顺序）
							color : function(params)
							{
								var colorList =
								[
									'#C33531', '#EFE42A', '#64BD3D', '#EE9201', '#29AAE3', '#B74AE5', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3 ', '#F9E79F', '#BA4A00', '#ECF0F1',
									'#616A6B', '#EAF2F8', '#4A235A', '#3498DB'
								];
								
								return colorList[params.dataIndex]
							},
					
							// 随机显示
							color : function(d)
							{
								return "#" + Math.floor(Math.random() * (256*256*256-1)).toString(16);
							}
						},
					},
					data :
					[
						32.6, 25.9, 39.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 58.8, 16.0, 32.3
					],
					data : arrData
				}
			]
		};

		if (option && typeof option === "object")
		{
			myChart1.setOption(option, true);
		}
	</script>
</body>
</html>