通过新浪股票接口 实现 Echarts K线图

股票行情K线图的效果 

找到一个好的接口很重要~~(之前自己搜罗的一个接口查回来的数据 JSON  key不带引号 恶心的一匹 然后 数据也不是很好用，直接舍弃)

股票行情图接口-日K历史数据

请求

（1）url:{domainname}/stock/stockInformation/getBussinessLabelPoint   

POST

     Content-Type: application/json

        head:  key: headParam     value : {"device_no":"ios","devcie_name":"ios","token":"123","phone":"15202146557"}

（2）请求参数:

字段名	类型	说明
code	String	股票编号

（3）请求body:

  {

"code":"600519"

  }

2.返回

（1）返回参数

字段名	类型	说明
status	String	返回接口状态
msg	String	返回接口信息
errorMsg	String	返回接口错误信息
success	boolean	返回接口是否成功
result	List<Object[]>	[日期,昨收,开盘,当日最高,当日最低,当前价,成交量,成交额，买卖点]

（2）返回body:

{

    "status": "200",

    "msg": "操作成功",

    "errorMsg": "",

    "result": [

        [

            "20180622",

            "759.32",

            "754.0",

            "767.0",

            "750.0",

            "767.0",

            "28854.0",

            "0",

            "0"

        ],

        [

            "20160104",

            "",

            "207.277",

            "207.277",

            "199.661",

            "200.0",

            "17349.0",

            "0",

            "0"

        ]

    ],

    "success": true

}

备注：{domainname}：https://www.desmart.com.cn:8443

请求之前可以先用Postman等类似的工具测试一下接口是否可以返回正确的数据。

将Body和Headers中的参数设置好，数据成功返回。

本来想在前端访问，但是因为ajax 存在跨越问题，不知道数据如何在前端拿过来，就在后端进行请求获得数据。

我这里用的是httpclent也可以用别的方式只要请求返回正确的数据就好。

import java.io.IOException;
import java.nio.charset.Charset;

import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.google.protobuf.TextFormat.ParseException;

@Controller
@RequestMapping("stockMarket")
public class stockMarketController {
	
	@RequestMapping(value="getdata")
	@ResponseBody
	public JSONArray resultData() throws ParseException, IOException {
		String body = doPostMethod();
		JSONObject jsonObject = JSONObject.parseObject(body);
		JSONArray jsonArray = jsonObject.getJSONArray("result");
		System.out.println(jsonArray);
		
		JSONArray jsonArray2 = new JSONArray();
		//从数据中截取
		for(int i=0;i<200;i++) {
			//遍历jsonArray数组,把每个对象转成josn对象
			JSONArray jar = jsonArray.getJSONArray(i);
			jsonArray2.add(jar);
		}
		System.out.println("jsonArray2"+jsonArray2);
		
		//对数据进行逆向排序
		JSONArray newJsonArray = new JSONArray();
		for(int i = jsonArray2.size()-1;i>=0;i--) {
			JSONArray jar2 = jsonArray2.getJSONArray(i);
			newJsonArray.add(jar2);
		}
		
		return newJsonArray;
	}
	/**
	 * httpClient post 请求 
	 * @return
	 */
	public String doPostMethod() {
		String url = "https://www.desmart.com.cn:8443/stock/stockInformation/getBussinessLabelPoint";
		String param = "{\"code\":\"sh600000\"}";
                //创建client和post对象
		HttpClient client = HttpClients.createDefault();
		HttpPost post = new HttpPost(url);
		//json形式 headers参数
		post.addHeader("Content-Type", "application/json");
		post.addHeader("headParam","{\"device_no\":\"ios\",\"devcie_name\":\"ios\",\"token\":\"123\",\"phone\":\"15202146557\"}");
		//json字符串以实体的实行放到post中
		//body参数
		post.setEntity(new StringEntity(param,Charset.forName("utf-8")));
		HttpResponse response = null;
		try {
            //获得response对象
			response = client.execute(post);
		} catch (Exception e) {
			e.printStackTrace();
		} 

		if(HttpStatus.SC_OK!=response.getStatusLine().getStatusCode()){
			System.out.println("请求返回不正确");
		}

		String result="";
		try {
           //获得字符串形式的结果
			result = EntityUtils.toString(response.getEntity());
		} catch (Exception e) {
			e.printStackTrace();
		} 
		System.out.println(result);
		return result;
	}
    
    
}

