Echarts画股票K线图,具体实操.

为什么80%的码农都做不了架构师？>>>   

1.首先我们先去下载Echart源码,http://echarts.baidu.com/download.html ,下载这个完整版,完整版其实比个人定制版本的更小,也不会出错..

2.找到一个demo,然后把源码copy下来 http://gallery.echartsjs.com/editor.html?c=xrk5n1pB0b

3.根据实际情况修改copy下来的代码

,

可以分明看出这就是json字符串,我们将从接口获取的数据处理成这种格式后,传递到html中基本上就可以了.

下面直接上源码.

//我们在这里定义一个ID为kline_1 的div,用于加载k线图
<div title="k线图" style="width: 888px;height: 300px;border: 1px solid #E0E0E0;" id="kline_1" class=""></div>
//引入echart.js 这里路径按照自己的路径进行修改..
<script src="__INDEX__/plugins/echart/echarts.min.js"></script>

//将copy过来的代码进行小部分修改就ok,具体修改过的有注释.
<script type="text/javascript">


		// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
        //此处的{$kline_json}是一个我后台处理传递过来的json字符串.测试的话可以暂时使用上文中demo地址中的json..


		var data0 = splitData({$kline_json});


		function splitData(rawData) {
			var categoryData = [];
			var values = []
			for (var i = 0; i < rawData.length; i++) {
				categoryData.push(rawData[i].splice(0, 1)[0]);
				values.push(rawData[i])
			}
			return {
				categoryData: categoryData,
				values: values
			};
		}

		function calculateMA(dayCount) {
			var result = [];
			for (var i = 0, len = data0.values.length; i < len; i++) {
				if (i < dayCount) {
					result.push('-');
					continue;
				}
				var sum = 0;
				for (var j = 0; j < dayCount; j++) {
					sum += data0.values[i - j][1];
				}
				result.push(sum / dayCount);
			}
			return result;
		}

		var option =  {
			title: {
				text: '上证指数',
				left: 0
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'line'
				}
			},
			legend: {
				data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
			},
			grid: {
				left: '10%',
				right: '10%',
				bottom: '15%'
			},
			xAxis: {
				type: 'category',
				data: data0.categoryData,
				scale: true,
				boundaryGap : false,
				axisLine: {onZero: false},
				splitLine: {show: false},
				splitNumber: 20,
				min: 'dataMin',
				max: 'dataMax'
			},
			yAxis: {
				scale: true,
				splitArea: {
					show: true
				}
			},
			dataZoom: [
				{
					type: 'inside',
					start: 50,
					end: 100
				},
				{
					show: true,
					type: 'slider',
					y: '90%',
					start: 50,
					end: 100
				}
			],
			series: [
				{
					name: '日K',
					type: 'candlestick',
					data: data0.values,
					markPoint: {
						label: {
							normal: {
								formatter: function (param) {
									return param != null ? Math.round(param.value) : '';
								}
							}
						},
						data: [
							{
								name: 'XX标点',
								coord: ['2013/5/31', 2300],
								value: 2300,
								itemStyle: {
									normal: {color: 'rgb(41,60,85)'}
								}
							},
							{
								name: 'highest value',
								type: 'max',
								valueDim: 'highest'
							},
							{
								name: 'lowest value',
								type: 'min',
								valueDim: 'lowest'
							},
							{
								name: 'average value on close',
								type: 'average',
								valueDim: 'close'
							}
						],
						tooltip: {
							formatter: function (param) {
								return param.name + '<br>' + (param.data.coord || '');
							}
						}
					},
					markLine: {
						symbol: ['none', 'none'],
						data: [
							// [
							//     {
							//         name: 'from lowest to highest',
							//         type: 'min',
							//         valueDim: 'lowest',
							//         symbol: 'circle',
							//         symbolSize: 10,
							//         label: {
							//             normal: {show: false},
							//             emphasis: {show: false}
							//         }
							//     },
							//     {
							//         type: 'max',
							//         valueDim: 'highest',
							//         symbol: 'circle',
							//         symbolSize: 10,
							//         label: {
							//             normal: {show: false},
							//             emphasis: {show: false}
							//         }
							//     }
							// ],
							{
								name: 'min line on close',
								type: 'min',
								valueDim: 'close'
							},
							{
								name: 'max line on close',
								type: 'max',
								valueDim: 'close'
							}
						]
					}
				},
				{
					name: 'MA5',
					type: 'line',
					data: calculateMA(5),
					smooth: true,
					lineStyle: {
						normal: {opacity: 0.5}
					}
				},
				{
					name: 'MA10',
					type: 'line',
					data: calculateMA(10),
					smooth: true,
					lineStyle: {
						normal: {opacity: 0.5}
					}
				},
				{
					name: 'MA20',
					type: 'line',
					data: calculateMA(20),
					smooth: true,
					lineStyle: {
						normal: {opacity: 0.5}
					}
				},
				{
					name: 'MA30',
					type: 'line',
					data: calculateMA(30),
					smooth: true,
					lineStyle: {
						normal: {opacity: 0.5}
					}
				},

			]
		};

		//初始化echarts实例(这里的kline_1要根据自己的div的id进行修改.)
		var myChart = echarts.init(document.getElementById('kline_1'));
		//使用制定的配置项和数据显示图表
		myChart.setOption(option);






	</script>

 

 

 

转载于:https://my.oschina.net/laobia/blog/1559138