30Echarts - 柱狀圖（柱狀圖框選）

時間 2021-08-13

標籤 javascript html java git github markdown echarts dom ide code 欄目 JavaScript 简体版

原文原文鏈接

效果圖

源代碼

<!DOCTYPE html>
<html>

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

	<body>
		<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基於準備好的dom，初始化echarts實例
			var myChart = echarts.init(document.getElementById('main'));
			var option;

			var xAxisData = [];
			var data1 = [];
			var data2 = [];
			var data3 = [];
			var data4 = [];

			for(var i = 0; i < 10; i++) {
				xAxisData.push('Class' + i);
				data1.push((Math.random() * 2).toFixed(2));
				data2.push(-Math.random().toFixed(2));
				data3.push((Math.random() * 5).toFixed(2));
				data4.push((Math.random() + 0.3).toFixed(2));
			}

			var itemStyle = {
				normal: {},
				emphasis: {
					barBorderWidth: 1,
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowOffsetY: 0,
					shadowColor: 'rgba(0,0,0,0.5)'
				}
			};

			option = {
				backgroundColor: '#eee',
				legend: {
					data: ['bar', 'bar2', 'bar3', 'bar4'],
					align: 'left',
					left: 10
				},
				brush: {
					toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
					xAxisIndex: 0
				},
				toolbox: {
					feature: {
						magicType: {
							type: ['stack', 'tiled']
						},
						dataView: {}
					}
				},
				tooltip: {},
				xAxis: {
					data: xAxisData,
					name: 'X Axis',
					silent: false,
					axisLine: {
						onZero: true
					},
					splitLine: {
						show: false
					},
					splitArea: {
						show: false
					}
				},
				yAxis: {
					inverse: true,
					splitArea: {
						show: false
					}
				},
				grid: {
					left: 100
				},
				visualMap: {
					type: 'continuous',
					dimension: 1,
					text: ['High', 'Low'],
					inverse: true,
					itemHeight: 200,
					calculable: true,
					min: -2,
					max: 6,
					top: 60,
					left: 10,
					inRange: {
						colorLightness: [0.4, 0.8]
					},
					outOfRange: {
						color: '#bbb'
					},
					controller: {
						inRange: {
							color: '#2f4554'
						}
					}
				},
				series: [{
						name: 'bar',
						type: 'bar',
						stack: 'one',
						itemStyle: itemStyle,
						data: data1
					},
					{
						name: 'bar2',
						type: 'bar',
						stack: 'one',
						itemStyle: itemStyle,
						data: data2
					},
					{
						name: 'bar3',
						type: 'bar',
						stack: 'two',
						itemStyle: itemStyle,
						data: data3
					},
					{
						name: 'bar4',
						type: 'bar',
						stack: 'two',
						itemStyle: itemStyle,
						data: data4
					}
				]
			};

			myChart.on('brushSelected', renderBrushed);

			function renderBrushed(params) {
				var brushed = [];
				var brushComponent = params.batch[0];

				for(var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
					var rawIndices = brushComponent.selected[sIdx].dataIndex;
					brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
				}

				myChart.setOption({
					title: {
						backgroundColor: '#333',
						text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
						bottom: 0,
						right: 0,
						width: 100,
						textStyle: {
							fontSize: 12,
							color: '#fff'
						}
					}
				});
			}
			myChart.setOption(option);
		</script>
	</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。