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

zl程序教程

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

当前栏目

103Echarts - K线图（Large Scale Candlestick）

large scale 线图
2023-09-11 14:15:43 时间

效果图

在这里插入图片描述

源代码

<!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 upColor = '#ec0000';
			var upBorderColor = '#8A0000';
			var downColor = '#00da3c';
			var downBorderColor = '#008F28';

			var dataCount = 2e5;
			var data = generateOHLC(dataCount);

			var option = {
				dataset: {
					source: data
				},
				title: {
					text: 'Data Amount: ' + echarts.format.addCommas(dataCount)
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'line'
					}
				},
				toolbox: {
					feature: {
						dataZoom: {
							yAxisIndex: false
						},
					}
				},
				grid: [{
						left: '10%',
						right: '10%',
						bottom: 200
					},
					{
						left: '10%',
						right: '10%',
						height: 80,
						bottom: 80
					}
				],
				xAxis: [{
						type: 'category',
						scale: true,
						boundaryGap: false,
						// inverse: true,
						axisLine: {
							onZero: false
						},
						splitLine: {
							show: false
						},
						splitNumber: 20,
						min: 'dataMin',
						max: 'dataMax'
					},
					{
						type: 'category',
						gridIndex: 1,
						scale: true,
						boundaryGap: false,
						axisLine: {
							onZero: false
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false
						},
						splitNumber: 20,
						min: 'dataMin',
						max: 'dataMax'
					}
				],
				yAxis: [{
						scale: true,
						splitArea: {
							show: true
						}
					},
					{
						scale: true,
						gridIndex: 1,
						splitNumber: 2,
						axisLabel: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						}
					}
				],
				dataZoom: [{
						type: 'inside',
						xAxisIndex: [0, 1],
						start: 10,
						end: 100
					},
					{
						show: true,
						xAxisIndex: [0, 1],
						type: 'slider',
						bottom: 10,
						start: 10,
						end: 100,
						handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
						handleSize: '105%'
					}
				],
				visualMap: {
					show: false,
					seriesIndex: 1,
					dimension: 6,
					pieces: [{
						value: 1,
						color: upColor
					}, {
						value: -1,
						color: downColor
					}]
				},
				series: [{
						type: 'candlestick',
						itemStyle: {
							color: upColor,
							color0: downColor,
							borderColor: upBorderColor,
							borderColor0: downBorderColor
						},
						encode: {
							x: 0,
							y: [1, 4, 3, 2]
						}
					},
					{
						name: 'Volumn',
						type: 'bar',
						xAxisIndex: 1,
						yAxisIndex: 1,
						itemStyle: {
							color: '#7fbe9e'
						},
						large: true,
						encode: {
							x: 0,
							y: 5
						}
					}
				]
			};

			function generateOHLC(count) {
				var data = [];

				var xValue = +new Date(2011, 0, 1);
				var minute = 60 * 1000;
				var baseValue = Math.random() * 12000;
				var boxVals = new Array(4);
				var dayRange = 12;

				for(var i = 0; i < count; i++) {
					baseValue = baseValue + Math.random() * 20 - 10;

					for(var j = 0; j < 4; j++) {
						boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
					}
					boxVals.sort();

					var idxRandom = Math.random();
					var openIdx = Math.round(Math.random() * 3);
					var closeIdx = Math.round(Math.random() * 2);
					if(closeIdx === openIdx) {
						closeIdx++;
					}
					var volumn = boxVals[3] * (1000 + Math.random() * 500);

					// ['open', 'close', 'lowest', 'highest', 'volumn']
					// [1, 4, 3, 2]
					data[i] = [
						echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', xValue += minute), +boxVals[openIdx].toFixed(2), // open
						+boxVals[3].toFixed(2), // highest
						+boxVals[0].toFixed(2), // lowest
						+boxVals[closeIdx].toFixed(2), // close
						volumn.toFixed(0),
						getSign(data, i, +boxVals[openIdx], +boxVals[closeIdx], 4) // sign
					];
				}

				return data;

				function getSign(data, dataIndex, openVal, closeVal, closeDimIdx) {
					var sign;
					if(openVal > closeVal) {
						sign = -1;
					} else if(openVal < closeVal) {
						sign = 1;
					} else {
						sign = dataIndex > 0
							// If close === open, compare with close of last record
							?
							(data[dataIndex - 1][closeDimIdx] <= closeVal ? 1 : -1)
							// No record of previous, set to be positive
							:
							1;
					}

					return sign;
				}
			}

			myChart.setOption(option);
		</script>
	</body>

</html>

相关文章