提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

172Echarts - 象形柱图（Dotted bar）

bar
2023-09-11 14:15:41 时间

效果图

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="dist/extension/dataTool.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 1024px;height:768px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;
			// Generate data
			var category = [];
			var dottedBase = +new Date();
			var lineData = [];
			var barData = [];

			for(var i = 0; i < 20; i++) {
				var date = new Date(dottedBase += 3600 * 24 * 1000);
				category.push([
					date.getFullYear(),
					date.getMonth() + 1,
					date.getDate()
				].join('-'));
				var b = Math.random() * 200;
				var d = Math.random() * 200;
				barData.push(b)
				lineData.push(d + b);
			}

			// option
			option = {
				backgroundColor: '#0f375f',
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {
					data: ['line', 'bar'],
					textStyle: {
						color: '#ccc'
					}
				},
				xAxis: {
					data: category,
					axisLine: {
						lineStyle: {
							color: '#ccc'
						}
					}
				},
				yAxis: {
					splitLine: {
						show: false
					},
					axisLine: {
						lineStyle: {
							color: '#ccc'
						}
					}
				},
				series: [{
					name: 'line',
					type: 'line',
					smooth: true,
					showAllSymbol: true,
					symbol: 'emptyCircle',
					symbolSize: 15,
					data: lineData
				}, {
					name: 'bar',
					type: 'bar',
					barWidth: 10,
					itemStyle: {
						normal: {
							barBorderRadius: 5,
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1, [{
										offset: 0,
										color: '#14c8d4'
									},
									{
										offset: 1,
										color: '#43eec6'
									}
								]
							)
						}
					},
					data: barData
				}, {
					name: 'line',
					type: 'bar',
					barGap: '-100%',
					barWidth: 10,
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(20,200,212,0.5)'
									},
									{
										offset: 0.2,
										color: 'rgba(20,200,212,0.2)'
									},
									{
										offset: 1,
										color: 'rgba(20,200,212,0)'
									}
								]
							)
						}
					},
					z: -12,
					data: lineData
				}, {
					name: 'dotted',
					type: 'pictorialBar',
					symbol: 'rect',
					itemStyle: {
						normal: {
							color: '#0f375f'
						}
					},
					symbolRepeat: true,
					symbolSize: [12, 4],
					symbolMargin: 1,
					z: -10,
					data: lineData
				}]
			};
			myChart.setOption(option);
		</script>
	</body>

</html>

相关文章