请求返回的数据需要进行处理，使之与EchartsK线图所需要的参数向对应。到这里后台的工作也就完成了，剩下的就交给Echarts。

首先引入Echarts 这个官网有这里就不再赘述。

Echarts K线图demo中的参数

通过观察发现这个数组中的数据似乎并不是都用到了，关键代码如下。

var dates = rawData.map(function (item) {
    return item[0];
});

var data = rawData.map(function (item) {
    return [+item[1], +item[2], +item[5], +item[6]];
});

显而易见 item[0]就是 数据中的date

通过效果图的参数可以定位到open   close   lowest   highest 等关键参数而MA5 MA10 MA20 是通过基于这几个参数计算而来的

明白了这一点 OK 把 获取到的 数据与之对应即可，前端代码：这部分是生成图表的

			function StockMarket(){
			$.ajax({
					url:"stockMarket/getdata",
					async: false,//设置为同步传输
					success:function(result){
					    // 基于准备好的dom，初始化echarts实例
       				 var myChart = echarts.init(document.getElementById('echats'));
					//app.title = '2015 年上证指数';
						//参数 顺序 	日期				open	close						lowest   highest										

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

					var dates = result.map(function (item) {
 					    return item[0];
 					});

 					var data = result.map(function (item) {
 						//			open	close    lowest   highest
 					    return [+item[3], +item[2], +item[4], +item[5]];
 						//3245
 					});
					var option = {
							//整体背景色
					    backgroundColor: '#FFFFFF',
					    legend: {
					        data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
					        inactiveColor: '#777',
					        textStyle: {
					            color: '#110000' //头部颜色
					        }
					    },
					    tooltip: {
					        trigger: 'axis',
					        axisPointer: {
					            animation: false,
					            type: 'cross',
					            lineStyle: {
					                color: '#376df4',
					                width: 2,
					                opacity: 1
					            }
					        }
					    },
					    xAxis: {
					        type: 'category',
					        data: dates,
					        axisLine: { lineStyle: { color: '#8392A5' } }
					    },
					    yAxis: {
					        scale: true,
					        axisLine: { lineStyle: { color: '#8392A5' } },
					        splitLine: { show: false }
					    },
					    grid: {
					        bottom: 80
					    },
					    dataZoom: [{
					        textStyle: {
					            color: '#8392A5'
					        },
					        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.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: '80%',
					        dataBackground: {
					            areaStyle: {
					                color: '#8392A5'
					            },
					            lineStyle: {
					                opacity: 0.8,
					                color: '#8392A5'
					            }
					        },
					        handleStyle: {
					            color: '#fff',
					            shadowBlur: 3,
					            shadowColor: 'rgba(0, 0, 0, 0.6)',
					            shadowOffsetX: 2,
					            shadowOffsetY: 2
					        }
					    }, {
					        type: 'inside'
					    }],
					    animation: false,
					    series: [
					        {
					            type: 'candlestick',
					            name: '日K',
					            data: data,
					            itemStyle: {
					                normal: {
					                    color: '#FD1050',
					                    color0: '#0CF49B',
					                    borderColor: '#FD1050',
					                    borderColor0: '#110000'
					                }
					            }
					        },
					        {
					            name: 'MA5',
					            type: 'line',
					            data: calculateMA(5, data),
					            smooth: true,
					            showSymbol: false,
					            lineStyle: {
					                normal: {
					                    width: 1
					                }
					            }
					        },
					        {
					            name: 'MA10',
					            type: 'line',
					            data: calculateMA(10, data),
					            smooth: true,
					            showSymbol: false,
					            lineStyle: {
					                normal: {
					                    width: 1
					                }
					            }
					        },
					        {
					            name: 'MA20',
					            type: 'line',
					            data: calculateMA(20, data),
					            smooth: true,
					            showSymbol: false,
					            lineStyle: {
					                normal: {
					                    width: 1
					                }
					            }
					        },
					        {
					            name: 'MA30',
					            type: 'line',
					            data: calculateMA(30, data),
					            smooth: true,
					            showSymbol: false,
					            lineStyle: {
					                normal: {
					                    width: 1
					                }
					            }
					        }
					    ]
					};
					myChart.setOption(option);
					
					}//success结束		
				})
}

 var myChart = echarts.init(document.getElementById('echats'));

这段代码的作用就是把图表渲染到指定位置写一个div 对应好id 即可。

<div id="echats"class="content"><!-- 行情图展示位置 --></div>

OK，这样就大功告成了，Echarts真的好用。